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 a three step process:
Setup
A modal will appear to walk you through Experience Types and Build Types.
Experience Types: Select Donation to create a Giving Form/Page.
Build Types: Select Build a Page to build a standalone page that lives on its own link or Embed on My Website to create a form to add directly to your website with an embed code. (This article will walk through building a page.) You will also be prompted to fill out the following information:
- Form/Page Name: Internal name of the Form/Page to label what this form and page are for
- Internal Form/Page 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)
- Default Project: If the donor does not select a project to give to, all gifts from this Form or Page will go to the default project.
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.
Build: Components
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. Start with the basics under the Components toggle:
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 you will have a blank Section block created.
Then, you can select “Add to Column” and a pop-out menu will appear.
Here, you can decide what exact component you need for this column.
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 select 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 fields to include on this Giving Form. One essential field is the Frequency of a recurring gift a donor could choose. Click on the Frequency field on the left, and on the right a set of options will appear. Select a display option of Buttons, Checkboxes, or Tabs (default). Choose from available frequencies to be added to the Giving Form.
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.
Undo & Redo, Settings, Design, 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.
Before Publishing your new Donation Page, there are a few small steps to complete during the Build stage first. In the top right corner you should see these three icons:
1. Settings: The gear icon are additional page settings 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
2. Paint: The painting icon is for managing the page design, style and color schemes.
3. Preview: The eyeball will open 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.
Build: Prompts
There are 3 optional prompts you can include (and customize) in your giving experience:
- 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.
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/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.
When you’re finished with this step, press Save in the top right corner if you’re not ready to publish or select the drop down arrow and then Save & Publish to publish your Donation Page.
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!