Use our signup form builder to generate HTML which can be embedded anywhere on your site, and customized with your own CSS.
NOTE: This type of signup form requires knowledge of HTML and CSS. For forms that don't require any coding skills, try our subscribe button or subscribe page.
ON THIS PAGE:
Generating the signup form code
The code generated by the form builder contains unique IDs that link the signup form to your subscriber list. To access the form builder and generate your custom code:
- Open Manage Subscribers, then select the list you want to collect signups for.
- On the list page, click Signup forms in the right sidebar.
- On the "Signup forms" page, click Copy/paste a form to your site.
- Use the form builder to customize your form fields.
- When you've finished, click Get the code.
- Copy the HTML code and paste it into your website.
The generated HTML contains no CSS. When the code is embedded in your website, it will inherit the site’s style sheet.
Customization with the form builder
Use the form builder to customize which fields are included on the form, and the order they’re displayed in. The way your signup form is styled in the form builder, pictured below, is not how it will look when the code is embedded in your website.
In the form builder, you can:
- Add or remove form fields — Any custom fields your subscriber list has will be listed below the default fields (Name and Email). Select the checkbox next to the fields you want subscribers to fill in. Learn how to set "Required" fields.
- Change the display order — To change the display order of fields on the form, click and drag the handles to move them up or down:
- Opt-in checkboxes for other lists — If you have more than one list, the other list names are displayed so you can include them on the form, allowing people to opt in to multiple lists at the same time.
HANDY TO KNOW:
- When people opt in to additional lists, their email address and name (if the "Name" field is included) are automatically added to those lists.
- If the list has identically named custom fields to those you’ve included on the form, the subscriber data submitted will be recorded for both lists. Field names are not case sensitive. For example, Purchase Date will match purchase date but not PurchaseDate or purchase-date.
HTML customization
Below are some tips on customizing the HTML code for your form.
IMPORTANT: The only things you can’t change are the form action URL, and the unique identifiers for custom fields, such as: name="cm-f-jrddt" and label for="fielduytlp"
Set form fields to required
Only the "Email" field is set to required in the code that is generated for you, meaning it must be filled out before submitting the form.
To set other fields as required, add the word “required” inside the input element, as shown here:
<p> <label for="fieldiddtyh">Country</label><br /> <input id="fieldiddtyh" name="cm-f-iddtyh" type="text" required /> </p>
Secure forms
To create a secure, encrypted form, change the URL after form action= to https:// instead of http://, as shown here:
<form action="https://oneclickpolitics.createsend.com/t/i/s/tikpjy/" method="post" id="subForm">
Add CAPTCHA
To prevent spambots from poisoning your list you can force the form to show the subscriber a page where they are required to type in a string of numbers and characters before their address will be added to your list. This verification step is called CAPTCHA. Most bots can’t complete this step so this is a great method of protecting your list.
To force the CAPTCHA step, change the "Email" field's name attribute within the input element from name=“cm-[unique identifier]” to name=“email”. See that highlighted below:
<p>
<label for="fieldEmail">Email</label><br />
<input id="fieldEmail" name="cm-zilbr-zilbr" type="email" required />
</p>
Now, when humans and bots submit the form, they will see a page like this:
0 Comments