13 Comments

Sucessful Genesis eNews Extended Plugin and Constant Contact Integration

/ / /

I am in the process of creating a new Genesis based website for a new-to-me client and I choose to use the Showcase Pro child theme to start my customizations on. One of the built-in features of that theme is an area to add the Genesis eNews Extended plugin that you can configure to use with a lot of popular email marketing providers. As noted my client is new to me, but she has a current website and is already established with using Constant Contact. The first thing I did was google “Genesis eNews Extended constant contact” to see if anyone had some easy to follow instructions so I didn’t have to re-invent the wheel.

That is where I came across Sallie Goetsch’s post on her website with a walk-through where she had success, but not 100% integration (she couldn’t figure out how to get the First Name and Last Name passed through). Now her post is from October 2014 so I am assuming Constant Contact has made some changes to their forms since then, but between her advice, my experience and some trial error I have figured out how to integrate Genesis eNews Extended and Constant Contact so you can add a new subscriber to specific list and capture their email address, first name, last name and then direct them to thank you page you designate.

Step 1: Create a new signup form at Constant Contact

Login to your account at Constant Contact and then go to Contacts > Sign-Up Tools and click on the large golden button on the upper right that says “Create a Sign-Up Form”. We are just creating this form to get information from CC to use in our plugin so we don’t need to worry about the Form Name, Form Title or Description fields (you can leave them to whatever they default to). You do, however, need to select the box for the list(s) you want people added to when they signup from the eNews Extended widget we are creating. For my example I am using the list “2016 Test List”. Press Continue.

Create Signup Form at Constant Contact

On the next screen you can choose other fields you want to collection information from. Here is where we indicate First Name and Last Name by click on the “Additional Fields” link on the bottom left.

Contact Fields

From the popup you can select First Name and Last Name and press “Add”.

additional-fields

After you have added the First Name and Last Name fields and are back on the Contact Fields step press the Continue button.

You can skip the Form Appearance step and just press “Finish”.

Step 2: Pull code from signup form that was just created

After you create the new signup form in Step 1, you will be directed back the initial Sign-Up Tools page. Scroll down to the “Additional Web Sign-Up Forms” section and you should see our new form we just made. You will now click the “Actions” button and from the menu that opens please click “Embed Code”.

Embed Code

You are now shown a popup with the code you would theoretically copy and past the whole bit into a web page. For our purposes we will just be finding specific information that we need to add to the Genesis eNews Extended widget.

Embed Code Popup

Below I will highlight what bits of code we need to copy to our widget. You may want to copy the code from the popup and open in it on your computer in a plain text editor like NotePad (PC) or TextEdit (Mac) so it will be easier to copy certain sections of code (the popup will automatically select all of the text every time you click into it).

 

Step 3: Setup the Widget in WordPress

Now that we have all the codes we need from Constant Contact we need to create the widget in our WordPress site and add the code where needed. After creating the new widget you will need to put the following information into the corresponding areas.

On Line 9 of my example code above you will see a form tag. We want to pull the “action” of that tag and add it to the “Form Action” of our widget (without the quote marks).

We now need to copy all the <inputs> that are hidden so that your data will be properly parsed when sent to Constant Contact (this also contains the ID of your list and your account and that is why you need to create the new signup form in step 1 as this information is unique to each account!). In my example that info is on Lines 13-17, you need to copy that from your own embed code into the “Hidden Fields” box in your widget.

Our next step is to copy the “name” of each input for our Email, First Name and Last Name field. This info you can copy from below as I don’t think it is unique (but if you have problems then you will need to double check this info on Lines 18, 19, 20. Put “email” in the “E-mail Field”, put “first_name” in the “First Name Field” and put “last_name” in the “Last Name Field” of you widget.

Initial Widget Settings

At this point you can use your widget and it should add any new signups directly to the list you indicated. BUT after the visitor submits the form we get an ugly white page on Constant Contact’s website with a “success” message. We don’t want that so we will make a “Thank You” page to send them.

Success Message

Step 4: Create a custom “Thank You” page for your visitors to be directed to after submission

If you do not already have a “Thank You” page created somewhere in your site you can easily make a new one by going to Pages > Add New. You can call this page whatever you like, the only thing we need is the Permalink URL that is displayed under the title of your page.

Create Thank You Page

Copy the thank you page permalink and go back to your Genesis eNews Extended widget settings and in the box where we pasted the hidden fields we need to add the permalink to the last input directive, between the two quotes.

By default the widget will open the Thank You page in a new window unless you checkmark the “Open confirmation page in same window?” box. When you do this the visitor will be immediately transferred to the new Thank You page without being any the wiser.

Add Thank You URL to Hidden Field

Thank You Page

And that is it my friends, everything should be working if you followed all the steps above. Below is a screen shot of the test list I made with my info all collected correctly in Constant Contact (I blurred my email address for security purposes).

Successfully Added to List

This is my first tutorial/walk through and I hope it helps you out! I also want to note I do not use Constant Contact to manage my own mailing lists, I figured this out for a client using their account and I have no idea if there are differences between different levels of accounts all I know is this works on their account. Let me know If you find something I have missed or if something doesn’t work please leave a comment below!

About Riika Magnus

Born in and still a resident of Portland, Oregon, I began creating websites over 20 years ago when I first taught myself HTML and all the tricks of the web. I am a freelance website designer and developer that specializes in CS-Cart and WordPress platforms, among many other things. My past experience includes running a company that designs, develops and manufactures their own product, training small business and individuals on how to use their website technology, finding solutions to complex problems and overall just helping out when I can. Need help with your project? Contact me today!

Riika has written 1 awesome articles for us at Silver-Logic Web & Print Services

Bookmark the permalink

13 Comments

  1. Amy says:

    This worked so perfectly! Thank you for sharing.

  2. Bill Hibbler says:

    Thank you so much for this article, Riika! I really appreciate you documenting this process. Everything worked perfectly!

  3. Amy says:

    Awesome! Thanks, this worked so well… now off the style the form. 🙂

  4. dawn says:

    This was very helpful! Thanks so much for posting it.

  5. lauren says:

    did anyone else get this error?
    {“success”:false,”err”:”Request contained errors”,”offenders”:[{“err”:”ca is missing”,”offender”:”ca”,”required”:true}]}

What do you think?

Your email address will not be published. Required fields are marked *