NewZapp Online Signup Code

As part of your NewZapp package we supply you with the HTML code required to create an online signup form. The code on this page can be cut and pasted directly into any HTML page on your website.

 

With a little modification you can add a similar signup form to your Facebook page.

 

The areas highlighted in red (as shown below and in the code) need to be amended to reflect your preferences.

  • CID should be replaced by your account’s customer ID number

    e.g value=”112233

    This will be supplied by your account manager, and may also be found by clicking the ‘About’ link in your NewZapp account, top right of any screen.

  • GROUPS should be replaced by the text name/s of the subscriber group/s you wish to add the email address to separated by commas

    e.g. value= “Shoes Mailing List,Jackets Mailing List,Hats Mailing List

    The group/s should be set up in your NewZapp account under the ‘Subscribers' tab using the exact same names

  • REDIRECTURLshould be replaced by the address of the web page the web browser will go to after the form is submitted and the email address is added to your newsletter distribution list

    e.g. value=”http://www.newzapp.co.uk

    You may wish to insert your website home page address or create your own 'thank you' page specifically for this purpose.

 

Your web design team may modify the code layout to match your current branding as desired, but note that the names of the input fields listed in the code match the ‘Contact Details’ fields in your NewZapp account.

 

You must therefore ensure that the form retains the same name, id, method and action attributes, as well as all the 'hidden' input fields and the email address input field.

 

To add your own custom fields please follow our instructions at the bottom of this page.

 

Step 1: For basic email address validation, add this Javascript in the <head> section of your page

 

<script type="text/javascript">
//<![CDATA[
function validate_newzapp_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false;}
else {return true;}
}
}
function validate_newzapp_signupform(thisform)
{
with (thisform)
{
if (validate_newzapp_email(Address,"please enter a valid email address")==false)
{Address.focus();return false;}
}
}
//]]>
</script>

 

Step 2: add this CSS style to the <head> section of your page as well
(this is optional and you can alter/add individual styles if you wish)

 

<style type="text/css">
#newzapp_signupform {
border:1px solid #CCCCCC;
color:#666666;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.newzapp_signupform_field {
background-color:#f7f7f7;
border:1px solid #CCCCCC;
color:#666666;
padding:3px;
width:200px;
}
a.newzapp_signupform
{
color:#629C32;
outline: none;
text-decoration:underline;
}
.newzapp_signupform_poweredby {
font-size:9px;
}
</style>

 

Step 3: add this HTML form to wherever you would like the signup form to appear on your page & replace the values for the hidden <input> tags - CID, GROUP and REDIRECTURL (highlighted in red).

 

DO NOT change the form's name= or id= values.

 

<form name="form_subscribe" id="form_subscribe" action="http://s5.newzapp.co.uk/t/ThankyouSubscribe.aspx" onsubmit="return validate_newzapp_signupform(this);" method="post">
<table width="220" border="0" cellspacing="3" cellpadding="5" id="newzapp_signupform">
<tr>
<td><strong>signup to our mailing list</strong></td>
</tr>
<tr>
<td><input name="FirstName" id="FirstName" type="text" value="first name" class="newzapp_signupform_field" onFocus="this.value=''" /></td>
</tr>
<tr>
<td><input name="LastName" id="LastName" type="text" value="last name" class="newzapp_signupform_field" onFocus="this.value=''" /></td>
</tr>
<tr>
<td><input name="CompanyName" id="CompanyName" type="text" value="company name" class="newzapp_signupform_field" onFocus="this.value=''" /></td>
</tr>
<tr>
<td><input name="Address" id="Address" type="text" value="*email address" class="newzapp_signupform_field" onFocus="this.value=''" /></td>
</tr>
<tr>
<td><input type="submit" name="Submit" id="Submit" value="signup"/>
<input type="hidden" name="CID" id="CID" value="CID" />
<input type="hidden" name="Group" id="Group" value="GROUPS" />
<input type="hidden" name="RedirectURL" id="RedirectURL" value="REDIRECTURL" />
</td>
</tr>
<tr>
<td class="newzapp_signupform_poweredby">Powered by <a href="http://www.newzapp.co.uk" rel="nofollow" target="_blank" class="newzapp_signupform">NewZapp Email Marketing</a> Software.</td>
</tr>
</table>
</form>

Adding Custom fields to your form


Custom fields are a means to store additional specific subscriber data in a NewZapp account. You can include the following type of custom field in your signup form:


String, Number, Date/Time. (The Yes/No type of custom field is currently not usable in a signup form)


The custom field names should be set up in your NewZapp account under the ‘Preferences' tab.


How to implement custom fields in your form:

  1. Add input elements inside the <form> tags following the structure of the rest of the form

    For example:
    <tr>
    
    <td><input name="mainBrandColour" id="mainBrandColour" type="text" value="main brand colour" class="newzapp_signupform_field" onFocus="this.value=''" /></td>
    </tr>
  2. Ensure the 'id' attribute is identical to the 'Field Name' you set in your NewZapp account
  3. You may wish to use the 'value' attribute as guidance for users filling in the form
    • For example: "dd/mm/yyyy"
  4. You may find additional validation is useful for these fields.

Please read our blog post for more information on creating custom fields in your NewZapp account.