Create an email opt-in form for your website (pop-up or inline)

Creating an opt-in form like this one takes less than half an hour and requires zero coding skills. In the tutorial below, we’ll show you how to do that using Getsitecontrol – an easy-to-use website form builder.

We’ll also feature a few other templates you can grab and tailor to your needs without any technical skills.

Feel free to jump to the format you want to use:

1. How to create a pop-up email opt-in form
2. How to create an inline opt-in form

How to create an email opt-in form that pops up at the right moment

Before getting started, create a Getsitecontrol account. The app offers a free plan that allows you to create non-targeted forms – i.e. displayed to all visitors, once they land on your website – at no cost.

Once ready, log into your account and follow these simple steps.

Step 1. Select a template

The fastest way to get started is to select a pre-designed template. Just click Create widget, continue to Premade widgets, and pick any email opt-in form from the gallery:

In the following steps, we’ll show you how to customize this template to your needs.

Step 2. Adjust your call to action

For starters, click on the text and type your copy:

💡 If you want to ask your subscribers to provide their consent to receive promos, you can add a mandatory checkbox. Just hit +Add field in the right-side menu and select ‘Consent checkbox’ from the list. Then type the text of the consent.

Step 3. Adjust the design and image

On the same screen, you can adjust the appearance of the form. For instance, to replace the image, make a click on it and proceed to Change image. You can pick a relevant photo from the built-in library or upload your own visual 👇

You can also change the color theme, font, and field style using the Theme menu at the top:

The best practice here is to maintain the same style your website has so that the opt-in form appears as its integral part, not an alien element.

Step 4. Create a submission success message

A submission success message is what your new subscribers see after submitting the form. In your dashboard, you’ll find it on Page 2.

Use this page to thank new subscribers for joining, explain what happens next, provide the promised incentive, or refer them to another URL, such as your blog, social media page, or product collection.

Step 5. Set the right timing

Now that you’ve created a fully functioning email opt-in form, you need to decide when you want to display it: instantly upon landing, after a visitor spends some time on your website, or when they start heading to exit.

To set things up, open the Targeting tab in your dashboard:

If you leave the default “automatically” option in the Start displaying the widget field, the opt-in form will show up as soon as visitors arrive at your website – these settings are a part of the free plan. Alternatively, you can delete the default condition and select a new one from the list.

While in the Targeting tab, you can also define:

• pages where the form should or should not be displayed
• types of visitors who will see the form (new visitors or returning visitors, for instance)
• conditions when you want to stop displaying the form to the same visitor

Targeting settings are intuitive to work with, but if you need guidance, feel free to read this detailed tutorial.

Step 6. Set up a follow-up email (optional, premium feature)

Once someone joins your list, it’s a good practice to send a follow-up email where you thank them for subscribing and let them know what happens next. In Getsitecontrol, that’s what the Follow-up tab is for:

You can use the suggested email template, create an email from scratch or pick one from the gallery. From there, crafting your message is a no-brainer 👇

You can create a single email or a series of emails – a so-called welcome email sequence, where you can introduce new subscribers to your brand, showcase your bestsellers, share gift ideas or other recommendations. Read this guide to learn more about crafting welcome sequences.

Step 7. Integrate your opt-in form with the software of your choice (optional)

New emails will be stored under the Contacts section in your dashboard. However, Getsitecontrol also integrates with most email marketing apps including MailChimp, Constant Contact, Aweber, and others. Additionally, you can connect your form to Google Sheets, Google Analytics, and hundreds of other apps via Zapier. You’ll find all the available options in the Integrations tab.

Activate the opt-in form and start tracking its performance

Once ready, hit Save & close and activate the form on your website using the prompts.

After the form goes live on your website, you can review its click-through rate right on the widget’s cart on the mains screen – and access a more detailed report in the Statistics section.

You’ll also be able to change the form or run an A/B test even after it has been published.

How to create an inline email opt-in form

Unlike pop-up forms, inline forms are embedded right into the page, so it’s a more unobtrusive format. Creating an inline form is almost the same as creating a pop-up form. Let’s walk through the process, step by step.

Step 1. Select a template

Log into your Getsitecontrol dashboard and click Create widget. Then proceed to Design ideas, open Forms in the left-side menu, and select “Subscription”. From there, scroll down to Inline widgets and select the form you like:

In the following steps, we’ll adjust the text, image, and style of the form. Then we’ll show you how to embed it on your website.

Step 2. Edit the text

Tailor the call to action to your offer and your brand’s tone of voice. For example, if you’re offering an incentive in exchange for a signup, mention it in the title:

Notice that this template comes with a mandatory consent checkbox – a good practice if you want to keep your form GDPR-friendly. Remember to adjust the text of the consent as well and make it more specific to your case.

Then open Page 2 and customize the subscription success message:

Step 3. Adjust the design and image

If you’re choosing the inline format for your opt-in form, it’s crucial to maintain the same aesthetics your website or your blog has. Open the Theme menu and select the font, color theme, and field style that matches your brand:

If you know CSS, feel free to use the built-in CSS editor to fine-tune the form.

Finally, click on the image and follow the prompts to change it. You can upload your own image or select a different photo from the built-in stock library:

Step 4. Adjust targeting (optional)

For animated forms, targeting settings define the moment when the form pops up on a page. For inline forms, you can easily leave the default settings available in the free plan “as is” – and the form will be visible on every page of your website.

Alternatively, if you want, you can use the Targeting tab to do the following:

• select pages where the form should or should not be visible,
• define the type of visitors who should see the form (new or returning visitors, mobile or desktop users, etc.),
• and decide whether those who have submitted the form should continue seeing it when visiting your website next time.

Step 5. Craft a follow-up email (optional, premium feature)

After fine-tuning the targeting settings, move to the Follow-up tab to create a follow-up email.

Follow-up emails are sent to your new subscribers automatically after they fill out your email opt-in form.

Click the + Add follow-up email and pick one of the premade templates from the gallery:

Customize the text and the visual part of the email to your taste, then double-check the Subject, Preview, and Sender fields, and send a test email to yourself to see how it will look in your subscribers’ inboxes.

The last tab in the dashboard is named Integrations, and it allows you to connect your opt-in form with any 3^rd-party software, such as email marketing apps, Google Sheets, Google Analytics, or any other solution. Feel free to skip it if you don’t want to work on it at this point. The emails submitted through the opt-in form will be stored in your account, under the Contacts section.

Step 6. Activate and embed the email opt-in form

Once you click through all the steps and save the form, you’ll be prompted to activate it and copy its code.

From there, depending on the website platform you’re using, you have several ways to add the form to your website.

If you’re using WordPress, you’ll need to add a custom HTML block and paste the code of the widget there. Read a detailed guide →

If you’re using Shopify (Online Store 2.0 theme editor), you’ll need to create a new section, add an Inline widget, and paste the code in the widget ID field. Read a detailed guide →

If you’re using any other website platform, you’ll need to add the code of the widget to the code of your website, or a page where you want the form to appear. Read a detailed guide →

As soon as you’re done embedding the form, it will go live on your website right away, and you can track its performance under the Statistics report.

Start growing your email list faster

Email list building is a long-term task, but you can start seeing results faster if you add a prominent email opt-in form to your website. More so, you don’t have to limit yourself to one opt-in form only. For example, it’s a common practice to add an email opt-in sticky bar or an inline form to the website and still display a pop-up form to make sure website visitors haven’t missed your call to action.