Trail Blazer Knowledge Base

 

Home : Web Tools : Sample Get JavaScript Form to Get you Started – Trail Blazer API

Knowledge Base







User:

Password:



Article ID: KB210
Keyword Name: JavaScript, API, CSS, HTML, Get, Post, Form, Style, Mobile Responsive, custom, field, fields
Created: April 18, 2017
Viewed: 12949

Sample Get JavaScript Form to Get you Started – Trail Blazer API


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.




http://www.us-cert.gov/sites/default/files/images/tip-icon.pngTip: 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


http://sisyphus-js.herokuapp.com/assets/email_icon-0f32f4da45c2822cbb02fb36f9b9429e.png   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.


 

Are you ready to learn more? Contact Us