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

Nina De la Cruz Nina De la Cruz 7 min read

Want to grow your email list? Then the first step you need to take is to add an email opt-in form to your website.

You can choose to create an inline or an animated opt-in form (a.k.a. pop-up form) – or even use both formats for your list-building strategy.

What’s more important is that your form:

  • matches your branding and website design
  • encourages visitors to sign up
  • appears at the right moment

Here is an example of what it may look like 👇

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 7 days of full-featured trial and requires no credit card until you’re ready to commit.

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:

Editing the text on the email opt-in form in Getsitecontrol

💡 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 👇

How to change the image on the email opt-in form in Getsitecontrol

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

Changing the style of the form in Getsitecontrol

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.

Submission success message example

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:

Setting up opt-in form targeting in Getsitecontrol

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. 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

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:

Follow-up tab in Getsitecontrol

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 👇

Example of a follow-up email created in Getsitecontrol

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.

Activation step in Getsitecontrol

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.

Email opt-in form performance report in Getsitecontrol

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:

How to edit text on the inline email opt-in form in Getsitecontrol

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:

Subscription success message on the inline form

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:

Widget theme settings in Getsitecontrol

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:

Replacing the image on the inline form in Getsitecontrol

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 “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.

Targeting settings example for an inline email opt-in form

Step 5. Craft a follow-up email

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 3rd-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.

Inline form activation step in Getsitecontrol

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.

Nina De la Cruz is a content strategist at Getsitecontrol. She is passionate about helping small and medium ecommerce brands achieve sustainable growth through email marketing.

You’re reading Getsitecontrol usecase collection where we talk about the best practices for using website popups. This usecase is a part of Build email list section.

Get the print version

Download a PDF version of our use case for easier offline reading and sharing with coworkers.

Download PDF