Follow Brian Li (@DecryptoBL) on Twitter.
Follow Brian Li (@bwhli) on Instagram.

How to Use MailChimp Forms with Genesis eNews Extended

January 9, 2015

MailChimp is a popular newsletter service, and Genesis eNews Extended is a great plugin for embedding subscription forms on your Genesis-powered WordPress site. In this tutorial, I’ll show you how to configure Genesis eNews Extended to work with your MailChimp form.

Create a From

Feel free to skip to the next section if you’ve already created a MailChimp form.

Here’s how you create a MailChimp HTML form…

  1. Browse to the MailChimp list you want to use.
  2. Click on the Signup Forms tab.
  3. Select the Embedded Forms option.
  4. Click on the Naked tab.
  5. Copy and paste the code into a text editor.

Setting Up Genesis eNews Extended

If you don’t have the eNews Extended plugin installed, you can find it here.

Browse to your Widgets settings, and add the eNews Extended widget to your site. On this website, I’ve placed the widget in the right section of the footer down below. The plugin settings page contains many different fields, but here are the ones you’ll need for MailChimp integration.

  • Title
  • Text to Show Before Form
  • Text to Show After Form
  • Form Action
  • Email Field
  • First/Last Name Field
  • Input Text Fields
  • Button Text

After you come up with a catchy widget title, move on to the before/after text fields. The text before the form can be something like “subscribe to my newsletter for month updates, etc.”, and the text after the form is usually something along the lines of “we respect your privacy”.

Now, go back to the HTML code you copy and pasted earlier. The code contains the parameters you’ll need for the next three fields. Look for something like this in your code…

//brianli.us6.list-manage.com/subscribe/post?u=f6a5080858827571ee1be6279&id=f921a9a6d5

Append “http:” to it so it looks like this.

http://brianli.us6.list-manage.com/subscribe/post?u=f6a5080858827571ee1be6279&id=f921a9a6d5

Paste this URL into the form action field in Genesis eNews Extended.

MailChimp creates a div for each field in your form, and they look like this.


Email Address *


The default form has three of these fields for email, first name, and last name. What you’ll need from this code is the name field. For the above code snippet, the name field is EMAIL. If you check your code now, you’ll notice that the name fields for first name and last time are FNAME and LNAME, respectively.

Type EMAIL, FNAME, and LNAME in their respective fields in the eNews Extended plugin. Keep in mind you don’t have to use all of the fields. For example, some people are cautious of submitting their names, so you might want to consider just using the email address field.

After that, you can choose whatever you want for the remaining input text and button text fields. That’s it! Now you should have a functional MailChimp subscription widget powered by the Genesis eNews Extended plugin.


Questions?

Find me on Twitter, or send me an email.