One of the first steps to getting started with Virtuous Raise is creating a donation page! To do so, navigate to the Experiences section from the main menu in the top left. Select + New Page or Form.
Building a new page will require:
Setup
A modal will appear to walk you through Experience Types and Build Types.
What are you building? Select Donation to create a Giving Form/Page.
How will donors access it? Select Hosted Page to build a standalone page that lives on its own link or Embed to create a form to add directly to your website with an embed code. (This article will walk you through building a page.) You will also be prompted to fill out the following information:
- Name: Internal name of the Form/Page to label what this form and page are for
- (Pages Only) Page Slug: Customize the ending of the Virtuous Raise-hosted website with a custom word or phrase (e.g., https://rd.givevirtuous.org/donate/homepagegivingform)
- Gateway: The payment provider you set up to process online donations (e.g., Stripe)
On the next page, you can optionally choose a template as the starting point for your Form or Page. Or, if you don't want to use a template, you can start from scratch.
Regardless of whether you choose to start from a template or from scratch, configure the Quick Setup toggles to quickly add in or remove certain Components to your Page.
Select Create Experience to move to the page Builder.
Build
The next step of the process is to begin building out the page, and laying out the sections of your new donation page. A page consists of a few customizable sections with the ability to add more. Depending on whether you began from a template or not, Raise will add some Components and Sections to your page. To view and navigate throughout the page in the Builder, use the Navigation tool in the top left.
The Navigation is broken up by:
Header
There are options for you to control how your Header looks and interacts. You can customize your Donation Page Header with your logo, Donor Portal Link, and Custom Links. The Donor Portal Link allows a donor to access their profile to view past giving information and update their credit card.
In addition to that, the Design tab gives you control of the Header’s Position, Layout, Mobile Layout, Font, Background Color, Website Link colors, and a CSS Class field.
To configure the Position, select one of the 3 options:
- Default: disappears after the Donor scrolls past it
- Visible when scrolling: sticks to the top of the page at first but then disappears
- Fixed: remains sticky to the top of the page even after the Donor scrolls
To configure the Layout for where your link and logo are oriented, select one of the 3 options:
To configure Mobile Layout Style to control how your Header menu appears when accessed from a mobile device, select one of the following:
- Standard: at the top of a mobile device
- Drawer: on the right-side of a mobile device
Custom Sections
Now that your Page settings are in place, you can work on the design and customization of it!
Your Page is broken into Sections that can be reordered to fit your design needs. The only Sections that cannot be shifted are the Header and Footer, as those are default locations. To move a Section up or down, simply click on the Section and then drag and drop it to your desired location.
Within each Section, you will have Columns and within each Column, you can add Components. Select Add Section and a blank Section block will be created.
Then, modify the Column Layout of your new Section or begin adding Components from the left-hand menu.
Use the search bar to search for a specific Component or browse through the dropdown options for Content, Forms and Input, Giving, Layout and Controls, or Widget Components. Drag and drop the chosen Component into your column Section.
After selecting your Component, the customizing respective options on the right hand side will be available. Simply drag and drop the selected Component into your page builder.
When you select a Section, you’ll notice that Settings and Design options will open to the right of the Page preview.
Under the Settings tab, you can modify the Layout Type and Background Image for the specific Section selected. You’ll notice you can toggle between the three Device Display options to control whether that section appears only for donors viewing the page on a mobile device, a desktop device, or, you can have it be visible on any device size.
Next, you can upload a specific image to be used as the background for this specific Section. If you would like to use one Background for both mobile and desktop select the Background Image box to choose the image to be uploaded.
Once your image is uploaded, you can adjust:
- Background Image Position: Select the center, top, or bottom of the image
- Optional Overlay Color
- Optional Border Color, Configure the Border Style, Width, and Corners
- Optional Drop Shadow and Shadow size
- Column Padding, Margin, Alignment, ID, and add CSS Class
Giving Form
The third piece of your donation page is the Giving Form. You can modify your Giving Form to have as many steps as you'd like and each step can contain whichever form components you wish. By default, Forms will be pre-loaded onto your page with all the necessary components you'd need. But these are just starting points. You have the power to customize your Form as much as you'd like.
In our example, we chose a Lightbox display type for our Giving Form. This means that the form will pop up on top of the donation page as a modal, covering the other sections on the page. There are other options to choose from.
Along with customizing each step of your Form (and controlling the number of steps the Form has) all of the buttons and overall design of the modal can be customized as well.
As with any Form, there are many Giving Components you can optionally include. For more information on adding Giving Components to your Form, check out this article.
Finish customizing additional fields on each step of your new Giving Form. Then, move on to the final section of your page, the Footer.
Footer
The footer is the bottom informational section of your page that can display your organization’s primary website and contact information. Just like the Header, you can add your logo, adjust the color scheme, as well as add your contact information and additional website links as well.
Prompts
There are optional Prompts you can include (and customize) in your giving experience. These Prompts appear at strategic moments to boost conversions, encourage recurring giving, and maximize donation value.
Use the arrow icon in the left-hand menu to select and enable one of the following Prompt options:
- Recurring Ask Prompt: Prompts donors to make their donation recurring after they have selected one-time giving
- Abandoned Form Prompt: Displays a reminder when donors attempt to leave without completing their donation
- Shared Impact Prompt: Shows recent donation activity to encourage donors to give
To learn more about enabling and customizing Prompts, check out this support article.
Settings and Design
Before publishing your new Donation Page, there are a few small steps to complete during the Build stage first: review Settings and Design. Settings (gear icon) and Design (paint icon) are found in the top left.
Under Settings, find additional page configurations where you can choose the following:
- Update the Form/Page name, page slug, default segment, and gateway
- Trust & FAQ Center allows you to instill trust in your donors by answering common security, tax, and alternative giving questions right from your donation Page or Form.
- Enable "test mode"
- Select specific email templates that will send to donors who give through your page or form
- Send a test email to yourself before publishing
- Areas to add custom CSS and JavaScript code blocks to customize your page
Under Paint, manage the page design, style and color schemes.
Undo & Redo and Preview
If at any time, you need to go back to a previous version of your Form or Page, you can reverse changes you make using the Undo and Redo buttons in the top right, or you can preview what your page will look like with the current customizations. In the top right corner, find the Undo & Redo Icons and the Preview icon.
The Preview eyeball opens a preview of your donation page in a new tab in your browser. To preview your current build, you can toggle between a Desktop view and Mobile view in the top right corner of the preview page.
Publish
The final step to completing your new Donation Page is to Publish it. If you are building a Page, you will see the published page URL and be able to view or download a QR code that will link donors to your page.
If you are building an embeddable Form, the publish step will give you a code snippet that you can copy and paste into your website where you want the Form to appear.
Need More Help?
Need more help optimizing your Giving Pages? Virtuous Professional Services can customize, build, and optimize your Virtuous Raise Forms or Pages to boost donor engagement. Click here to learn more about our Professional Services offerings, or contact your Customer Success Manager to get started!