Enginemailer allows you to embed forms directly into any page of your website. This article walks you through how to embed a form and customise its appearance.
Before you begin:
- Make sure you’ve created a form first. If not, head to the Form Builder to get started.
- Your site should be SSL-secured (i.e. using HTTPS). Without SSL, the form may not function correctly.
Embedding a Single Form
To embed a single form to your website:
- After creating your form in the Form Builder, navigate to the Publish step.
- Select "I will embed the form into my website".
- You'll see two sets of code.
- Paste the code into your website's HTML:
- Paste the <script> code inside the <head> section of your HTML.
- Paste the <div> code inside the <body> section where you want the form to appear.
Embedding Multiple Forms
If you're planning to display more than one form on a single page, follow these steps to ensure they work correctly:
- For each form, build it in the Form Builder and navigate to the Publish step.
- Select "I will embed the form into my website".
-
You’ll be provided with two sets of code.
-
Paste the codes into your website’s HTML as follows:
-
Paste the <script> code into the <head> section of your HTML – only once, no matter how many forms you’re embedding.
⚠️ Do not paste the script multiple times – this will cause duplication or form errors. -
Paste each form’s unique <div> code inside the <body> section where you want that specific form to appear.
Example:
-
Paste the <script> code into the <head> section of your HTML – only once, no matter how many forms you’re embedding.
Form Display & Responsiveness
The embedded form does not have fixed height or width values, so it will automatically adapt to different screen sizes (i.e. it's responsive by default).
If you'd like more control over how it appears, you can apply custom styling using CSS in your website's code or content management system (CMS).