Last updated on May 27, 2016
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
- 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.
- 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.
- 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.
- Preview the message and tweak HTML/content/CSS as you like.
- 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.
- 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.