How to Add Multiple Fields in OptinMonster with Gravity Forms

Do you want a robust form, but don’t want to custom code it yourself? Or maybe you have WordPress and want an easy solution for creating a form with multiple fields in OptinMonster.

That’s when Gravity Forms comes in handy.

You see, OptinMonster prides itself on being the leading conversion tool for websites. And the shorter the forms, the better. But this doesn’t work for every website.

Therefore, OptinMonster offers 2 solutions that allow you to customize your forms to your heart’s content: (1) Custom HTML and (2) our Canvas Technology.

While you can add a custom embed coded from in our Custom HTML form or using the Canvas template, sometimes the solution is a bit more complex.

That’s why we decided to integrate with one of the most popular and versatile contact form solutions, Gravity Forms.

Gravity Forms is a premium plugin for WordPress that allows you to create complex forms in a matter of minutes.

In this post, we’ll create an optin form that has multiple fields, and trigger the popup with a click of a button using our MonsterLinks feature—similar to what we do in our sidebar.

Let’s get started!

1. Create a New Gravity Form

Your first step is to create a Gravity Form that you’ll use in your MonsterLinks popup. We’re creating a new form that will allow us to readily collect new partners’ information.

create a new form with gravity forms

After you add the fields you need, you’ll have a live form with an ID number. In our case, it’s form 14.

gravity forms id number

The standard Gravity Forms shortcode looks like this:

[gravityform id=14 title=false description=false ajax=true tabindex=49]

Of course, you’ll need to change the form id to the number of the form you want to display.

2. Create a New Optin

For this tutorial, we’re going to use a popup campaign type with the Basic template.

select popup type with basic template

Once you’ve selected your template, choose a name for your optin and select the site you want to use it on. Then press Start Building to be taken into the drag and drop builder.

Inside the builder, you can click on any element in the live preview to open up the editing tools on the left. Make changes to your headline, text, images, colors, buttons—the sky’s the limit!

If you’ve never created an OptinMonster campaign before, check out this documentation and be sure to save your campaign regularly.

edit campaign text

After that, you’ll need to add your Gravity Forms shortcode. To do that, click Add Blocks and drag and drop an HTML block to wherever you want the form to appear.

add html block to optin

Then, add your Gravity Forms shortcode to the HTML block:

add gravity forms shortcode to html block

A very important thing to note at this point. Your Gravity Form will not show up in the live preview. This is because your shortcode is for a WordPress plugin on your site, but you are not on your site. You are on the OptinMonster app site, so can’t see your form here.

How do you test then? We suggest loading it on a test page and then modifying the style if needed.

In our case, we’re adding this as a MonsterLink on our site, so we have a couple more things to do.

If you want to make this popup a MonsterLink, go to your Display Rules menu and add the condition If visitor clicked MonsterLink.

add monsterlink display rules

Now, to get the HTML code needed to make your MonsterLink work, click the Copy MonsterLink Code.

3. Publish Your Optin

Go to the Publish tab and set the campaign status to Live, then save the campaign.

publish your optin

Now you can use the Shareable MonsterLink code anywhere you’d like to have users be able to click the MonsterLink to access this optin!

get shareable monsterlink to preview campaign

Here’s how to do it in WordPress:

From your WordPress dashboard, select OptinMonster from the lefthand menu to see a list of your campaigns. If you don’t see the campaign you want, click on Refresh Campaigns.

list of optinmonster campaigns in wordpress

Click Go Live to allow the campaign to appear on your site. Once that’s done, you can paste the code wherever you’d like the optin to appear:

shareable monsterlink pasted into gutenberg editor

And it doesn’t just work in WordPress! You can paste the MonsterLink into any website you’d like using basic HTML. 😎

4. Styling Your Gravity Form Popup

If you want to fine-tune the styling on your Gravity Forms popup, follow our Guide for Styling CSS. But how do you test out your optin code on the screen?

You can use the Chrome browser’s Developer’s Tools window to inspect the page source and it’s applied CSS styles, and test CSS modifications right from the browser. A good video walk-through of this process is found here.

After you find styling that works for your form, just add CSS according to our guide.

Finally, you have a great end product that is also responsive.

gravity forms optinmonster popup with styling

If you enjoyed this, you may also like our documentation on how to track conversions with Custom HTML forms.

Not using OptinMonster yet? What are you waiting for??? Get started today and boost your lead generation efforts like nobody’s business!

Jacinda Santora
Jacinda Santora is a writer specializing in ecommerce and growth marketing. She prides herself on her ability to make complicated things easier. When she isn't writing you can find her daydreaming about campervans, drinking coffee, and listening to podcasts.

Comments

  1. Thomas Griffin May 13, 2019 at 9:09 am

    Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our powerful Exit Intent® technology that converts abandoning website visitors into email subscribers and customers. Typically 70% of the people who visit your website will leave and never return, meaning all those marketing efforts to reach them have gone to waste.

    OptinMonster’s Exit Intent® technology detects user behavior and prompts them with a targeted campaign at the precise moment they are about to leave.

    You can unlock this powerful technology 100% free when you purchase our OptinMonster Pro plan.

    Get started with OptinMonster today and see why 700,000+ choose OptinMonster to get more subscribers and customers.

    Thomas Griffin
    President of OptinMonster

  2. Hi, any easy way to setup fields which indicate if the subscriber wants to sign up either daily, weekly or only special post categories?
    Thx.

    1. Hey Jens,

      Depends on your integration, see here: http://www.gravityforms.com/add-ons/ . But in general, you could set up fields, then add conditional logic that does something like “If weekly is checked, then add to weekly list”, etc.

      1. I noticed that conditional logic doesn’t appear to work when using OptinMonster, unless I’m doing something wrong. It works when I preview it in the gravity forms dialog, BUT when on the actual webpage, it doesn’t.

        1. Hey Mike,
          Would you support a support ticket? This guide can show you where you can submit a ticket once you log in: https://optinmonster.com/docs/getting-support-for-optinmonster/

          By submitting the ticket, it’ll allow us to more thoroughly review your issue.

          Please be sure to give a specific URL where you optin show be loading.

          Thanks!

  3. that made my day! i was struggling with the free version of survey services (SurveyMonkey and others), but now i can use my gravity forms!

    Yay!

    Pedro Braz

    1. Glad you found this help Pedro 🙂

  4. Just wrote an article on how to add video recording to that Gravity/OptinMonster form: https://addpipe.com/blog/record-video-with-gravity-forms-and-pipe-video-recorder/

    Kevin, if you want to learn Romanian… email me! I’m from Romania!

  5. I can’t figure out how to get my Gravity Form to embed inside the Optinmonster popup. I got all the way to the end but I don’t see any option to put my shortcode at the bottom of my output settings in WordPress like mentioned below:

    “The most important thing you need to do is to paste your shortcode in the bottom of your output settings. This allows us to properly format your Gravity Form on the page and minimize any problems from occurring. Go to List shortcodes in optin: and put your Gravity Form’s shortcode there as well.”

    Any help would be greatly appreciated.

    1. Yes, I also got up to there. Can anyone help. I didn’t find place to put my GravityForm Shortcode.

      1. Hello Mani and Collin,

        That step is no longer necessary, which is why there is no longer any place to put the shortcode inside the Output Settings in WP. So just skip that step. 🙂

        (As a side note, make sure that you “refresh optins” inside WP every time you make a change to the optin inside the builder.)

        Hope that helps. If you have any other questions or need more help, feel free to submit a support ticket and we’d be happy to help you out!

  6. Are there recommendations on how to create a simple form (Contact us, simple surveys, etc.) for Shopify sites?

    1. Hey Alex,

      We recommend WPForms. You can learn how to integrate WPForms with Shopify here.

      Hope that helps!

      Mary

      1. Thanks Mary.

        So, WPForms to create custom forms for a new Optin, and use ZAPIER to trigger Shopify events (e.g. create new customer with the email)?

        WPForm Optin will be displayed, and when converted, email will be captured for MailChimp. Does this sound about right?

        Then, which APP can trigger an email to admin with custom field/content captured (e.g. a question) by the Optin WPForm? I suspect ZAPPIER won’t have this data.

        Thanks in advance.

  7. Wow, just in time. I’m shopping for something that works with my beloved gravity forms

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.