Form Integration made simple, quick and effortless

wrote this on

Optin forms are a huge buzz over the internet. Almost every business wants to grow their list and wishes to stay connected with their audiences for long.

Icegram realized this and we wrote a blog on ‘How to embed Optin forms into Icegram’ sometime last month. We tried making it easy for our users but found out there were certain issues with the Css formatting. This made the layout of the form look ugly. Also the whole process was very tedious.We felt our customers deserved something quicker and simpler and this made us come up with the following solution.

Now, integrating the layout from any subscription form is a matter of few clicks.

Almost all of the message types of Icegram are fully compatible to form integration except badges, ribbons and notifications.

Steps to Embed Form in your Icegram Message

Step 1: Create a new campaign & add the message type of your choice

Step 2: Tick mark the form checkbox in the content editing panel of the message type

Step 3: Next select a form style.
(Note: this is the style of the input boxes only)

Step 4: Select the position of the input boxes.
They are graphically represented so you can choose them easily.
(Note: if you select the position as INLINE. You will have to manually insert the ig[form] in the location of your choice in your message body.)

Step 5: Paste the HTML code/ short code of your third party service or simply add HTML code for your custom form

Step 6: Save draft and Check preview. If everything is well, Go live!

how_to_add_optin

Over To you

Go try it out yourself and let me know how it goes…
Incase you face any problems, either email us or simply drop us a comment right here!

23 thoughts on “Form Integration made simple, quick and effortless

  1. Help! It looks wonky (see attachment) and I can’t figure out how to edit the css properly. Can I add CSS to the headline or the button? Here’s my MailChimp embed code:

    Email Address

  2. From the screenshot provided we assume you are using the ‘Hello’ theme of the action bar. Here’s a quick workaround of something you wanted to achieve. All you need to do is add inline CSS for form in the message body (WP message editor) and tweak it as per your need.

    style=”padding-bottom: 1.5em;bottom: -0.9em;position: relative;” (Check out the image to have a better idea of it visually)

    Also would like to inform you that we’re working on improving forms further. So stay tuned. Until then the above solution should do the trick 😉

  3. So firstly, I added the embed code from MailChimp but now the background colour setting on Icegram is being ignored. How do I fix that? Also, I tried adding your inline script, and it did nothing. Any thoughts? Thanks!

    1. Please send your MailChimp form embed code to hello@icegram.com – we will take a look.

      Also, which inline script are you adding?

  4. Hi, How change the color of the subsribe button on the theme popup?

    1. The button color is determined automatically based on the background / text color and theme. If you don’t like it, you can leave the “call to action text” blank (which hides the button), and add your own button in the message body itself with a CSS class “ig_cta”.

  5. Hi, if i add form than there apears a scrolling bar. Can i remove the scrollingbar?

    1. What message type are you using? Most messages should automatically expand to accommodate your content – including the form. If the form is long, you may try to shorten it. Or layout the fields horizontally. You may also need to check your theme CSS to see if it’s adding a lot of margin / padding.

      Do try these. If you still have problems, contact our suppor team.

  6. Just wanted to pass this little bit of information on.

    I was using a shortcode inside a locked popup optin.

    locked using this code:

    CSS:
    .ig_popup .ig_close{
    display:none;
    }

    JS:
    jQuery.magnificPopup.defaults.modal = true;

    I was having a problem breaking the lock. My CRM/autoresponder (LeadOutome) requires a redirect; and it was redirecting to a new window leaving the old window intact along with the locked popup. I needed a way to engage the popup’s button. Another thread here spoke of a way to do that with an image using class = “ig_cta”.

    I accomplished it by putting the shortcode into a div with a class parameter.

    Just paying forward.

    Hope this helps someone.

    Regards,

  7. Alignment doesn’t work properly with gravity forms.

    It must be great if you can fix it.

    Best

    1. Hey Nico,

      We need to get it tested! So kindly send us the html code you’ve been integrating with, directly to our support team at hello@icegram.com.

      We will get back to you asap.

      Ciao 🙂

  8. Hey I am trying to add the following form code to the embed code section but whenever I press insert form nothing happens. This is the code for a hubspot form:

    hbspt.forms.create({
    portalId: ‘518270’,
    formId: ‘5a5a56e7-b51c-4833-ab73-3e7831b56501’

    });

    1. Hi Zunaira,

      The code you have been inserting wouldn’t work with the Icegram messages type. Icegram is compatible with HTML code for the form. And with the latest version 1.9, you can also add a shortcode in the form.

      However, we would like to help you further. So incase you have anyother questions kindly reach out to our support at hello@icegram.com. Thanks!

  9. Hi,
    I try to use the mailchimp opt-in
    and the Icegram function “Open Link”
    Does this work somehow.

    Right now I only get the Mailchimp follow up.
    and the expected Link given in Icegram doesn`t open

    So in general use the Icegram Button instead of the mailchimp button (but still need to get the optin)

    Thx Martin

    1. Hi Martin,

      Our support will like to look into this issue further. Kindly contact them at hello@icegram.com. The issue will be taken care from there.

  10. I am embeding a constant contact form and when I add an email address and hit join it sends me to a white page that says success instead of sending me to the success page. Please inform why this is doing that and how do I fix it.

    1. If you have a form in message body it will simply submit and stays on success page.
      But if, success page is different from success page of contact form, Please send your link where you have embed code to hello@icegram.com – we will take a look.

      1. Has there been any update on this issue? I’m having the same problem.

        1. When you have Icegram message with form, on a click of button it will submit the form (no redirection to the page).
          If you want both submission and redirection, you can use CTA Actions addon.

          If you still have queries, please contact us at hello@icegram.com .

          Thanks.

  11. I tried to paste the following embed code, But nothing seems to happen… :

    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
    /* 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. By looking at the code, it seems incomplete. There is no HTML in code (only CSS and comment). It will not display anything.
      Please paste complete HTML code and check.
      If you are still facing issues, Please Contact Us with complete HTML code of your form.

  12. Hi There. I am trying to implement a Sendinblue form that is in HTML, in the HTML box, but the form does not show up. I only get two input boxes and a submit button. How can I fix this?

    1. @Shakir,
      Can you please give us the link where you have setup Icegram message(Sendinblue + Icegram)?
      It will be helpful if you can write us mail “hello@icegram.com”.We will look into it.

Leave a Reply

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