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.
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.
Create a Thrive Leads form, whether on a page using a lead generation widget or a Thrive Box. Leave this open in another tab.
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..."
Right click on the word "form" and navigate to Copy > Copy Element
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.
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.