Adding a Form To Your Website

Once you have created a form, you add it to your site by copying its generated HTML into one of your own pages. The form lives on your website; when a visitor submits it, the data is posted back to your Interspire Email Marketer installation.

Copying the Form Code

• In Interspire Email Marketer, go to the Add the form to your website screen. This screen displays after the Designing an error page screen. Either create a new form, or edit an existing form and click Next until you reach this page.
• Select the code in the Website form HTML code section and copy it.
• In your editor, paste the code into the page where you want the form to appear.

Note: Bear in mind the warning included at the top of the HTML: “Do not modify the NAME value of any of the INPUT fields, the FORM action, or any of the hidden fields (e.g. input type=hidden). These are all required for this form to function correctly.”

Caution

Copy the whole snippet, including any <script> block that follows the </form> tag. On a form with CSRF protection enabled that script is what keeps the form submittable — see Hosting the Form on Your Own Domain. Pasting only the visible markup produces a form that looks right and rejects every submission.

When you edit the form, remember that its styles are defined in the form code and are not inherited from your page or CSS. To change the appearance of text, modify the form code — bearing in mind the warning above about names, the form action, and hidden fields.

Hosting the Form on Your Own Domain v8.7.0

A form served from your website but posting to your Interspire installation is a cross-origin request, and browsers treat those cautiously. If you enabled Use CSRF Token Protection when configuring the form, you must also tell Interspire which sites are allowed to submit it.

Set the Allowed Origins

In the form’s configuration, fill in Allowed Origins (comma-separated) with every origin the form will be served from, for example:

https://www.example.com, https://shop.example.com

An origin is the scheme plus the host (plus the port, if it is non-standard) — not a path. https://www.example.com/signup is wrong; https://www.example.com is right. http:// and https:// are different origins, as are example.com and www.example.com, so list each one you actually use.

See Forms Configuration for where this field sits among the other form settings.

How the Token Works

You do not have to do anything beyond setting the allowed origins, but it helps to know what the snippet is doing when you are debugging:

1. The pasted form contains an empty csrf_token hidden field.
2. The accompanying script requests a fresh token from your Interspire installation as soon as the page loads.
3. Interspire checks the requesting origin against your Allowed Origins list and issues a token only if it matches.
4. Tokens are valid for 10 minutes. The script refreshes automatically before expiry, retrying a few times if the network hiccups, and briefly disables the submit button while it does so — a visitor may see the button read “Refreshing…”.

This means a form left open on a long-lived page still submits successfully, rather than failing the moment its original token ages out.

Note

If submissions fail with a token or security error, the origin is almost always the cause. Check that the exact origin serving the page — scheme, host and port — appears in Allowed Origins, and that you copied the script block along with the form markup.

Honeypot and CAPTCHA

If you enabled honeypot protection, the snippet includes a hidden decoy field that is invisible to visitors and irresistible to bots. Leave it alone: do not restyle it, rename it, or remove the wrapper that hides it, or you will show it to real visitors and reject their submissions when they fill it in.

Cloudflare Turnstile and PHP CAPTCHA fields are likewise rendered as part of the snippet. See Forms Configuration for enabling them.

Testing the Form

Upload the page and test it against your live site, not from a local file — origin checks cannot pass from a file:// page.

• Sign up with an email address you control and confirm the correct confirmation or thank-you screen displays. If you chose double opt-in, check that the link in the email you receive works.
• Submit with a required field left empty and confirm a warning displays. Repeat for each required field.
• Force an error — an incorrect CAPTCHA code, for example — to confirm your error page displays correctly.
• If CSRF protection is on, submit from each origin you listed, so you catch a missing www. or a wrong scheme before your visitors do.

When you are happy with the form’s appearance and operation, publish the page.

Related Pages

• Creating and Editing Forms — building the form itself
• Forms Configuration — CAPTCHA, honeypot, CSRF and allowed origins
• Viewing and Managing Forms — finding a form’s HTML again later