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

    Doug Lundberg - October 31, 2017 Reply

    Glad that I could help, Mark.

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?

Rob - February 8, 2018 Reply

Hi Doug,

Very helpful post – thank you for publishing it.

I’m curious about how you would handle a text-based confirmation vs. redirecting to a thank-you page. I need the confirmation message to appear within the ThriveBox after the user submits their form. That way, when they dismiss the ThriveBox, they remain on the page where they started.

In my setup, I’ve got my Gravity Form confirmation settings specified as type “text”. But when I submit an entry via the Thrive Box, I’m redirected to a Gravity Forms preview page displaying the confirmation text rather than seeing that text populate within the Thrive Box.

Any thoughts?

    Doug Lundberg - February 8, 2018 Reply

    Hi Rob,

    To fix the issue of it redirecting to the gravity forms preview page you just need to remove what’s within the quotations after the action=””.

    You can see an example in this post in Step 4.

    If you’re using a light box you may have success telling it to change states upon completion (using thrive leads), but that’s not something I have tested. Otherwise, you can simply choose the on-page confirmation. option within Thrive and that should work.

nic - February 25, 2018 Reply

Hi!

I tried, but the names inside the boxes disappear, the order changes, for example “accept terms” etc. It does not look the same. Are there any solutions?

how come it does not work with the shortcode? there is no simpler method?

Thanks . Thrive Architect (2.0.24) Thrive Lead (2.0.26) GF (2.2.5.21)

    Doug Lundberg - February 25, 2018 Reply

    Hi Nic,

    Using the shortcode requires your theme’s CSS to be set up properly for Gravity Forms. In most cases, it’s simply not. That’s hwy it doesn’t work well at all, and why it’s even more complicated than using Thrive Leads.

    This method with Thrive Leads allows you to add the names in the boxes, set any order you’d like, and even have term acceptance via a checkbox that’s required. You simply need to copy and paste in the form HTML as shown in the video, then make all of those tweaks with Thrive Leads.

      Nic - February 27, 2018 Reply

      Thank u Doug but..I tried, but the names inside the boxes , in thrive lead disappear, the order changes, for example “accept terms” etc. It does not look the same.
      something wrong ?

        Doug Lundberg - March 1, 2018 Reply

        Sounds like there’s something else wrong unrelated to Thrive Leads and Gravity Forms. Perhaps a caching issue or a plugin conflict.

Dan Stephens - April 18, 2018 Reply

Great video! I have been looking for ways to do this for a long time!

I hope to use a number of advanced forms (I’m a counselor, so checkboxes and likert scales are really helpful in my use case). I’m having a problem with the order of the GF form fields getting out of order when I paste the code into thrive leads. It’s also not showing the field descriptions, only the placeholder text. Any suggestions?

Thanks again!

    Doug Lundberg - April 19, 2018 Reply

    The order being shuffled does happen for some reason. You can simply edit the field and drag & drop them into the correct order. I’ll play around with field descriptions to see what I can come up with. I typically don’t use those with Gravity Forms.

    Checkboxes and dropdowns have worked for me in the past, but I have big doubts you’ll get a likert scale to work with Thrive Leads without having a coding background.

Thank you! - April 29, 2018 Reply

Great advice! Thank you for publishing this!

Akash - May 8, 2018 Reply

Does anyone know if I’m able to use GF within a Thrive Lightbox? I own a cleaning company and I want visitors to click on my CTA, then have a GF take over the entire screen like Thrive Lightbox does. I then want the user to input all the info i require and then pass this info onto my booking/quote page.

I hope this is possible. I using the GF demo, but there’s no way I can test it with Thrive.

Thanks.

    Doug Lundberg - May 9, 2018 Reply

    Hi Akash,

    I regularly create GF forms in lightboxes and have them redirect. In terms of passing along variables, I assume that’s doable but would depend on your booking/quote page.

Tristan - May 25, 2018 Reply

Hi Doug, I am having an issue where my field titles are not showing above my radio buttons or the input fields. Here is a link to it: https://www.imagesthatcaptivate.com.au/portfolio-builder-giveaway/?preview=true

Any assistance would be greatly appreciated.

Great work also

Thanks

    Doug Lundberg - May 25, 2018 Reply

    This is a really good question. You may not have noticed this, but you actually can’t add Field Labels above fields (or below them, or do the side) in ANY Thrive Leads / Architect forms. In fact, the only labels you can even use for fields are Placeholders.

    Their HTML form API doesn’t parse any of that HTML we need to use to make it happen. I’m experimenting with a few things and I’ll get back to you if I can make it happen. I might also read out to Thrive support and see what they have to say on the subject. A few people have already posted in in the support forums, but the support has just repeatedly not understood and told them to just edit the placeholder text.

Bill Cook - July 24, 2018 Reply

Thanks for putting this information out there, it really helped me get through a problem integrating the forms with Thrive Themes.

One thing I am still having trouble with and thought I would ask is my lightbox seems a little big for mobile devices and it doesn’t scroll well. Have you had success with any larger forms on mobile? My workaround is to remove the buttons on mobile through Thrive Architect and add another button that only shows up on mobile to direct them to a non Thrive Architect page with the original Gravity Form.

Thanks,
Bill

    Doug Lundberg - August 3, 2018 Reply

    That’s a UX issue that gets a lot of people. If you use a lightbox with a form, you’re going to struggle with longer forms. I ran into that issue on a site that wasn’t even using Thrive. 🙁 I would recommend you simply don’t use lightboxes for long forms.

zach - August 9, 2018 Reply

is there a way to get this working with thrive quizzes?

    Doug Lundberg - October 18, 2018 Reply

    Integrating Thrive Quizzes with Gravity Forms is not something that would be easily doable like this.

Craig Elias - August 12, 2018 Reply

Thanks for this.

I’ve been looking for a landing page plungin compatible with Gravity Forms for a while now.

Is thrive leads network compatible?

Want to run a landing page competition with aspiring entrepreneurs from colleges and universities and have them use sites that are sub domains of the main site.

    Doug Lundberg - October 18, 2018 Reply

    Yes, Thrive Leads is compatible with Gravity Forms.

Leave a Reply:







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