Author: Kristenson, Joel

Last Updated: 2016-08-23

Overview

 

This article will guide you through detailed steps on how to integrate your website with your Trail Blazer database (i.e. volunteer signup form, email signup, online donations).  It will teach you how to implement attributes with your signup forms, generating the iFrame code using our iFrame Wizard and finally pasting that code into your website where you can begin collecting data back into your database.

Outline

#1  Setup Your Online Donation Form and Integrate to your Website with IFrame Wizard

#2  Setup Your Online Volunteer Signup Form (with Custom Attributes)

#3  Setup Your Email Signup Form

#4  Related Resources

 

NOTE:  Use the Ctrl+F hot key to quickly jump to different sections of this tutorial. (Ex: Search “#4” to get to related resources).

 

#1 Setup your Online Donation Form and Integrate to your Website with IFrame Wizard

(This article assumes you have security access to the System Manager branch.)

Navigate to the website configuration window by following Application Menu > System Manager > Settings > Website Configuration

 

 

Click the Donations tab and the Page Setup sub-tab.

 

 

This is where you can customize much of your donation form by toggling features on and off i.e. Is email required, show honor of, disable captcha etc.  In this location you can also decide if you want to show a security disclaimer, choosing if you want to use the default or your own.

Here’s a list of everything else you can control from the Page Setup window:

    - Is Federal Required (Employer/Occupation)

    - Is Email Required

    - Show Other Amount

    - Show Donation Level Description

    - Show Restricted Funds (Allocations)

    - Disable Captcha

    - Show Comments

    - Show Honor of

    - Show Middle Name

    - Show Nick Name

    - Show Donation Ticker (Ticker Size, Ticker Start Date & Ticker Style)

    - Support Recurring Donations (Style (Drop-down VS Radio Buttons) and the Vanco Post URL)

    - Amount Box Label

    - Button Label

    - Show Attributes Component

    - Show Lawn Sign Component

Below is a picture of the customizations you can control (listed above):

 

 

NOTE:  After making any changes to your online forms you must [Save] in the bottom right of the window and you must click the blue link in the top right that says Click here to refresh your web pages using updated specifications.  The image below displays this sequence.

 

 

After you have adjusted your settings in the Page Setup sub-tab you can navigate to the Donation Amount sub-tab if you want to control specific donation amounts and amount descriptions as well as the order they will display on your website.

 

 

The first column in this location is called [ID] which is the sequence in which these donation amounts show up on your form.  Whatever amount you want to show up first you should put in the row with ID 1, the one you want to show up second should go in the row with ID 2 and so on.

The next sub-tab over called Frequency and this is where you can customize the Sort Order, Description and which donation frequencies are enabled.  The image below displays your options.

NOTE:  Currently only the customers using Vanco as their merchant gateway have the option to support automatic recurring donations.

 

 

The next sub-tab over is called Email Response, this is where you can insert an email template you have created to be used as an automatic responder when people donate online.  You must first create this template in your database and then you can select from the drop-down as the image below displays.  Click Here to watch email related videos on the Trail Blazer YouTube Channel or Click Here to read knowledge base articles related to emails.

 

 

When you are all finished creating your online donation form click [Save] in the bottom right  and you can see a live preview from the Live Preview sub-tab.  If the preview meets your needs click the blue underlined link on the top right that says Click here to refresh your web pages using updated specifications.

 

 

If you have already integrated your online form to your website, these changes will take effect immediately.  If you still need to embed the donation form (as an iFrame) the next section will cover these steps.

To integrate your online donation form you will start by clicking the [IFrame Wizard] button at the top of the Website Configuration window.

 

 

From this window you can select the Frame Type as Donations.

 

 

If your form is long you may want to Allow Scrolling or adjust the Height of the form to accommodate for its length.  This is very important in order for the entire form to be displayed on your website.  BE SURE TO VERIFY THIS IN DIFFERENT BROWSERS.  All browsers render your pages a little differently.  It may fit fine on one browser, but not another.

 

 

 

If you choose your own redirect page you will be need to insert that URL into the Thank You Page text field.  You may connect the donation page to an event and/or to an attribute with the last two options.  You can designate these from the related drop-downs.

 

 

The last step is to actually integrate the IFrame into your webpage.  This varies depending on how you manage your website i.e. Drupal, Word Press, MS Expressions Web, Wix etc.  The process is however, basically the same.  You need access to the HTML code for your donation page.  Next you will press the [Copy HTML] button in Trail Blazer and paste this code into your website’s code.  The form will now be embedded in your website.

The image below shows a sample online donation form:

Image 1 of 2

 

 

Image 2 of 2

 

 

NOTE:  The same method of integrating your iFrame forms is used for all form types.  You will just select the different Frame i.e. Volunteer Signup, Email Signup etc.

 

 

#2 Setup Your Online Volunteer Form (with Custom Attributes)

This section will talk about customizing your online volunteer signup form (with attributes); it will not cover the integration of the form to your website.  To learn how to do that, refer to the last part of section #1 Customizing and Integrating Your Online Donation Form – the integration process is the same for each form.

To show attributes on your online form navigate to the folder of attributes you want to display.  Follow Application Menu > Voter/Donor > Voters/Donors

 

 

Click on the Attribute tab and right-click on the folder of attribute items you would like to display on your online form.  If you need to learn how to create these attribute folders and attribute items click here.  In my example I have a folder already created called “Volunteer” and it’s full of attribute items related to volunteer activities I would like people to sign up for.  After right-clicking the folder, select Properties.

 

 

Display on Web Site – check to indicate this attribute is to be displayed on your website.

Display Label – sets the desired text to be displayed on your website.

Display Sequence – sets the order you want the attributes to be displayed on your website.  HINT: Set your sequences with gaps.  For example, 10, 20, 30, 40, etc.  If you later decided to add an item between 20 and 30, you can number it 25 and not have to renumber all the rest.

 

 

Click [Save] in the bottom right when you’re finished.