Grow your list: create a sign-up form

How to Create and Manage Signup Forms

A subscription or sign-up form is the best way to collect new customers and grow your permission-based list. Placing a form on your website in the right place will drive visitors’ attention and encourage them to make a quick and safe subscription to your newsletter.

We have streamlined the creation process for you to make it as easy as possible. In a few, short steps you can create a popup, flyout, or inline form that you can embed on your website. You can also create an independent landing page, which we host, to capture a targeted audience. Each form is connected to a list in your account and will work automatically.

To measure the performance of your sign-up forms, check the form report section on your eMailChef account, and visit our tutorial: “Track the performance of your sign-up forms.”

This tutorial will explain how to create a sign-up form to make sure you’re getting the most out of your visitors.

eMailchef’s Three Sign-Up Forms

eMailchef helps you to create three types of forms:

Popup

This form pops up in the middle of the screen.

Inline

This form is embedded on your site. You’ll need to put a small snippet of the code onto your site where you want the form to appear. You can find this snippet on the last step of the form creation process.

Hosted Landing page form

This form is an independent landing page, hosted by eMailChef, which you can use for specific lead generation outside your website.

In addition to forms that are “ready to use,” you can also find the “raw” HTML form code version and personalize it entirely with your own CSS code.

Start Here

To install any of eMailchef’s sign-up forms on your site, you must first install the “Website script.“ You will only need to do this once. The script will be valid for all of your forms. If you’ve already installed the script, you can skip this chapter.

How to install the Website script on your website

Step 1: Install the Website Script on your website

Go to the “Integrations” section under “Settings” (SETTINGS > INTEGRATIONS), and copy the “Website script”.

Paste the script into the main theme file of your site. Important: You must paste the Website Script before the tag so that the code appears on every page. This will allow you to trigger forms on any page on your site. The exact file and location of the code varies by website.

You can control the specific pages on which your POPUP or FLYOUT form appears using the Behaviors tab within the form editor.

Step 2: Verify Your Installation

To verify that you have installed the Website script correctly on your website, go to the “Integrations” section under “Settings” (SETTINGS > INTEGRATIONS). Under “Website script”, enter the URL of the page on which you inserted the code, then click “CHECK”.

A green mark confirms that the signup forms are successfully installed on your website.

A red callout indicates that we are unable to verify your installation. Check the installation following the instructions in this guide. If your site isn’t live or is password-protected, we won’t be able to verify your installation.

After verifying your installation, you can create a new form and publish it on your site.

Create a Form for Your Website

A. Popup Form

This form pops up in the middle of the screen.

Once you have successfully installed the website script on your website go to the “LISTS” section. Select the list you want to associate with the form, and click “Sign-up forms”.

Now click “CREATE A SIGN-UP FORM”.

Step 1 – Main settings

Set the main settings of your form as follows:

Form Name: You must give your form a name. This name will be visible only to you.
Description: You can also add notes about the form. Again, the description is only for your benefit and will be visible only to you.
Default language: Select the form’s language. By default, the language is the same as your account but you can change it to match the language of your website without changing your account language.
Shape appearance: Select Popup

NOTE: Remember that a popup throws a form into the middle of a screen when a visitor reaches a specific page on your website.

To define when the form is displayed, select the “Display condition”. You have seven options:

Immediately: The form will pop up as soon as a visitor opens the page.
After 5 seconds: The form will pop up 5 seconds after a visitor opens the page.
After 20 seconds: The form will pop up 20 seconds after a visitor opens the page.
Scroll to middle of page: The form will pop up when a visitor scrolls to the middle of the page.
Scroll to end of page: The form will pop up when a visitor reaches the bottom of the page.
When visitor exits the page: The form will pop up when a visitor leaves or closes the page.
On button click only: The form will pop up only when a visitor clicks a specific button on the page. You will need to add a small snippet of code to one or more of the buttons on the page.

Once you’ve chosen the display condition, you will have to choose the “Display frequency”. This defines how often your visitors see the popup form after their first visit. Set 7 days, for example, and your visitors will see the form no more than once a week.

Tick the box “Hide after form submission” to hide the form after the visitor has submitted it. If this box is left unchecked, the popup will continue to display even to visitors who have already subscribed.

Step 2 – Design Form

Choose a form template from our vast choice of ready-to-use layouts. You’ll be able to customize the form freely.

To edit the form, click the “Edit form” button or the form preview to bring up the form editor. You will now be able to personalize the form. To exit the form editor and return to the main page, click the “CLOSE” button on the top right.

Form editor

The form editor uses a drag-and-drop system to enable the easy addition, removal, or editing of each element. In the following example, we drag and release a Text box…

…then edit it by changing its text, alignment, font style, and font size.

The same changes can be made with all the elements on the left. The customisation tools change with each element type.

You can also change the style of your form with the tools on the right.

Use the arrow icons to change the order of the fields. Click, then drag-and-drop the field down the page.

Any custom fields you have created will be available among the default elements. For instance, if you have created a data field for users’ date of birth, you will be able drag that field into the subscription form. All data is synchronized automatically.

eMailChef also lets you create a translated version of your form for multilingual websites. Simply click “Add translation” to produce a translated copy.

Popup Form BEHAVIOR

The Behaviors tab lets you define the behavior of your popup form. The settings apply to both the Subscribe Form and the Success Message that users see after subscribing.

To select the URLs on which the form appears, toggle between “Containing” and “Is exactly” parameters.

“Containing” requires the URL to contain any part of the value you input. For example, if you input “Containing emailchef.com“, the popup form will appear on emailchef.com/knowledge-base/, emailchef.com/features/, etc.

“Is exactly” allows you to target one specific URL. For example, “https://emailchef.com/knowledge-base/grow-list-create-signup-form/”” will show the popup only on that URL.

Once you have finished creating your form and returned to this page, click “Next”.

Step 3 – Subscription Preferences

Choose your preferred opt-in method. (Single opt-in is only available in the Executive Chef plan.) Set confirmation emails, message alerts, welcome messages, and everything your subscribers need to see or receive after subscribing to your newsletter.

Begin by choosing whether to create an opt-in or double opt-in registration form:

Double Opt-in

To implement a double opt-in process, you first need to specify a subscription confirmation email. eMailChef will send an email to the subscriber immediately after opting in. The email will contain a link (identified by the tag [[confirm_link]]) that the subscriber must click to confirm their registration and the validity of their address. eMailChef provides a default text to guide you. You can also upload your logo which the system will automatically edit to fit the email.

To send your subscribers a correctly formatted subscription confirmation email, eMailChef uses an internal and customizable tag system.

{{h1#Subscription confirmation}} for the Title which appears in the body of the email.

{{button#[[confirm_link]]#Yes, I want to subscribe}} for the confirmation button.

{{a#[[unsubscribe_link]]#Click here to unsubscribe}} to add an unsubscribe link.

You can customize the italicized words after the hashtag#.

eMailChef also creates placeholders, which may be fixed and pre-generated such as [[email]], [[first_name]], and [[last_name]]. Other placeholders are generated from the custom fields that you create, such as date of birth or country.

The next step is to create a message alert that will appear on your website. The alert shows that the subscription confirmation email has been sent correctly. Instead of a custom message, you can also use a personalized landing page by selecting the “External URL” and entering the page’s URL.

Finally, a welcome message will appear once your subscriber clicks the link in the subscription confirmation email, finalizing the double opt-in process. Choosing the Custom message will open a landing page containing the text. Or you can use your own personalized landing page by selecting the “External URL” and entering the page’s URL.

You can also send a thank you email to confirm that everything went well. The default text is a simple “Thank you for joining our newsletter!” but you can create your own message. If you upload your logo, eMailChef will automatically edit it to fit the email.

Single Opt-in

To create a single opt-in form (only available for Executive Chef users), you only need to write a welcome message that appears on your website after the user has subscribed. For instance:

Like the double opt-in mode, a single opt-in also allows you to send a thank you email to confirm that the registration succeeded. Again, you can copy the default welcome message text or add something new, and upload your logo.

Step 4 – Add the Code

You don’t need to add any extra code to your website to use popup forms. But if you want to control the pages on which your popup form appears, use the Behaviors tab in the form editor.

You will need to have installed the Website Script which you can find on the left.

Remember that you must install the Website Script to use any kind of form. The script is the same for each form in your eMailChef account, so you don’t need to add it more than once on the same pages.

If you’ve put a footer in your website, the code will be present on every page.

Our advice: if you paste the “Website script” in the footer of your website, the popup form can appear on any page of your site. In this way, it will be easier for you to manage the form display and choose on which URLs the form will appear by using through the by using the “Behaviors” tab in the Form Editor of your eMailChef account.

If you don’t remember what the Website Script is, please go back to “Start here”.

B. Inline Form

Inline forms are embedded on your website.

After successfully installing the Website Script go to the “LISTS” section. Select the list which you want to associate with the form, and click “Sign-up forms”.

Now click “CREATE A SIGN-UP FORM”.

Step 1 – Main settings

Set the main settings of your form as follows:

Form Name: You must give your form a name. This name will be visible only to you.
Description: You can also add notes about the form. Again, the description is only for your benefit and will be visible only to you.
Default language: Select the form’s language. By default, the language is the same as your account but you can change it to match the language of your website without changing the language of your account.
Shape appearance: Select Inline

Step 2 – Design Form

Choose a form template from our vast choice of ready-to-use layouts. You’ll be able to customize the form freely.

Form editor

The form editor uses a drag-and-drop system to enable the easy addition, removal, or editing of each element. In the following example, we drag and release a Text box…

…then edit it by changing its text, alignment, font style, and font size.

The same changes can be made with all the elements on the left. The customisation tools change with each element type.

Use the arrow icons to change the order of the fields. Click, then drag-and-drop the field down the page.

You can also change the style of your form with the tools on the right.

Any custom fields you have created will be available among the default elements. For instance, if you have created a data field for users’ date of birth, you will be able drag that field into the subscription form. All data is synchronized automatically.

eMailChef also lets you create a translated version of your form for multilingual websites. Simply click “Add translation” to produce a translated copy.

Step 3 – Subscription Preferences

Begin by choosing whether to create an opt-in or double opt-in registration form:

Double Opt-in

To implement a double opt-in process, you first need to specify a subscription confirmation email. eMailChef will send an email to the subscriber immediately after opting in. The email will contain a link (identified by the tag [[confirm_link]]) that the subscriber must click to confirm their registration and the validity of their address. eMailChef provides a default text to guide you. You can also upload your logo which the system will automatically edit to fit the email.

To send your subscribers a correctly formatted subscription confirmation email, eMailChef uses an internal and customizable tag system.

{{h1#Subscription confirmation}} for the Title which appears in the body of the email.

{{button#[[confirm_link]]#Yes, I want to subscribe}} for the confirmation button.

{{a#[[unsubscribe_link]]#Click here to unsubscribe}} to add an unsubscribe link.

You can customize the italicized words after the hashtag#.

Single Opt-in

To create a single opt-in form (only available for Executive Chef users), you only need to write a welcome message that appears on your website after the user has subscribed. For instance:

Like the double opt-in mode, a single opt-in also allows you to send a thank you email to confirm that the registration succeeded. Again, you can copy the default welcome message text or add something new, and upload your logo.

Step 4 – Add the Code

Finally, copy the “INLINE” HTML snippet and paste it on your website where you want the form to appear.

Note: If you have created the form in various languages, you will need to copy and paste the HTML snippet of each language.

You will also need to have installed the Website Script which you can find on the left.

If you’ve put a footer in your website, the code will be present on every page.

If you don’t remember what a Website Script is, please return to “Start Here”.

C. Hosted Landing Page Form

This form type is hosted on our landing page and can be used for specific lead generation beyond your website. To create a hosted landing page form, follow the steps of the Inline form type.

At the last step (Get the Code), copy the code next to “Hosted” (under “Hosted Landing Page Form”) and paste it into your website, a link or a button.