Posted on

Embedding subscription forms – MailChimp integration

Inviting people to opt into a mailing list is one of the most common “call to action” for Icegram and similar plugins.

Icegram supports any mailing list service that provides HTML form for subscription (this covers almost every service under the sun).

Essentially, there are two methods of integrating.

Using a shortcode provided by another mailing list plugin

There are many mailing list plugins for WordPress. Most popular email service providers have their own plugin that allows showing subscription forms in WordPress. If you are using such a plugin, and it provides a “shortcode” to embed the subscription form, this is the easiest way to add a subscription form to an Icegram message.

Just copy paste the shortcode in a message and the form will show up when message is displayed to the user.

For full control, use HTML subscription form embed technique

If there is no shortcode, or the form output via shortcode does not fit / look good, use the HTML form code embed method to add a subscription form to an Icegram message.

As of this writing, the process is not “point-and-click” simple – it requires a few clicks and copy pasting the HTML form code in a Icegram message. We will have a simpler solution in future. But let’s walk through adding a MailChimp subscription form to Icegram and understand how this works.

MailChimp Integration example

  • Go to Lists. Click on the list name you want to generate a subscription form for.
  • Go to Signup forms. Select Embedded forms
  • Icegram can work with any HTML code here – including the ones that have custom JavaScript and CSS code in them. For example, you may use the “Classic” form like this:
    mailchimp-embed-classic-form
  • But what may work best, is to use “Super Slim” or “Naked” form, with minimum number of fields. The “Naked” form gives minimal form HTML code and you can easily customize it if needed.
    mailchimp-embed-naked-form
  • Copy the HTML code from “Copy/paste onto your site” textbox.
  • This form code has lot of line breaks. And extra line breaks cause extra paragraphs in WordPress. So let’s clean it up so that everything is on a single line. To do this, go to TextFixer’s free online line break / paragraph removal tool. Paste MailChimp’s form embed code. Remove line breaks. Copy the resulting HTML code.
    removing-linebreaks-from-subscription-form-html-code
  • If you haven’t created a message in Icegram yet, go ahead and do that. A full form can fit well in an action bar or popup window. A form with just email address can work anywhere…
  • Go to the “text” view in Icegram message body editor. And paste this cleaned code there.
  • You can also remove any CSS classes / HTML code you think is not required. Our intention is to keep things at the bare minimum.
  • You would most likely want to remove Icegram’s call to action button label too. Since the “subscribe” button is already present in the MailChimp form code.
    icegram-message-with-subscription-form
  • Preview the message and tweak HTML/content/CSS as you like.
    subscription-form-in-amaze-popup
  • Another useful thing: Icegram allows adding custom CSS to the message text field. And this can come in handy in cases like this.. For example, you may add this code to show MailChimp form fields in one line, spread across the width of the message.
    form-fields-in-one-line-css-in-editor
    form-fields-in-one-line
  • You can also use any other formatting options in the editor – use shortcodes your theme may provide.
  • Preview until you get it to your liking. And then publish the campaign!

Congratulations! You’ve successfully embedded your MailChimp subscription form in Icegram, and learnt many tricks in the process!

Again, we understand this is not ideal so we worked on something better…

Try this….Easy Way Out

Hurray!!! We have worked a easier solution on how to embed subscriptions form into Icegram follow this link to know more.

18 thoughts on “Embedding subscription forms – MailChimp integration

  1. I couldn’t get this to work—the Icegram plugin already has a Button to use to submit things—but when I deleted the mailchimp submit button, the Icegram submit button wasn’t collecting email addresses. How can I do this?

    1. Use the MailChimp submit button. And leave the CTA button text blank in Icegram. That will hide Icegram’s button and show only MailChimp button. That should do the trick!

      1. Thanks for your message! I sadly still can’t get this to work probably. Here’s the page I’m testing it on: http://www.fairivy.com/return-policy/

        And the mailchimp code:

        #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:500px;}

        /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.

        We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

        1. The MailChimp form does not have any “submit” button. That’s why it’s not showing.

          Please take the naked form and try that.

          If it still does not work, email hello@icegram.com with your WordPress admin login/password and URL. We will fix it for you.

        2. BTW, we added a new Form Embed tool in Icegram 1.5. That lets you choose if you want to use CTA button from the message or submit button from the form. Hope that helps!

  2. Hey guys, great work on the Mailchamp integration. Question: would you be able to provide us a tutorial too for CampaignMonitor.com integration?

    1. Adding a CampaignMonitor subscription form is very similar. Use the “Copy/paste a form to your site” option under “Grow your audience” for your list. Take the HTML form code and process it similar to MailChimp instructions in this article.

      We will have a button next to the message editor in an upcoming version to insert subscription forms. That will take care of simplifying HTML code…

      Till then you can do it manually…

      1. Excellent, thanks so much @mehtanirav:disqus!

        1. BTW, we added a new Form Embed tool in Icegram 1.5. That takes care of all the manual work we described here. So you just copy the form HTML, paste it in the Form Embed tool and go!

  3. Hello, can you tell me how I can change the text of my “Subscribe” Button to say Join Now? The site I’m working on is VoiceOfHair.com. The button text is too long on mobile devices and I’m struggling with how to shrink it. Thx!

    1. Hi Noel,

      You can easily change the text from Subscribe now to Join now by editing the Button Label field which is present right below the Form field in your campaign editing panel.

  4. Is there an option for Mailchimp to skip the double optin?

    1. Please refer this link.
      You can set from type and skip double optin.

  5. Good one, I was just looking for this one.

  6. Thanks. Really helped me a lot.

    1. Glad to hear that 🙂 To your success!

  7. Hello, When I click on suscribe it opens another tab (mailchimp tab) and I have to enter my details and suscribe again. How can I correct this ? I would like that my client just suscribe their mail address on my website, not in another tab, is it possible ? Many Thanks!

    1. It looks like subscription form is not properly embedded. Can you recheck all the steps and make sure you’re doing it as explained?

      You may want to consider using Rainmaker or follow method described here.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.