What the heck am I even talking about when I say “embed opt-in code”? This means taking the signup form for your newsletter/mailing list + placing it directly onto a page or post. That way, you get folks to sign up right from your website.
It’s super smart for one big reason — it gets folks to sign up while they are interested in you, your content or your business.
Let’s say someone just got done reading your latest blog post + was shouting “heck yes!” in the privacy of her own home. That would be the perfect time to have a blurb of text explaining that you send out weekly emails with similar content + all she needs to do is provide her email address in the box below.
But how do you get that email address field to work?
Option 1: Code from your ESP
No, I’m not talking about having a mind reader on retainer. ESP stands for email service provider + is just a three letter acronym for something like MailChimp, ConvertKit, AWeber or InfusionSoft. It’s the company that you use to manage all of your subscribers.
All of these companies will provide you with opt-in code to embed on your site. This is often the easiest option, but because it involves code, it can be a little intimidating at first. The good news is that you only need to know copy + paste to get this code in the right spot.
Once you’re logged into your ESP, grab the embed code that you want. I’ve included instructions for some of the most popular ones below.
MailChimp
- Head to the list that you want folks added to
- Click on signup forms
- Then click on embedded forms
- Select the version you want (I recommend naked to keep it easy + styled by your site theme)
- Copy the code provided by MailChimp
AWeber
- Click on sign up forms
- Click on the one you want (if there are none, you’ll need to create one)
- Once on the publish tab, click on I will install my form
- Click on raw HTML version
- Uncheck the checkbox below the code that says include beautiful form styles (this will help keep the form styled by your site + not by AWeber)
- Copy the code provided by AWeber
ConvertKit
- Go to forms
- Click on the form you want to embed
- Then click on settings
- Click on embed
- Select raw HTML or the WordPress option (if you have their plugin installed)
- Copy the code provided by ConvertKit
Adding Code with Classic Editor
Head to the page or post you want to embed your opt-in code on. Make sure you are on the text editor tab (the top right corner of the text box that you add content to.) Once there, put your mouse where you want the form + paste the code in place. All you need to do to get your form to show up now, is to save your changes. Then view that page or post on your site.
Adding Code with Gutenberg
Head to the page or post you want to embed your opt-in code on. Click the + icon to add your block. Search for “custom HTML,” then click to add the Gutenberg block to your page. Before you click + drag it where you want it, paste the code into the block. Now save your changes + view the page or post to review.
You could also add this code into a text widget in your sidebar by going to Appearance > Widgets. If your site has footer or header widget areas (this is theme dependent), you could add the code to every page using a text widget in those “sidebar” areas.
Option 2: Embed opt-in code with a plugin
I try to limit my plugin recommendations because there are way too many sites that have a serious plugin problem. But, there are some that I will recommend no matter what because I believe in how much easier they make our lives as business owners.
One of those select plugins is Gravity Forms.
I love this plugin because it makes creating simple + complex forms a breeze. You can use it to create your own site quizzes + embed opt-in forms that you have full control over.
The downside is that this plugin is not free. At minimum you need to purchase the basic license. But if you are using AWeber, MailChimp or a few other ESPs, you’ll need to purchase the business license.
Using Gravity Forms to embed opt-in code
Once you’ve got your plugin license + have it installed on your website, you’ll need to make a new form. The fields you add will depend on your opt-in form — for example, if you require the first name field be filled out in MailChimp, you must add that field to your Gravity Form form.
Next, you’ll want to connect your form to your esp by either using the add-ons that they have OR installing a free add-on through the add new plugins tool. For example, the ConvertKit add-on is free to install. Most of the add-ons require an API to connect to your esp but they also provide instructions for where to find your specific API.
After it’s connected to your list, you can head to your form settings + select which mailing list they should be added to, whether a thank you message or page should be shown + if they need to receive an email from you that is different than the emails you send from your esp.
And the final step is to place the form where you need it. Thankfully Gravity Forms adds a shortcode button next to the Add Media button on all pages for anyone with the Classic Editor. Click that button to select the form you want to embed. If you’re using Gutenberg, use the Gravity Forms block to add your form in place.
They also include a sidebar widget specifically for forms. You can use that widget to add your sign up form to your website sidebar. Or those header/footer areas — if your theme has them. If you add Gravity Forms (which I recommend you do), clear out any other form plugins because they can slow your site way down.