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.
Now that you have the attribute(s) activated that you want to display on your online forms the next section covers how you can further customize your online signup (with attributes) form.
Navigate to the Website Configuration window (assumes you have access to the System Manager branch). Follow Application Menu > System Manager > Settings > Website Configuration
You now have the option to customize a volunteer form called Signup No Groups or Signup Groups (groups in this case are referring to attributes) and in this article I choose to customize my volunteer form with groups (attributes).
Click on the Signup Groups tab.
Below are the options you have in the Page Setup location of the Signup Groups:
- Disable Captcha (What is a Captcha? Click Here)
- Show Lawn Sign Component (Political/PAC customers only)
- Show Comments
- Email is required
- Disable Email Opt In Default
The next sub-tab is the Email Response, this is where you can select from your prebuilt email templates to use as an automatic responder when volunteers are signing up.
The last sub-tab is the Live Preview (SignupGroups.aspx) and here you can view your volunteer signup (with groups) as it will look online. If everything is in place you can click [Save] in the bottom right and click Click here to refresh your web pages using updated specifications.
Image 1 of 2
Image 2 of 2
You are now finished customizing your online form for Signup Groups A.K.A Volunteer Signup. Below is an image displaying what my sample form looks like on my website.
#3 Customize your Email Signup Form
Navigate to website configuration and click on the Signup Email tab and the Page Setup sub-tab.
The options you have in this location include:
- Disable Captcha (What is a Captcha? Click Here)
- Show Comment
- Show Zip Code
The next sub-tab is Email Response and just like the previous sections in this article explained, this is the location where you can select one of your prebuilt templates and insert it to go out as an automatic responder every time someone signs up for your email list.
The last sub-tab is the Live Preview (SignupEmail.aspx) where you can view how your email signup looks as it will be live on your webpage. When ready, click [Save] in the bottom right and click the link “Click here to refresh your web pages using updated specifications” which will publish any new changes you made to your website.
NOTE: When you generate the iFrame code to copy and paste into your form(s) on your website, you do have the option to add your own code (ex: CSS) to further customize the look and feel. The image below shows my sample email signup as it would look with a bit of CSS so my background colors match. To learn about CSS Click Here.
ANOTHER NOTE: When people signup online or you manually enter an email into your database, they will be enabled for inclusion in your eblasts. However, if you upload a list of emails, you will first need to contact Trail Blazer before this list can be verified and enabled for eblasts.
#4 Related Resources
Trail Blazer YouTube Channel: “IFrames”
Knowledge Base: All Email Related Articles
Trail Blazer YouTube Channel: All Email Related Videos
Trail Blazer’s Supported Merchant Gateways: Merchant Gateways
W3 Schools Tutorial: CSS – Cascading Style Sheets
Still have questions or need a support technician to assist with setup and integration of any of these forms? Call our support line (866) 909-8700 or email support at support@trailblz.com
