Custom forms are not supported by Trail Blazer. All custom forms are the sole responsibility of the author.
Click
Here to view/save this article
as a PDF.
Author:
Joel
Kristenson
Last
Updated: 2014-11-25
Overview
This article provides an
example get/post JavaScript form that you can use as a starting point to
integrate with your Trail Blazer
database. You’ll need to replace the code in red with your specific
database name,
custom text,
images, and
hyperlinks.
You’ll use a
JavaScriptprogramming function called
‘Get’ that allows you to collect information through something other
than our iFrames
utilizing
Trail
Blazer’s API.
*If you don’t have vast
programming knowledge or contract with a company that does, you should
keep in mind that the form example below does not provide a lot of
JavaScript validation so the person who does fill out the form could
potentially make a lot of mistakes when entering things like date
& phone information if their format isn’t exactly what
Trail
Blazer
supports.
Tip:
This can be
useful if you want to:
- Make your forms mobile
responsive for different screen
sizes.
- Display only the fields you
want to capture "i.e. gender, race, birthdate, name, address, political
jurisdiction fields, contact info
etc."
- Add styling and layout that
blends well with the rest of your theme utilizing CSS.
- Setup a survey/poll
for any number of
reasons.
IMPORTANT!
Technical support
from Trail Blazer is NOT included on custom
pages.
If you want to
learn about our secure iFrame forms click
here or
click
here to watch a
video.
It’s also good to
note that these custom signup forms DO NOT
auto-merge records with existing data in your database as the iFrames
do. Click
here to watch a video
on de-duping your database.
Example - All Available
Fields
(Contact info/address/user
text-decimal-date/radio buttons/attribute check
boxes)
Click
here to view a live preview,
feel free to test it out for the full experience of being re-directed
and receiving the auto-responder
email.
Screenshot 1 of
2:
Screenshot Image 2 of
2:
NOTE:
The code in
red below
will need to be replaced with your Database Name, redirect page URL,
image sources, hyperlinks, attribute id’s
etc.
Copy &
Paste all of the code below into
your text
editor and save as an .html
document.
Replace the appropriate
code and upload the webpage to your hosting provider OR you can upload
it as a document to your Trail Blazer Application Menu
(www.trailblz.info/YourDataBaseName) – the image below shows
how to upload a document to host it on our
domain:
<!--EXAMPLE
ONE START-->
<!DOCTYPE
html>
<html>
<head>
<title>Trail Blazer
Get-Post Signup
Form</title>
<style>
input {
margin-left: 25px;
width: 175px;
}
h4,h2 {
margin-left: 25px;
}
label {
display: block;
float: left;
width: 160px;
font-weight: bold;
margin-left: 20px;
color: #323232;
}
.radio {
width: 20px;
}
</style>
</head>
<body
style="padding: 0; margin: 0; margin-top:
0px;">
<form
action="http://www.trailblz.info/demononprofit_joel/signup_post.aspx"
method="get" name="formName1" onsubmit="return validateform()"
style="width: auto; height: atuo; font-family: arial, sans-serif;
font-size: 16px; background-color: #F5F5F5; margin-top: 0; padding: 0;
color: #2B2B2B">
<div
style="margin-left: 25px; font-size: 20px; padding-top: 25px; font-size:
32px">
<span style="color: #141414"><u>Complete
the form
below</u></span><br><br>
</div>
<div>
<label for="firstname">First Name<span
style="font-size:
16px;">*</span></label><input
maxlength="100" name="firstname" type="text"
/>
</div>
<div>
<label for="lastname">Last Name<span
style="font-size:
16px;">*</span></label><input
maxlength="50" name="lastname" type="text"
/>
</div>
<div>
<label for="email">Email<span style="font-size:
16px;">*</span></label><input
maxlength="200" name="email" type="text"
/>
</div>
<div>
<label
for="street">Street</label><input
maxlength="200" name="street" type="text"
/>
</div>
<div>
<label for="street1">Apt. / Suite
#</label><input maxlength="200" name="street1"
type="text" />
</div>
<div>
<label for="city">City</label><input
maxlength="200" name="city" type="text"
/>
</div>
<div>
<label
for="state/province">State/Province</label><input
name="state" type="text" />
</div>
<div>
<label for="zipcode">Zip Code<span
style="font-size:
16px;">*</span></label><input
maxlength="11" name="zipcode" type="text"
/>
</div>
<div>
<label for="cellphone">Cell
Phone</label><input maxlength="200"
name="cellphone" type="text" placeholder="(123) 456-7891"
/>
</div>
<div>
<label for="homehome">Home
Phone</label><input maxlength="200"
name="homephone" type="text" placeholder="(123) 456-7891"
/>
</div>
<!--DOES
NOT WORK FORMATTING BUG IN SERVER SIDE
VALIDATION!!
<div>
<label for="workphone">Work
Phone</label><input maxlength="200"
name="workphone" type="text" placeholder="(123) 456-7891"
/>
</div>-->
<div>
<label
for="organization">Organization</label><input
maxlength="200" name="organization" type="text"
/>
</div>
<div>
<label
for="occupation">Occupation</label><input
maxlength="200" name="occupation" type="text"
/>
</div>
<div>
<label for="jobtitle">Job
Title</label><input maxlength="200" name="jobtitle"
type="text" />
</div>
<div>
<label for="user1">User Text
1</label><input maxlength="200" name="user1"
type="text" />
</div>
<div>
<label for="user2">User Text
2</label><input maxlength="200" name="user2"
type="text" />
</div>
<div>
<label for="user3">User Text
3</label><input maxlength="200" name="user3"
type="text" />
</div>
<div>
<label for="user4">User Text
4</label><input maxlength="200" name="user4"
type="text" />
</div>
<div>
<label for="user5">User Text
5</label><input maxlength="200" name="user5"
type="text" />
</div>
<div>
<label for="user6">User Text
6</label><input maxlength="200" name="user6"
type="text" />
</div>
<div>
<label for="user7">User Text
7</label><input maxlength="200" name="user7"
type="text" />
</div>
<div>
<label for="user8">User Text
8</label><input maxlength="200" name="user8"
type="text" />
</div>
<div>
<label for="user9">User Text
9</label><input maxlength="200" name="user9"
type="text" />
</div>
<div>
<label for="user10">User Text
10</label><input maxlength="200" name="user10"
type="text" />
</div>
<div>
<label for="user11">User Text
11</label><input maxlength="200" name="user11"
type="text" />
</div>
<div>
<label for="user12">User Text
12</label><input maxlength="200" name="user12"
type="text" />
</div>
<div>
<label for="userdecimal1">User Decimal
1</label><input maxlength="200" name="userdecimal1"
type="number" placeholder="NUMBERS ONLY!"
/>
</div>
<div>
<label for="userdecimal2">User Decimal
2</label><input maxlength="200" name="userdecimal2"
type="number" placeholder="NUMBERS ONLY!"
/>
</div>
<div>
<label for="userdecimal3">User Decimal
3</label><input maxlength="200" name="userdecimal3"
type="number" placeholder="NUMBERS ONLY!"
/>
</div>
<div>
<label for="userdate1">User Date
1</label><input maxlength="200" name="userdate1"
type="text" placeholder="1/2/2014" />
</div>
<div>
<label for="userdate2">User Date
2</label><input maxlength="200" name="userdate2"
type="text" placeholder="1/2/2014" />
</div>
<div>
<label for="userdate3">User Date
3</label><input maxlength="200" name="userdate3"
type="text" placeholder="1/2/2014"/>
</div>
<!--BY
DEFAULT VOTER NUMBER IS FOR SOS (Secretary of State) BUT CAN BE USED FOR OTHER THINGS, IN
THIS EXAMPLE IT'S A UNIQUE MEMBER
ID-->
<div>
<label for="voternumber">Member #/Unique
ID</label><input maxlength="200" name="voternumber"
type="text" />
</div>
<span style="color:
#141414"><h2>Heading Goes
Here</h2></span>
<span style="color:
#141414"><h4>Select one of the radio
buttons:</h4></span>
<div>
<input class="radio" name="attribute" type="radio"
value="10361" /> Radio
1
</div>
<div>
<input class="radio" name="attribute" type="radio"
value="10362" /> Radio
2
</div>
<div>
<input class="radio" name="attribute" type="radio"
value="10363"
/><span style="color: ; "> Radio
3
</div>
<div>
<span style="color: #141414; "><h4>Check
all that
apply:</h4></span>
</div>
<div>
<input class="radio" name="attribute" type="checkbox"
value="10364" />
Attribute 01
</div>
<div>
<input class="radio" name="attribute" type="checkbox"
value="10365" />
Attribute 02
</div>
<div>
<input class="radio" name="attribute" type="checkbox"
value="10366" />
Attribute 03
</div>
<div>
<input class="radio" name="attribute" type="checkbox"
value="10367" />
Attribute 04
</div>
<div>
<input class="radio" name="attribute" type="checkbox"
value="10368" />
Attribute 05
</div>
<div>
<input class="radio" name="attribute" type="checkbox"
value="10369" />
Attribute 06
</div>
<div>
<input class="radio" name="attribute" type="checkbox"
value="10370" />
Attribute 07
</div>
<div>
<input class="radio" name="attribute" type="checkbox"
value="10371" />
Attribute 08
</div>
<div>
<input class="radio" name="attribute" type="checkbox"
value="10372" />
Attribute 09
</div>
<div>
<input class="radio" name="attribute" type="checkbox"
value="10373" />
Attribute 10
</div>
<!--REDIRECT
START-->
<input name="rd" type="hidden" value="http://www.trailblz.info/demononprofit_joel/documents/thank-you-v2.html"
/>
<!--REDIRECT
END-->
<!--SUBMIT
BUTTON START-->
<input style="margin-top:25px; margin-left: 25px; margin-bottom:
25px; height: 55px; width: 200px; background-color: #ccc; color: black;
font-size: 24px; font-family: arial;" type="submit" value="Submit Form"
/>
<!--SUBMIT
BUTTON END-->
</form>
<!--JAVASCRIPT
VALIDATION START-->
<script
type="text/javascript">
function
validateform()
{
if (document.formName1.firstname.value == "")
{
alert ("First name needs to be filled out");
return false;
}
if (document.formName1.lastname.value == "")
{
alert ("Last name needs to be filled out");
return false;
}
if (document.formName1.email.value == "")
{
alert ("Email needs to be filled out");
return false;
}
if (document.formName1.zipcode.value == "")
{
alert ("Zip Code needs to be filled out");
return false;
}
}
</script>
<!--JAVASCRIPT
VALIDATION END-->
</body>
</html>
<!--EXAMPLE
END-->
If you decide you would
like to hire us or another firm to design the page, the materials needed
from you would be images, color scheme, fields/attributes/radio buttons
you’d like to display.
Hiring a web
design/development firm is a good option many of our customers go
with. Additional
Services
Article:
Microsoft Expressions Web 4
– HTML Editor
Article:
Linking your Website to
your Database with Configurable iFrame
Forms
Article:
Email Notification of Web
Occurrences
Video:
iFrames
Video:
Donation Auto Responder
with Merge Fields
Live
Demo: Live Demo
#1
Live
Demo: Live Demo
#2
Live
Demo: Live Demo
#3
Trail Blazer Live
Support
Phone:
1-866-909-8700
Email:
support@trailblz.com
Facebook:
https://www.facebook.com/pages/Trail-Blazer-Software/64872951180
Twitter:
https://twitter.com/trailblazersoft
*
As a policy
we require that you have taken our intro training class before calling
or emailing our live support
team.
Click
here to view our
calendar for upcoming classes and events feel free to sign up other
members on your team for the same
training.
*
After
registering you’ll receive a confirmation email with the instructions
for how to log into the GoToMeeting
session where
we host our live interactive
trainings.
*
This service
is included in your
contract.
