This article was originally published on this site

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!

The post How to Add Multiple Fields in OptinMonster with Gravity Forms appeared first on OptinMonster.