When setting up a new donation page there are now two options for building your page, Simple or Advanced. This article will outline the options and features of the Advanced Page Designer.
To select the Advanced design on the "Acknowledgement Info" step select the "Advanced" option. Then after completing the rest of the settings click the "Save & Next" button. This will then take you to the next step where you are able to select a base template for the design of your donation form. After the selection of a Template and which color theme should be used it will launch in the Advanced designer.
Once on the "Page Designer" step Here you will be able to customer your donation page by selecting which widgets to include and how they should be styled. The designer will show all the available page widgets on the left column and the right column will display the widgets currently being displayed on your donation page. Widgets can be dragged and dropped from either column to the other. The widgets on the right will also be displayed in the order they will appear on the donation page, top to bottom.
Just above the designer you will find several settings on the right. Please see below for each settings description.
Page Preview – This button will allow you to see a full screen preview of the widgets below on the donation page as they would show to a donor.
Page Settings – This setting will allow for you to apply various options to your donation page such as:
Reset Colors – Click to reset the colors of this widget back to their default selections.
Sync with Theme Colors – After changing the “Theme” you can update this widgets styling to match the selected “Theme”.
Settings:
Hide Portal Links – Select Yes, to high links to access or register for the portal.
Show Default Logo – Select Yes, to display the default logo from your account settings.
Show Other Logo – Select Yes, to upload an alternative logo to be displayed.
Logo Alignment – Select which alignment the logo should use.
Show Company Name – Select Yes, to display the name of your organization.
Styles:
Page Styles – Select the Font and styling for the pages error message.
Text – Select the default Color, Font and styling for the page text.
Background – Select the background color for the page.
Boarder – select the color and size for the page boarder if desired.
Spacing: Insert Padding and Margin in pixels for the page.
Layout – This dropdown field will allow for you to select from different layout orientations. Allowing you to choose from the number of columns and overall width of the widgets on the page.
Theme – This dropdown field will allow you to select from predesigned color themes that can be applied to the widgets included in the Designer. You will also find an option in the picklist to create your own customer theme by choosing your desired colors and font settings.
Use Dark Mode? – This toggle setting will allow you to switch between light and dark modes for each of the themes selected under the “Theme” dropdown field. The default light mode will be based on a white background color. Where the dark mode will be based on a black background color.
Designer Functions
Moving Widgets:
Each widget can be dragged and dropped with your mouse to the desired location on the designer. Each widget displaying on the designer board you will see in the left corner a four-way arrow icon. Clicking on this icon and dragging the widget will provide the best
way to move the widget. Widgets can be move above or below other widgets or when the width of your widgets has been reduced that can be moved into the same row as other widgets. Changing the “Layout” can make the process of making multiple column rows easier. Once you have dragged the widget into its desired location just release your mouse.
To change the width of your widget place your mouse on the widgets right edge, your mouse should change into a two way (right & left) arrow curser. You can now drag the edge to the desired width. Similar to the width you can also change the height of you widget. Move your mouse to the bottom edge of the widget, again your mouse should change to a two way (up & down) arrow curser. You can now drag the edge of the widget to the desired height.
To remove a widget from the Designer and return it back to the available widget column you can click the “X” icon in the top right corner of that widget.
Widget Menu:
Clicking on the three blue dots in the top left corner of a widget on the Designer will give you access to its menu. Below are the menu options:
Widget Settings – Access all the settings and styling options for that Widget.
Alignment – Select the alignment for this widget. This setting can only be used if the widget is the only one in its row and is set to a width that is smaller than the total width of that row.
Toggle Preview Mode – See the preview of that widget to see how it will look to the donor.
Widget Overview
The following is a list of all Donation Page widgets and their abilities:
Page Title
This widget allows for the inclusion of the title created for the donation form on the “Acknowledgement Info” step on the Donation Form.
Setting:
Page Title Alignment – Choose which alignment the title should be displayed as.
Style: Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Recurring Switch
Allow the donor to select between a one-time or a recurring donation. This widget can be removed if you setup the donation form for only one-time donations or only recurring donations on the Donation Page Setting step.
Settings:
Make Recurring Donation Default – When set to "Yes" the recurring donation fields will display to the donors when the form loads.
Hide One-Time Donations – When set to "Yes" the donor will not be able to select the option to make a one-time donation.
Allow to select future date for recurring donations – When set to "Yes" a calendar field will display to the donor allowing them to select the date for when their first payment will be processed.
Style: Edit the Widget's Text, Background and Border styles.
Title Styles
Donate Page Subtitle – Enter the name to display above the donation type switch to identify this section of the form.
Text
Button Color – Select the color and font styles for the recurring button.
Spacing: Edit the Widget's Padding and Margin.
Amount Contact Payment Combo*
The combo widget allows your to include multiple widgets in a progressive workflow for the donors. The default widgets included in the workflow are the "Amount", "Contact Info", and "Payment Method" widgets. The donor will enter their donation amount and then click next before entering their Contact Info and so on.
In addition to those three default widgets are the following:
- Recurring Switch - Selector for one-time or recurring donations.
- Tribute - Collect tribute donation details.
- For/Fund/Event/Appeal/Location - Allow for the donor to designate their donation.
- Additional Info - Collect additional details about the donor that will populate onto their Constituent Profile.
*If you choose not to use the combo widget you will be required to add the individual "Amount" "Contact Info" and "Payment Method" to the designer.
Settings:
Button Alignment – Select the alignment of the buttons representing the three steps of the donation.
Enable Captcha – When set to Yes the captcha will be made visible to validate the donor is real.
Select Widgets – Choose which widgets should be include within the progress workflow of this Combo widget. "Amount", "Contact Info" and "Payment Method" are required.
Amount Settings:
Minimum Donation Amount – Enter the lowest amount of donations that can be processed through the form.
Allow donations in foreign currencies – When set to Yes, the form will display the conversion rates between foreign currencies and the US Dollar.
Save Credit Card Information – When set to Yes, the Credit Card used for the donation will be saved on the donor's Constituent record.
Allow to pay processing fee – When set to Yes, the option to include the processing fee in the donation will be visible to the donor.
Processing Fee Comment – Select the sentence used to identify the processing fee to the donor.
Default to Pay Processing Fee – When set to Yes, the box to include the processing fee in the donation will be checked by default.
Require to Pay Processing Fee – When set to Yes, the processing fee will be added to all credit card donations.
Connect to Peer-To-Peer Campaign – When set to Yes, you will be able to link the form to a P2P Campaign.
Participant Label – Enter the title text that will appear above where the donor can select the P2P Participant their are sponsoring.
Peer-To-Peer Campaign – Select which P2P Campaign the donation form should be connected too.
Use Predefined Amount – When set to Yes, you will be able to create multiple custom amount including an “Other” option that will be visible to the donor to select when inputting their donation amount through the form.
Each Predefined Amount can have a custom Amount, Caption and Image. You can also select which predefined amount should be the default. That means it will be automatically selected as the amount whenever the donation form is launched.
Contact Info Settings:
Do not allow donations on behalf of a company/organization – When set to Yes, the Company fields will be unavailable to the donor to make a Company donation.
Default donations to on behalf of a company/organization – When set to Yes, The Company fields will be available by default for a Company donation.
Address Information NOT Required – When set to Yes, the address fields will not be validated before the transaction is submitted.
Payment Method Settings:
Allow One-Time Pay Later Donations – When set to Yes, one-time donors can choose to pay later for their donation amount. No credit card will be collected.
Pay Later Due Date – Enter the due date for the Pay Later Donation payment schedule.
Allow Recurring Pay Later Donations – When set Yes, recurring donors can choose to pay later for their donation amount. No credit card will be collected.
Allow Internal Only To Pay Later – When set to Yes, only donations processed by an internal user can opt into the Pay Later option.
Pay Later Comment – Enter the message that will appear next to the Pay Later opt in/out checkbox on the donation form.
Style:
Title Styles:
Amount Styles:
Donation Amount Title – Enter the title text that should display above the Amount field.
You will then be able to select the Font, Font Style Size and Style for that title.
Payment Method Styles:
Donation payment information title – Enter the title text that should display above the Payment Method fields.
You will then be able to select the Font, Font Style Size and Style for that title.
You will also be able to edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Amount*
Collect the amount for the donation and setup pre-defined amounts for the donor to select from.
*If using the individual "Amount" widget the donation page must also include the individual "Contact Info" and "Payment Method" widgets.
Settings:
Minimum Donation Amount – Enter the lowest amount of donations that can be processed through the form.
Allow donations in foreign currencies – When set to Yes, the form will display the conversion rates between foreign currencies and the US Dollar.
Save Credit Card Information – When set to Yes, the Credit Card used for the donation will be saved on the donor's Constituent record.
Allow to pay processing fee – When set to Yes, the option to include the processing fee in the donation will be visible to the donor.
Processing Fee Comment – Select the sentence used to identify the processing fee to the donor.
Default to Pay Processing Fee – When set to Yes, the box to include the processing fee in the donation will be checked by default.
Require to Pay Processing Fee – When set to Yes, the processing fee will be added to all credit card donations.
Connect to Peer-To-Peer Campaign – When set to Yes, you will be able to link the form to a P2P Campaign.
Participant Label – Enter the title text that will appear above where the donor can select the P2P Participant their are sponsoring.
Peer-To-Peer Campaign – Select which P2P Campaign the donation form should be connected too.
Style:
Title Styles:
Amount Styles:
Donation Amount Title – Enter the title text that should display above the Amount field.
You will then be able to select the Font, Font Style Size and Style for that title.
You will also be able to edit the Widget's Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Contact Info*
Collect the donor’s Name and contact info such as Email and Phone Number.
*If using the individual "Contact Info" widget the donation page must also include the individual "Amount" and "Payment Method" widgets.
Settings:
Do not allow donations on behalf of a company/organization – When set to Yes, the Company fields will be unavailable to the donor to make a Company donation.
Default donations to on behalf of a company/organization – When set to Yes, The Company fields will be available by default for a Company donation.
Address Information NOT Required – When set to Yes, the address fields will not be validated before the transaction is submitted.
Style: Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Payment Method*
Collect the credit card details and billing address.
*If using the individual "Payment Method" widget the donation page must also include the individual "Amount" and "Contact Info" widgets.
Style:
Title Styles:
Payment:
Donation payment information title – Enter the title text that should display above the Payment Method fields.
You will then be able to select the Font, Font Style Size and Style for that title.
Donate Button:
Donation button text - Enter the text for the form submission button.
You will then be able to select the Font, Font Style Size and Style for that title.
Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Goal Progress
Display the progress of your fundraising campaign with your donors through various charts on the donation page.
Settings:
Fundraising Goal Category – Select which Fundraising Category the donations processed through this form should be subscribed too. All transactions connected to this Category will populate the amount that appears on the graphic.
Goal Chart Title – Enter the text that will display as the graphic's Title.
Goal Chart Type – Select which type of chart will be displayed.
Goal Chart Type – Select whether the graphic will display amount or number of transactions.
Goal Amount – If "Goal Amount" was selected as the Chart Type enter the goal amount to be displayed.
Goal Quantity – If "Goal Quantity" was selected as the Chart Type enter the goal number of transactions that should be displayed.
Include Pledges In Total Raised – When set to Yes, Pledge amounts will be included in the total raised amount on the graphic.
Include 'Pay Later' Ticket Purchases In Total Raised – When set to Yes, Prices from Pay Later event transactions will be included in the total raised amount on the graphic.
Style:
Chart Styles: Select the font and colors for the Goal Progress Graphic.
Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Social Media Share
Include social media buttons allowing donors to share your donation form with their followers on social media.
Style: Edit the Widget's Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Picture Gallery
Upload images to be displayed on the donation form.
Settings:
Gallery Type – Select how you would like your images displayed within the gallery.
Upload Images – Click Select Files to open your file browser to select which image you wish to upload into the gallery. Once an image has been uploaded you can add a caption by clicking the pencil and paper icon or click the Trashcan Icon to remove/delete the image from the gallery.
Style: Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
YouTube Video
Embed a video from YouTube using the Share URL for that video.
Settings:
Youtube Video URL – Enter in the “Share” URL for the desired YouTube video you wish to display on the donation form.
Video Caption – Enter any text you wish to display as the videos caption.
Style: Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Page Message
Include text to be displayed on the donation form as a message to the donor.
Settings: Enter the text you wish to display on the donation form. Within the text body you will also have styling options to choose Font, Font Size, alignment, Font Color and much more.
Style: Edit the Widget's Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Document:
Include an uploaded document to be downloadable from the online form, this document can also be made to required acknowledgement by the donor.
Settings:
Requires Acknowledgement – When set to Yes, the donor will need to check a box acknowledging the document before they are able to submit their transaction.
Document Name – Enter the name that will be displayed on the form for the donor to download the uploaded file.
Headline – Enter the text that will appear before the Document Name on the online form.
Select File – Click to search and select the file you wish to make available for download on the online form.
Style: Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Matching
Allow a donor to input details about the Company/Organization that will be matching their donation including the matching percent.
Style: Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Tribute
Allow donors to input details about the tribute for their donation and who should be notified about it.
Settings:
Default Tribute Gift to Yes – When set to Yes, the tribute fields will be visible on the form by default.
Tribute Notification Notes – Enter the title text that will display above the field for the donors to enter additional notes about their tribute donation.
Select which Tribute Notification Fields to be displayed on Donation Form – Choose which tribute fields should be available for the donor to fill out.
Style: Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Subscriptions
Allow donors to subscribe to email list and text message categories to opt into your communication.
Settings:
Show Email Subscription List – When set to Yes, the donation form will display the email list categories for the donor to subscribe too.
Email Subscription Label – Enter the title text that will display above the field where donors can select which email list categories they wish to subscribe too.
Allow donor to subscribe for text messages – When set to Yes, the donation form will display Text Messaging Categories for the donor to subscribe too.
Categories – Select which Text Messaging Categories should be displayed on the form.
Hide Option to Notify Via Text – When set to Yes, the donor will be unable to have a Thank You acknowledgement sent to them via text for their transaction.
Style: Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Memo
Include a multi-line text box to collect additional comments from the donor.
Settings:
Memo Field Name – Enter the custom title that will display next to the memo field on the donation form.
Style: Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Give Anonymously
Include a checkbox for donors who wish to remain anonymous to check to appear on the online form.
Style: Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
For/Fund/Event/Appeal/Location
Allow for the donor to make designations for their donations by using select For, Fund, Event, Appeal and or Location values.
Settings:
Gift For:
Show Gift For – When set to Yes, a picklist will appear on the online form for the donor to select which “For” value they which to designate their donation for.
For Field Name – Enter the custom name you wish to appear as the title for the “For” picklist.
Select the Values… – Select from the picklist which “For” values you wish to have displayed on the online form for selection by the donor.
Fund:
Show Fund – When set to Yes, a picklist will appear on the online form for the donor to select which “Fund” value they which to designate their donation for.
Fund Field Name – Enter the custom name you wish to appear as the title for the “Fund” picklist.
Select the Values… – Select from the picklist which “Fund” values you wish to have displayed on the online form for selection by the donor.
Event:
Show Event – When set to Yes, a picklist will appear on the online form for the donor to select which “Event” value they which to designate their donation for.
Event Field Name – Enter the custom name you wish to appear as the title for the “Event” picklist.
Select the Values… – Select from the picklist which “Event” values you wish to have displayed on the online form for selection by the donor.
Appeal:
Show Appeal – When set to Yes, a picklist will appear on the online form for the donor to select which “Appeal” value they which to designate their donation for.
Appeal Field Name – Enter the custom name you wish to appear as the title for the “Appeal” picklist.
Select the Values… – Select from the picklist which “Appeal” values you wish to have displayed on the online form for selection by the donor.
Location:
Show Location – When set to Yes, a picklist will appear on the online form for the donor to select which “Location” value they which to designate their donation for.
Location Field Name – Enter the custom name you wish to appear as the title for the “Location” picklist.
Select the Values… – Select from the picklist which “Location” values you wish to have displayed on the online form for selection by the donor.
Style: Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Additional Info
Include additional fields to donor to provide additional information to populate their profile within the software.
Settings:
Additional Fields
Select from the picklist which additional profile fields you wish to add to the online form.
Style: Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
HTMl Block
Include custom HTML coding to display what you want on the donation form.
Settings: Enter the HTML code.
Style: Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Organization Info
Display the Name and Address for your organization on the donation page. This widget is recommended as the footer of your donation page.
Style: Edit the Widget's Text, Background and Border styles.
Spacing: Edit the Widget's Padding and Margin.
Once you have completed the design of your donation page you can click the “Save” or “Save & Next” option to save you design. “Save & Next” will also take you to the next step in the process the “Thank You Message”.