Note: This post was written in 2015, and I’ve written an update for it here.
If you’re like me, you want a good opt-in on your site.
What’s an opt-in?
An opt-in is that little box that allows people to subscribe (or “opt-in”) to your newsletter, emails, etc. You can use a variety of different services for this, such as MyEmma, Aweber, Constant Contact, or what I think is the most popular, MailChimp. (It’s what we use.)
But, if you’re like me, you think the styling for their embedded sign up form is pretty ugly. Seriously. Here’s what it looks like if you take just what they send:
Who wants that on their site? Not me!
So there are options. My previous favorite was to use Gravity Forms for my opt-in box. It works great, connects easily, and looks much nicer than the out-of-the-box solution from MailChimp. I even wrote a blog post about how to do it.
But, it’s not my favorite anymore. My new favorite is with a plugin called Genesis eNews Extended. Of course, the Genesis part means you need to be using the Genesis Framework for this to work, so if you are using a different theme, sorry. Stick with Gravity Forms.
But, if you are using Genesis, why not turn your old ugly subscribe box into a pretty one, like the one you see in our sidebar? It’s really easy to do, and looks great right out of the box.
Note: These instructions assume you already have a MailChimp account and are using a StudioPress theme.
- Install the Genesis eNews Extended plugin, by going to the Dashboard, Plugins, and Add New. Just do a search, and add and install. Then activate the plugin.
- Go to your widgets in Appearance->Widgets and add the Genesis eNews Widget to your sidebar where ever you want it to be.
- Login to your MailChimp account, go the list you want your subscribers to join, open the signup forms, and choose Embedded Forms.
- There are two basic pieces of information you’ll need to copy from the embedded form script into your widget. First is the form action. In your MailChimp account , in the box where you see the embed code, you need to copy the Form Action line. What you see right after you see <form action=”
- You will take that line (excluding the quotation marks, but everything within, and paste it into your widget in the box for Form Action.
- Next, you will choose what information you want to collect from your users. You will always want the email address, so you go to the embed code and find the name of your Email field. In MailChimp, it’s always EMAIL. So in the E-Mail Field box in your widget, type EMAIL.
- If you want to collect their first name or last name, you can do that too. Just find the corresponding labels within the embed code in MailChimp. Hint: It’s FNAME for First Name and LNAME for Last Name.
- Then save your widget.
And that’s it! Eight easy steps to get your newsletter subscribe form looking great. Need help setting it up? We can do it for you! Get a quote today.
Amy Masson
Amy is the co-owner, developer, and website strategist for Sumy Designs. She's been making websites with WordPress since 2006 and is passionate about making sure websites are as functional as they are beautiful.
I’ve been working on this for an hour and your page got me up and running in 5 minutes! THANK YOU!!!
Yay!
Thank you very much! so helpful! Mine at first was not working,it directed to my sign up form but what I really wanted was to direct it to my confirmation page on mailchimp. I forgot to input the email-field that’s why.
Is there any way to REQUIRE a first and last name?
Using Genesis ENews Extended?
Hi Amy,
Thank you for taking the time to create this tutorial. I have a question for you:
When I tested this plug-in, I expected it to send a confirmation email to me. Instead, it popped another signup form onto the screen, so subscribers have to fill out their address and name again and click Submit again. Then MailChimp sends a confirmation email (my understanding is that MC requires a double opt-in).
Is this triple opt-in the intended behavior of the plug-in? Expecting people to jump through that many hoops to subscribe to a blog or newsletter is not realistic.
I’m wondering whether the behavior is normal for the plug-in or if I missed a setting somewhere.
Thanks.
Thank you for your help and support,
Bonnie
Hi Bonnie – I think MailChimp may have changed something. But essentially, yes, that’s how it works now. I plan to rewrite this one soon since it’s a couple years old, and hopefully will have all the answers for you. (I’ve actually mostly switched to Beaver Builder subscription sign ups.)
Thank you for your reply Amy! I’ll look into it more. Have a great weekend!
I think I got it now. Thanks!
Thanks Amy! I have tried with and without.
I would be happy to take a look if you want. You can send me an email at amy [at] sumydesigns.com
Mine unfortunately won’t work. Followed these exact steps at ProsperousTeachers.com
Did you take out the http: before you pasted in the URL from MailChimp? It should start off as //
I have tried this over and over and it doesn’t seem to work, can’t figure out what I am doing wrong. I have genesis, and mail chimp, and am pasting the code into the form section, but keep gettitng an error message 🙁
Is your website a wordpress.com site or self-hosted?
self hosted. Genesis with Pretty Chic
It was showing my old wordpress.com site. My correct one is https://designbyd9.com
Same here.
Hey Mark, I did manage to get this to work. I had to remove and re-install the genesis enews widget, and then it worked!
This was so easy to follow. Thanks for sharing!!
Glad it was helpful!
So so helpful!! Thank you!!