One of the first steps to getting started with RaiseDonors is creating a donation page! To do so, navigate to the Fundraise 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 asking you to select one of two options. Are you wanting to embed a form on your website or build a new page? For this article, we’re going to Build a Page.
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.
On the next page, select how you would like to display the form on the page. Choose between the following options:
- Simple
- Lightbox
- Slide-In Panel
Finish this step by filling in some basic information. Then select a payment gateway. You will need to fill in the following information:
- Name: Internal name of the page to label what this form and page are for.
- URL Slug: Customize the ending of the RD-hosted website with a custom word or phrase. (i.e. https://rd.givevirtuous.org/donate/homepagegivingform)
- Default Segment: Connect donations from this page to a Marketing Segment to track where the donations came from.
- 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.
- Gateway: The payment provider you set up to process online donations. (i.e. Stripe, etc.)
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. Start with the basics:
Header
Like any normal website, customize your donation page header with your logo, Donor Portal Link, and a Help & Info Link. You can add additional links as well. 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 settings gives you control of the header’s background color, website link colors, and a CSS Class field.
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 TO BE COMPLETED!
Under the Design tab, you can modify the Section Background Color, and width of the Section, and override the CSS for the section with a custom CSS class you have defined in the page setting's custom CSS area.
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, and on the right a set of options will appear. Select a display option buttons, checkboxes, or tabbed view. By default, the display will be set to Tabs. 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.
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:
The gear icon are additional page settings where you can choose the following:
- Update the page/form 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
The painting icon is for managing the page design, style and color schemes and the eyeball will open a preview of your donation page in a new tab in your browser.
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, click Save in the top right corner if you’re not ready to publish or click the drop down arrow and then Save & Publish to publish your Donation Page.