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:
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:
💡 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
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. 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:
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
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.
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 “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
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.
+ 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.
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
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.
Sign up now
Get beginner-friendly tips for growing your online business.Get started today →
Subscribe to get updates
Get beginner-friendly tips for growing your online business.Join the list →