How to use Thrive Leads with Gravity Forms

How to Use Thrive Leads with Gravity Forms

I'm a huge fan of the Thrive Leads plugin for WordPress. I'm an affiliate of Thrive, so the links on this page will earn me a small commission if you click on them and end up making a purchase. That said, I'm a paid user for the entire Thrive family of plugins and utilize them throughout my website.

Creating lightboxes, screen takeovers, and all sorts of lead-generating tools is easier than ever with Thrive Leads.

A short while ago I had the idea to add a Gravity Form to a Thrive Leads lightbox to give my contact page a better user experience. I didn't want to gather an email and a name to drop into my Drip marketing list -- I wanted to actually use a contact form.

When I began tinkering with the two plugins I quickly realized how much CSS and coding knowledge was necessary to customize the look of Gravity Forms. Using Thrive Leads to create forms is so simple and easy because you can use the on-page editor to make changes in real time without having to know any coding. 

While tinkering, I discovered a way to use Gravity Forms with the default editor and lead capturing fields of Thrive Leads.

Check out the video below to see me walk you through this simple process.

Step 1
Create a form in Gravity Forms using whatever settings you desire. I like to have mine redirect to a 'Thank You' page so that I can use conversion tracking pixels and tags, as well as provide that user with more information after their submission.

Step 2
Create a Thrive Leads form, whether on a page using a lead generation widget or a Thrive Box. Leave this open in another tab.

Step 3
Go to your Gravity Form you made (open it in another tab) and click 'preview' to see a preview of your form. Right click in one of the fields and click 'Inspect' to see the code of the form. Right click in the code where you see the "<form..."

Step 4
Right click on the word "form" and navigate to Copy > Copy Element

Step 5
Go back to the tab with your Thrive Leads form and click on it. In the top left of the Thrive Architect editor, choose "Connect Form to Service", then click HTML Form Connect. Paste in the code you just copied and press continue. NOTE: Set the action variable to empty so that it looks like this: action=""  otherwise your validation errors may not work if you set the fields to required in GForm and in Thrive Leads.

Connect Thrive Leads capture fields to a Gravity Form

Step 6
Your Thrive Leads form should now automatically update with the form settings of your Gravity Form. You can use Thrive Architect to update the way your form looks. I have more details on that in the video.

Now your Thrive Leads form will not only submit to your Gravity Form, but anything your Gravity Form was configured to do will also execute. 

If you have any questions about how to use Thrive Leads with Gravity Forms, feel free to leave a comment below and I'll help you in any way I can.

Leave a Reply 10 comments

Grey - September 27, 2017 Reply

Hi Doug,

I use Gravity Forms for various different forms on my site.

I’m now about to start adding some lead magnets / opt-in boxes onto my site.

Why would I choose Gravity Forms + Thrive, instead of Thrive alone?

(I use ActiveCampaign)

Thank you!

Grey

    Doug Lundberg - September 27, 2017 Reply

    Hi Grey,

    If you’re just looking to gather a name and email address and feed those into your ActiveCampaign then I don’t see a need for you to use Gravity Forms in conjunction with Thrive Leads for your lead magnets. Just use Thrive Leads and you’re set.

    The main reason for using Thrive Leads with Gravity forms has to do with wanting the functionality of Gravity Forms (integrating APIs, storing leads in the WP database, and all of the other Gravity Form functions like paragraph responses) while still being able to integrate with the Thrive Leads features. One of the biggest reasons I use Thrive Leads with Gravity Forms is to customize how they look.

    I create 10 landing pages a week that all look different from each other, and my CSS skills are weak. Using a drag-and-drop editor like Thrive Leads means I can customize my Gravity Forms to look like just about anything.

Thierry Mazué - October 11, 2017 Reply

The main reason for me is the limit of API with ThriveLead. It’s limited to 3 fields: email, name and phone.
If this is enough for a regular optin form, it is not for Clients’ forms where I want to collect a bit more of information.

    Doug Lundberg - October 12, 2017 Reply

    Hi Thierry,

    I completely agree. That’s why I utilize Thrive Leads with another form processor like Gravity Forms or WPForms. I want all of the flexibility and customization of Thrive Leads (and their features of integrating quickly with email systems and lead magnets) while keeping the robust field options of the form processor.

Mark Brinker - October 31, 2017 Reply

Great video, Doug. Just what I was looking for. Thank you so much.

Yibeltal Adinew - November 19, 2017 Reply

Great tips! But how you handle the required field or validation Errors? It didn’t work for me.

    Doug Lundberg - November 20, 2017 Reply

    Hi Yibeltal,

    I’m getting this question a lot, so thank you for asking! I will update the post.

    In order to get validation errors to work, I recommend editing the form HTML to remove the “action” variable or leave it empty. I use: action=””.

    If you set the form fields to required in GForm and the Thrive Architect/Leads interface, and empty the action variable, then it should work for you.

bob - November 20, 2017 Reply

Hi Doug,

I’m currently running hidden forms for my gravity form. These hidden forms are being used to track the referral URLS (this includes Adwords, UTM Parameters etc).

After integrating it with Thrive Leads, I’m unable to track these referrals. Do you have a potential workaround for this?

Thanks!

    Doug Lundberg - November 21, 2017 Reply

    Hi Bob,

    Hidden fields can throw a wrinkle in things. I’ve had some success adding the hidden fields in manually into the form code, then going into the HTML of the Thrive Lead itself and editing the HTML there to add the hidden field as well. This works to send UTM codes and things like SOURCE to my mail service like Mailchimp.

    Have you tried making sure they’re present as hidden fields in the HTML Form code, and in the HTML of the Thrive Lead/Page itself?

Leave a Reply:







Create Op-Ins & Build Your Email List Faster Than Ever Before!