Follow

Checkboxes Web Form

Checkboxes Web Form

1.  Select the Embed Code - Web Form HTML (styled) or Web Form HTML (unstyled)

  • If you want to customize an Instant Customer web form's code, you'll need to use the Web Form HTML (styled) or Web Form HTML (unstyled).  At the time of article publication, the type available correlates with the Instant Builder you are using.
  • The web form is just HTML, so any valid HTML can be used to modify it.
  • For a good tutorial on HTML forms, how to create and modify them, please see w3schools: http://www.w3schools.com/html/html_forms.asp

2.  Setup Field/Variable names

The most important thing when customizing form code is to make sure you're passing the right variable names. Instant Customer's variables always have the same format: u_fieldname

Default field names:

First name: u_firstname
Email: u_email
Company: u_company

For a complete list of field names, see a subscriber's edit page.

Custom field names:

  • Note the system will not accept data into custom fields unless the custom fields are first added on the Campaign> Edit> Opt-in Channels> Fields tab.
  • Always have the same variable name, regardless of what they are labeled.
      • u_custom_1
      • u_custom_2
      • u_custom_3
      • …and so on.

  • It is important to add the Custom Fields in the exact order as you want them to appear on the form.

3.  Test sandbox

You can use a realtime HTML editor to test your custom form code. Here's a good one: http://htmledit.squarefree.com/

Here is the code before the addition of checkboxes.


You can test the code in the editor to confirm the creation of a new subscriber.

  • Don't forget to delete your subscriber before testing the next one.
  • Also, you'll have to reload the HTML editor after submitting, because our form code reloads the page by default.

4.  Add Checkbox Code (type = "checkbox")

  • The two fields added are:  
    • Bike = u_custom_1
    • Car = u_custom_2
  • Add the text and the input class ( id, name, type, value) into your embed code.  In this example, the text is added into a table row.
  • Bike Example:  
    • Text =  <b>I have a Bike</b>
    • Input Class = <input class="required" id="u_custom_1" name="u_custom_1" type="checkbox" value="Bike">
  • Car Example:
    • Text = <b>I have a Car</b>
    • Input Class = <input class="required" id="u_custom_2" name="u_custom_2" type="checkbox" value="Car">

 

Here is the code with table rows:

 

<td class="form_left">
<b>I have a Bike</b></td>
<td>
<input class="required" id="u_custom_1" name="u_custom_1" type="checkbox" value="Bike"></td>
</tr>

<tr>
<td class="form_left">
<b>I have a Car</b></td>
<td>
<input class="required" id="u_custom_2" name="u_custom_2" type="checkbox" value="Car"></td>
</tr> 

5.  Test new code viewed inside editor:

 

Here is the complete example form code:

<iframe height=40 width=450 allowTransparency=true scrolling=no marginwidth=0 marginheight=0 frameborder=0 vspace=0 hspace=0 name="form_submit1"></iframe><form name="my_form" method="post" action="http://www.instantcustomer.com/s/index.php" method="post" name="my_form" onsubmit="document.location.href='#iframe_msg'" target="form_submit1">
<table border="0">
<tbody>

<tr>
<td class="form_left">
<b>First name</b><span class="bold_red">*</span></td>
<td>
<input class="required" id="f_u_firstname" name="u_firstname" type="text" value=""></td>
</tr>
<tr>
<td class="form_left">
<b>Last name</b></td>
<td>
<input class="optional" id="f_u_lastname" name="u_lastname" type="text" value=""></td>
</tr>
<tr>
<td class="form_left">
<b>Phone</b><span class="bold_red">*</span></td>
<td>
<input class="required" id="phone" name="u_phone" type="text" value=""></td>
</tr>
<tr>
<td class="form_left">
<b>Email</b><span class="bold_red">*</span></td>
<td>
<input class="required" id="f_u_email" name="u_email" type="text" value=""></td>
</tr>

<tr>
<td class="form_left">
<b>I have a Bike</b></td>
<td>
<input class="required" id="u_custom_1" name="u_custom_1" type="checkbox" value="Bike"></td>
</tr>

<tr>
<td class="form_left">
<b>I have a Car</b></td>
<td>
<input class="required" id="u_custom_2" name="u_custom_2" type="checkbox" value="Car"></td>
</tr>

<tr>
<td align="center" class="save" colspan="2">
<input name="req" type="hidden" value="save_seminar_info"><input name="u_series_id" type="hidden" value="113582"><input name="thank_you" type="hidden" value="1"><input name="u_timezone_js_offset" type="hidden" value=""><input onclick="var r = document.getElementsByClassName('required'); var bool = true; for(var i=0; i<r.length; i++) { if(r[i].value == '') bool=false; } if(!bool) {alert('You must fill in all the required fields!');} else if(document.getElementById('sms-check')){ if(!document.getElementById('sms-check').checked){ alert('Please agree to the SMS Terms of Service before continuing.'); bool=false; } } if (document.getElementById('f_u_email')) { if(!validateEmail(document.getElementById('f_u_email').value)){ alert('Please enter a valid email address.'); bool = false; } }return bool;" type="submit" value="Submit"></td>
</tr>
<tr>
<td colspan="2">
Your email address will not be shared or sold.</td>
</tr>
</tbody>
</table>
<script type="text/javascript"> function validateEmail(email) { return /^.+@.+\..{2,}$/.test(email); } </script></form>

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk