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? Do you have WordPress and want an easy solution for creating a form with multiple fields in OptinMonster?

That’s when Gravity Forms come 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 has two 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 in Canvas, sometimes that solution is a bit more complex.

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

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

gravityforms_logo_500_2

In this post, we will create an optin form that has multiple fields, and trigger the popup with a click of a button using our MonsterLink feature – similar to what we do in our sidebar – just click on Get Featured on OptinMonster button.

1. Create a New Gravity Form

You first step is to create a Gravity Form that you will use in your MonsterLink popup. You will see that I am creating a new form that will allow us to readily collect new partners information.

Create-a-New-Gravity-Form

After you add the appropriate fields, you will see that you now have a new live form, with its ID number. In my case, it is form 4. Now if I know the shortcode format for Gravity Forms, then I am ready to go with my embed form.

Gravity-Form-ID

Let’s assume however that you don’t know Gravity Forms’ shortcode format. How can you find it?

2) Identify the Shortcode for your Gravity Form

The easiest way to figure out the proper shortcode format is to go to a post and embed the shortcode via Gravity Forms’ button.

In this case, I’m going to the page where I will ultimately load my MonsterLink Popup. On that page, as well as on your pages or posts, you should find a Gravity Form button above your text editor.

Click that button and a form will load called Insert Gravity Form. Here you can customize your options for your Gravity Form.

Insert-Gravity-Form-WP-Window

Choose your Gravity Form with multiple fields that you want to load. UNCHECK Display form title and UNCHECK Display form description unless you really want to share those. I’m going to use a predesigned OptinMonster templete and therefore do not want those items. However, if you want to Enable AJAX, that will still work with OptinMonster.

Click Insert Form and your form’s shortcode should appear in your text editor.

Copy-Gravity-Form-Shortcode

It should be something along the lines of:

 [ gravityform id="4" title="false" description="false" ajax="true" ] 

The main difference will be that there will be no spaces between the opening bracket and “gravityform” and no space before the closing bracket. The spaces are added here to prevent any form from attempting to load on our site.

Now that you have created your Gravity Form and retrieved its shortcode, it is time to create your optin.

3) Creating Your Optin with Multiple Fields

You will need to create a Lightbox Optin. If you have never created an optin, I suggest you first read Creating Your First Optin before you go any further.

Finished? Great. Let’s continue.

Select the Lightbox Optin Type. Next, choose your theme. I suggest you chose the Simple Theme.

Select-Lightbox-Simple-Theme

Great. Now on the next page, you will need to make your edits to your Optin’s Title and its Tagline to whatever you desire.

After that, you need to add you Gravity Form’s shortcode. In the optin builder, select the Integrations tab to view the Integrations panel.

select-integration-menu-item

If this is your first time connecting an integration to your optin you’ll see a “New Integration” item in the Integrations panel of the builder. Select that to begin configuring your custom HTML form integration.

edit-the-integration

Next, select Custom HTML from the Email Provider dropdown.

select-custom-html-from-integration-list

You’ll be provided with a blank textarea field.

custom-html-area-needs-shortcode

This Custom HTML Form Code area will now allow you to paste in your Gravity Form Shortcode. Go ahead and paste your Gravity Form shortcode there.

add-shortcode-to-custom-html-area

A very important thing to note at this point. Your Gravity Form will not show up in our Builder. This is because your shortcode is for a WordPress plugin on your site; but you are not on your site. Your are on our app site, therefore can’t see your form here in our builder.

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

In my case, I am adding this to as a MonsterLink on my site, so I have a couple extra steps first. If you want to make this popup a MonsterLink, go to your DISPLAY RULES Menu Item, and under When Should the Campaign Appear?, click and make Active the item called MonsterLink (On Click).

turn-on-monsterlink

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

click-to-copy-monsterlink

Once copied, the button will go green and say “Copied“.

monsterlink copied

Perfect. Click SAVE and then exit the Builder.

4) Add the Multiple Fields Optin to a MonsterLink

If you follow our MonsterLinks how-to guide, then this next step is pretty easy. Head to your site to the page where you will have your MonsterLink. If you aren’t there yet, I suggest you switch from the Visual Editor to the Text Editor.

You should be able to just paste the MonsterLink code you copied from earlier. For additional assistance, please refer to our MonsterLinks guide to assist in your implementation.

Add-MonsterLink-to-Page

You will see that I have added the following:

<a href="#" class="manual-optin-trigger" data-optin-slug="ptw8m2fkijhftb6x">Click here</a>

Now that the optin’s manual trigger is added, we’re almost there!

NOTE: all the following steps assume you running at least Version 1.1.5 of the OptinMonster API Plugin. If not, you should update to at least that version before proceeding any further.

Before the optin can display the shortcode it contains, the optins list in the OptinMonster API plugin needs to be refreshed. This needs to be done every time you add, edit or remove a shortcode from the optin.

Navigate to the WordPress Admin > OptinMonster > Optins tab view and select the Refresh Optins button.

Select the Refresh Optins button in the OptinMonster plugin to download the latest version of your optins to WordPress.

Step 3 – Go Live

Next, in the OptinMonster plugin, select the Go Live link for your optin to output the embed code across your site.

Enable your optin in the OptinMonster API plugin by selecting the Go Live link in the Optins list view.

Your refreshed optin code is now available across the site. Go to a Test Page where your MonsterLink is located. Click the MonsterLink and see if your optin loads as expected. If so, then you’re done!

To further stylize your optin, continue to step 5 below.

5) Styling Your Multiple Fields Gravity Form Popup

When you first see you optin popup, it may not look exactly as you have envisioned it, but it should be close. As you can see, my form shows up pretty well, but it could use some fine-tuning.

Gravity-Form-Optin-Without-Styling

You can see in the magnified view that my first and last name input fields are smashed together and the last name field doesn’t even end onscreen. Also the organization’s input field isn’t center. So what can I do?

If you follow our Guide for Styling CSS, you will know about how our CSS tool works. 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, then just add CSS according to our guide. I used the following which may be a good place for you to start:

html div#om-ptw8m2fkijhftb6x input {
float: left !important;
margin-right: 5px !important;
display: inline-block !important;
width: 100% !important;
}

html div#om-ptw8m2fkijhftb6x input[type=checkbox] {
width: auto !Important;
}

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

Gravity-Form-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? Get started today and boost your lead generation efforts.

Kevin Gates is on our Technical Support team, where he also writes user documentation and manages affiliates. In his free time, he seeks to expand his web development capabilities and he often volunteers for the Charis Foundation or he is learning Romanian.

Comments

  1. 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!

  2. 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 🙂

  3. 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!

  4. 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!

  5. 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.

  6. 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.