HTML forms

If you are comfortable with HTML and CSS and prefer to customize the form yourself, the HTML form may be suitable for you.

These forms are generated differently than hosted or iframe forms. The main difference is that the html form is not saved in your account and will not appear in your list of forms.

After you create it, you will get the full HTML code to paste in the existing code of your website. You can edit it or use it as is. You can always go back and make changes to it later.

Add fields

To generate your form, first select the language. Then choose the fields you need and adjust their labels.

Choose the target groups

Select the target group(s) you want the subscribers to be added to. Be careful not to delete these groups afterwards!

 

Tip: if you want to send emails in French and English, create a group and a form for each language.

Personalize the confirmation pages

When a person completes your form, they are redirected to a confirmation page. If you don’t want to use the default pages you can create your own.

Here are the pages available:

  • Opt-in request sent successfully: this is the page subscribers will see immediately after submitting the form. This page informs them that they need to check their emails, in order to complete the subscription.
  • Opt-in confirmed: the user will access this page after clicking on the validation link in their email.
  • Error in the form: this page will be displayed if a processing error occurs.

To use custom pages, first create the pages on your website. Get inspired with the help of our default pages. From the form generating tool, copy and paste the urls in the designated areas.

Make sure to use full urls! They should work when you enter them in your browser's address bar.

How to generate code and use it

Click on the Generate button to obtain the code for your HTML form. This code must be inserted in a web page, between the <body> and </body> tags.

If your page already contains a <form> tag, be careful not to insert your new form code within it. A page can contain several forms, but not within each other.

Advanced Editor

Modify a field type

If you want to use something other than text fields, you can modify the html, being careful to keep the ID and name attributes of the fields. For example, to display custom field # 1 as a drop-down list:

Default code:

<div>
  <label for="ci_custom_field_1">Champ Personnalisé 1 : </label>
  <input type="text" id="ci_custom_field_1" name="ci_custom_field_1" maxlength="255" />
</div>

Personalized code:
<div>
  <label for="ci_custom_field_1">Champ Personnalisé 1 : </label>
  <select id="ci_custom_field_1" name="ci_custom_field_1">
  <option value="Valeur 1">Valeur 1</option>
  <option value="Valeur 2">Valeur 2</option>
  </select>
</div>

Add css or javascript code

The code we provide for html forms does not include any css style or javascript code. You can add them as you wish, but make sure to keep the ID and name attributes of the fields, which are essential for proper functioning. Also, be careful to keep the configuration fields invisible, see below:

<div style="display:block; visibility:hidden; height:1px;">
  <input type="hidden" id="ci_groups" name="ci_groups" value="1" />
  <input type="hidden" id="ci_account" name="ci_account" value="XXXXXXX" />
  <input type="hidden" id="ci_language" name="ci_language" value="fr_ca" />
  <input type="hidden" id="ci_sent_url" name="ci_sent_url" value="" />
  <input type="hidden" id="ci_error_url" name="ci_error_url" value="" />
  <input type="hidden" id="ci_confirm_url" name="ci_confirm_url" value="" />
</div> 

 

 

Top