Click Here to view/save this article as a PDF.
Author: Kristenson, Joel
Last Updated: 2018-05-11
Overview
Trail Blazer has great iFrames to use with your website, but they are limited when it comes to styling & layout. This article provides some example code that you can use as a starting point for creating a custom email signup form for your organization.
Emails will automatically be enabled to your mass email list when people sign up this way. A couple things to note are that that there’s not a double opt-in feature, and at the time this article was written new records won’t auto-merge with pre-existing records in your database. (Click here to learn about managing duplicates).
*Feel free to fill out the forms below in any of my examples for the full experience. It will redirect you to a thank-you page (something you configure with your images and text). It will also send you my auto-responder email I have configured in my demo campaign database.
Example #1 – Simple Email Signup Form - 600px Wide with Green background
Live Demo #1
Screenshot:
Copy and paste the html/css/js code below into your text editor. You’ll need to replace the code in red with your own images, hyperlinks, Database Name, text etc.
You can certainly spice this up a bit to make it blend into your website as well as make it more mobile responsive. Contracting with a freelancer is a very effective way to manage this task, and is the route many of our customers choose to go. This knowledge base article has Trail Blazer’s full list of available input text fields, check boxes, and radio buttons that you can utilize JavaScript ‘Get’ custom forms.
--- EXAMPLE #1 - SAMPLE CODE START ---
<!DOCTYPE html>
<html>
<head>
<title>Email Signup - Green</title>
<style type="text/css">
/* BODY BACKGROUND COLOR OR IMAGE START */
body {
background-color: #006B00;
padding: 0px;
margin: 0px;
}
/* BODY BACKGROUND COLOR OR IMAGE END */
.container {
border: 1px solid #000000;
max-width: 600px;
width: 100%;
margin-left: 0;
margin-right: 0;
}
.content {
background-color: #ffffff;
padding: 15px;
font-family: sans-serif, Verdana, Tahoma, Georgia;
font-size: 16px;
line-height: 150%;
font-weight: bold;
color: #333333;
}
/* MAIN TOP BANNER START*/
.headerBar {
background: #29A629;
padding: 20px;
border-bottom: 0px solid #000000;
height: 20px;
font-size: 16px;
color: #FAFAFA;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
/* MAIN TOP BANNER END*/
.poweredBy {
text-align: center;
}
table.mergeTable {
width: 100%;
}
.required {
text-align: right;
font-size: 11px;
font-weight: bold;
}
.formText {
vertical-align: top;
min-width: 75px;
max-width: 150px;
}
.asterisk {
visibility: visible !important;
color: red;
}
.errorText {
color: red;
}
select, input {
width: 200px;
}
.mergeRow td {
padding: 12px;
border-top: 1px solid #ccc;
}
/*INPUT CSS STYLING START*/
input, textarea, select {
padding: 4px;
font-size: 14px;
}
input:focus, textarea:focus, select:focus {
background: #FCFEFD;
}
input {
-webkit-appearance: none;
}
/*INPUT CSS STYLING END*/
.button {
display: inline-block;
font-family: sans-serif, Verdana, Tahoma, Georgia;
width: auto;
font-weight: bold;
height: 50px;
margin-left: auto;
margin-top: 10px;
margin-right: auto;
padding: 0 22px;
text-align: center;
font-size: 16px;
line-height: 32px;
cursor: pointer;
border: 0;
background-color: #E5E4D7;
color: black;
border: 2px outset white;
}
.button:hover {
background-color: #DDDCD7;
color: black;
}
</style>
</head>
<body>
<table width="100%" height="100%" cellpadding="20" cellspacing="0">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" class="container">
<tr>
<td align="center" valign="top">
<div class="headerBar">YOUR ORGANIZATION NAME GOES HERE</div>
</td>
</tr>
<tr>
<td valign="top" align="left" class="content formText">
<div>
<p><span style="font-size: medium; color: #333333; font-weight: bold;">Join our E-mail list and be the first to learn about the happenings in our organization!</span></p>
</div>
<p class="tiny required">(<span class="asterisk">*</span> indicates required)</p>
<!--INPUT EMAIL SIGNUP FORM START-->
<form action="http://www.trailblz.info/demononprofit_joel/signup_post.aspx" method="Get" name="formName1" onsubmit="return validateform()">
<table cellpadding="7" cellspacing="0" width="100%" align="center" class="mergeTable">
<tbody id="mergeTable">
<tr>
<td class="formText" align="right">
<label>Email Address <span class="req asterisk">*</span></label>
</td>
<td>
<input type="email" name="email" type="text" size="10" placeholder="Example: email@email.com">
</td>
</tr>
<tr>
<td class="formText" align="right">
<label>First Name <span class="req asterisk">*</span></label>
</td>
<td>
<input type="text" name="firstname" size="25">
</td>
</tr>
<tr>
<td class="formText" align="right">
<label>Last Name <span class="req asterisk">*</span></label>
</td>
<td>
<input type="text" name="lastname" id="MERGE2" size="25" value="">
</td>
</tr>
<tr>
<td class="formText" align="right">
<label>Zip Code <span class="req asterisk">*</span></label>
</td>
<td>
<input type="text" name="zipcode" placeholder="Example: 55427-4350" size="25" value="">
</td>
</tr>
</tbody>
<tbody>
<tr>
<td> </td>
<td>
<input name="rd" type="hidden" value="http://www.trailblz.info/demononprofit_joel/documents/thank-you-v2.html" />
<input type="submit" class="button" value="Subscribe to list">
</td>
</tr>
</tbody>
</table>
</form>
<!--INPUT EMAIL SIGNUP FORM START END-->
<br>
<br>
<!--FOOTER SECTION POWERED BY TRAIL BLAZER START-->
<table width="100%" cellpadding="10" cellspacing="0" style="border-top: 1px solid #CCCCCC; ">
<tr>
<td align="middle" style="margin-left: auto; margin-right: auto; ">
<a href="http://www.trailblz.com"><img src="http://trailblz.info/demononprofit_joel/images/2014-09-16-trail-blazer-logo-organize-leverage-succeed.png" border="0" alt="Powered by Trail Blazer" title="Trail Blazer Campaign Services"></a>
</td>
</tr>
</table>
<!--FOOTER SECTION POWERED BY TRAIL BLAZER END-->
</td>
</tr>
</table>
<!--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 #1 - SAMPLE CODE END ---
Example #2 – Mobile Responsive Simple Email Signup
Live Demo #2
Screenshot:
Code in red will need to be replaced with your images, database name, hyperlinks etc.
--- EXAMPLE #2 - SAMPLE CODE START - MOBILE RESPONSIVE ---
<!DOCTYPE html>
<html>
<head>
<title>Email Signup - Green v3</title>
<style type="text/css">
/* BODY BACKGROUND COLOR OR IMAGE START */
body {
background-color: #006B00;
padding: 0px;
margin: 0px;
}
/* BODY BACKGROUND COLOR OR IMAGE END */
.container {
border: 1px solid #000000;
max-width: 420px;
width: 100%;
}
.content {
background-color: #ffffff;
padding: 10px;
font-family: sans-serif, Verdana, Tahoma, Georgia;
font-size: 16px;
line-height: 150%;
font-weight: bold;
color: #333333;
}
/* MAIN TOP BANNER START*/
.headerBar {
background: #29A629;
padding: 20px;
border-bottom: 0px solid #000000;
height: 20px;
font-size: 16px;
color: #FAFAFA;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
/* MAIN TOP BANNER END*/
.poweredBy {
text-align: center;
}
.required {
text-align: right;
font-size: 11px;
font-weight: bold;
}
.formText {
min-width: 75px;
max-width: 150px;
}
.asterisk {
visibility: visible !important;
color: red;
}
.errorText {
color: red;
}
select, input {
max-width: 200px;
width: 100%;
}
.mergeRow td {
padding: 12px;
border-top: 1px solid #ccc;
}
/*INPUT CSS STYLING START*/
input, textarea, select {
padding: 4px;
font-size: 14px;
}
input:focus, textarea:focus, select:focus {
background: #FCFEFD;
}
input {
-webkit-appearance: none;
}
/*INPUT CSS STYLING END*/
.button {
font-family: sans-serif;
width: 150px;
font-weight: bold;
height: 50px;
font-size: 16px;
cursor: pointer;
background-color: #E5E4D7;
color: black;
border: 2px outset white;
float: right;
margin-right: 25px;
margin-top: 10px;
}
label {
margin-left: 25px;
margin-right: 10px;
}
.button:hover {
background-color: #DDDCD7;
color: black;
}
</style>
</head>
<body>
<table width="100%" height="100%" cellpadding="20" cellspacing="0">
<td align="center">
<table cellpadding="0" cellspacing="0" class="container">
<tr>
<td align="center" valign="top">
<div class="headerBar"></div>
</td>
</tr>
<tr>
<td valign="top" align="left" class="content formText">
<div>
<p><span style="font-size: medium; color: #333333; font-weight: bold;">Join our E-mail list and be the first to learn about the happenings in our organization!</span></p>
</div>
<p class="tiny required">(<span class="asterisk">*</span> indicates required)</p>
<!--INPUT EMAIL SIGNUP FORM START-->
<form action="http://www.trailblz.info/demononprofit_joel/signup_post.aspx" method="Get" name="formName1" onsubmit="return validateform()">
<table cellpadding="7" cellspacing="0" width="100%" align="center" class="mergeTable">
<tbody id="mergeTable">
<tr>
<td class="formText" align="right">
<label>Email Address <span class="req asterisk">*</span></label>
<input type="email" name="email" type="text" size="10" placeholder="Example: email@email.com">
</td>
</tr>
<tr>
<td class="formText" align="right">
<label>First Name <span class="req asterisk">*</span></label>
<input type="text" name="firstname" size="25">
</td>
</tr>
<tr>
<td class="formText" align="right">
<label>Last Name <span class="req asterisk">*</span></label>
<input type="text" name="lastname" size="25" value="">
</td>
</tr>
<tr>
<td class="formText" align="right">
<label>Zip Code <span class="req asterisk">*</span></label>
<input type="text" name="zipcode" placeholder="Example: 55427-4350" size="25" value="">
</td>
</tr>
<tr>
<td>
<input name="rd" type="hidden" value="http://www.trailblz.info/demononprofit_joel/documents/thank-you-v2.html" />
<input type="submit" class="button" value="Subscribe to list">
</td>
</tr>
</tbody>
</table>
</form>
<!--INPUT EMAIL SIGNUP FORM START END-->
<br>
<br>
<!--FOOTER SECTION POWERED BY TRAIL BLAZER START-->
<table width="100%" cellpadding="10" cellspacing="0" style="border-top: 1px solid #CCCCCC; ">
<tr>
<td align="middle" style="margin-left: auto; margin-right: auto; ">
<a href="http://www.trailblz.com"><img src="http://trailblz.info/demononprofit_joel/images/2014-09-16-trail-blazer-logo-organize-leverage-succeed.png" border="0" alt="Powered by Trail Blazer" title="Trail Blazer Email Marketing"></a>
</td>
</tr>
</table>
<!--FOOTER SECTION POWERED BY TRAIL BLAZER END-->
</td>
</table>
<!--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 #2 - SAMPLE CODE END - MOBILE RESPONSIVE ---
Related Resources
Article: Linking your Website to your Database with Configurable iFrame Forms
Article: Build your Own Custom Signup Form (Get)
Video: iFrames
Live Demo #1: Simple Email Signup with Green Background and Zip Code Field
Live Demo #2: Get Post Form (All Available Fields)
3rd Party Resource: Microsoft Expressions Web 4 - free
3rd Party Resource: w3 Schools JavaScript Class - free
3rd Party Resource: HTML Tidy
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.
