By Neil on June 17, 2014
If you use the Genesis Framework with your WordPress website then adding an email newsletter signup box is super simple. Learn more about the Genesis Framework here.
The short video below adds an email newsletter signup box to the right sidebar of a WordPress website using the Metro Pro child theme.
This WordPress tutorial is part of the TurboBikeTrainer.com case study where we are walking through how to build the live website from start to finish. Read more about this case study here and see more video tutorials.
This tutorial assumes you are running the Genesis Framework.
Navigate to Plugins/Add New in your WordPress dashboard and install & activate the free plugin ‘Genesis eNews Extended’ (just search for it using the search area).
Once installed and activated navigate to Appearance/Widgets and drag the Genesis eNews Extended widget into the Primary Sidebar widget area. In the Genesis eNews Extended widget add a title (e.g. Email Newsletter). Next add some text into the ‘Text to show before form’ area (e.g. Pop your email below and hear about the very latest deals and website news first).
Next you need to link the email newsletter signup form to an email management client. You do this by inputting some link code in the Form Action field. I use MailChimp but there are other popular clients such as Aweber. The instructions below are for MailChimp.
You need to have created an email list in MailChimp, in this tutorial we use the Turbo Bike Trainer email list I have set up for the live website. Navigate to your lists and click on the one you want to use. Select ‘Signup forms’ from the navigation menu and then click ‘Select’ below the Embedded forms section. On this page you will see some HTML code that represents a signup form, but we only need to copy the code that appears between the quotation marks directly after the words form action=.
For example I use the following code for my Turbo Bike Trainer email list:
In this tutorial we are only asking of an email address in the signup form, but you may want to add a field to get a first name etc. In the E-mail Field you need to put in the MERGE tag for the field as it is shown in MailChimp (or whichever email client you are using). In MailChimp you can find this MERGE tag by clicking on your list and then choosing Setting/List fields and *|MERGE|* tags. We simply type EMAIL into the Genesis eNews Extended widget for the E-Mail field.
The final things to setup in this eNews widget is what placeholder text you want to display in the Email input area and what words you want on your submit button. Click Save on the widget and then when you refresh your homepage you should see the email newsletter signup box in the sidebar.
Make sure you test out your signup box to check it is working correctly.
I hope you can follow this tutorial ok, if not please let me know below in the comments or contact me using the contact page or on Google+ etc.