Trail Blazerhas greatiFramesto 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 hereto 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 myauto-responderemail I have configured in my demo campaign database.

You can certainly spice this up a bit to make it blend into your website as well as make it moremobile responsive. Contracting with afreelanceris a very effective way to manage this task, and is the route many of our customers choose to go. This knowledge base articlehas 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>

*As a policy we require that you have taken our intro training class before calling or emailing our live support team. Click hereto 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 theGoToMeetingsession where we host our live interactive trainings.