Gravity forms is my go-to form builder plugin. I always recommend it to clients who want a little more than what Thrive Leads is capable of. I love it for its simplicity and its large variety of customizable form fields.
Gravity Forms however comes with very basic styling and I realized that every time I would set up a gravity form for a client, I would have to spend time doing manual styling adjustments with CSS, to get the gravity form to match the styling on the site.
On the other hand, Thrive Leads forms have great flexibility when it comes to styling options, but is limited to only name, phone and email for its API fields. The few API fields offered by Thrive Leads are enough for a basic form, but are a great limitation if you want to collect a bit more information.
That got me wondering if there was a way I could marry the two so I could get the best of both worlds. The customization power of Thrive leads and the vast field options offered by Gravity forms. Sure enough, Thrive leads can be integrated with Gravity forms. Here's how.
STEP 1
Find Gravity forms in the WordPress toolbar and click ‘new form’. Create a form by giving it a name and click 'create form".
STEP 2
Create your form fields by dragging and dropping them into the form builder. You can either use the standard form fields elements and customize them or use the advanced fields that are already customized for you. Then click save form.
STEP 3
At the top right corner, you will see embed, preview and save form buttons. Click the preview button. This will open the form preview in a new tab.
STEP 4
In the gravity forms preview tab, right click anywhere within the preview form and click inspect. This opens a development window. Look for a line starting with <form. Right click on the word 'form' and then click 'copy element'.
STEP 5
Now go into thrive leads and create a form with the same fields you had in the gravity form.
STEP 6
In the left toolbar, under the connection section, click ‘HTML code’ and paste the line you copied from the gravity form preview tab. Now click 'generate form' then click save work.
STEP 7
Last but not least, set the action variable to empty so that your validation errors work if you set any fields to required. The action variable should look like this action="/", or should include the url of the redirect page upon submission. So you can use something like action="/thank-you/" or simply action="/"
All done now. Going forward, your Thrive leads form is now integrated with Gravity forms. Thrive leads will pass subscriber information to gravity forms, while Gravity Forms continues to execute anything you configured it to do. You can now also go ahead and style the thrive leads form to match your site styling.
If you have a question or if you know any other Gravity Forms-Thrive Leads tricks, leave me a comment below.