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.
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.
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.
After you add the fields you need, you’ll have a live form with an ID number. In our case, it’s form 14.
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.
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.
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.
Then, add your Gravity Forms shortcode to the 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.
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.
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!
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.
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:
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.
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!