Create advanced form in Listable with Gravity forms

In this tutorial we are going to continue enriching the Listable template.

In the previous tutorial we saw how add a button to request a quote on each tab.

In this tutorial we are going to create the form that users will find when they click on the button to request a quote.

To follow this tutorial you need the Gravity Forms plugin. You can buy Gravity Forms for $39/year or download it for free from the premium area if you are a member. You can register for €10/month here and you can unsubscribe at any time

One feature that we need from our form is to know from which file the query is made. Gravity forms allows us to automatically fill in this information as we will see next.

Once we have installed Gravity Forms, it will appear on the side of the WordPress administration area “Forms” –> New Form.

We click, we create a new form and we will have a screen like the following:

On the right we see the fields that we can add.

In our case we are going to add a field in which the name of the establishment will appear from when you click to get to the form. And we will do it automatically.

Within "Standard Fields" we click on the field type "Text Line", the field information will open. In the General tab we fill in the “Field Label” field with the name we want. In my case "Company".
We click on the "Advanced" tab, select the option "Allow the field to be filled dynamically" and in "Parameter name" we add the variable name we want, in my case "clinic_name".

We add the rest of the fields that we need, such as Name, Email, etc…

We can also make the Email field automatically populate for logged in users.
To achieve this we create an advanced field of the type "Email" and in the Advanced tab in the "Default value" option in the drop-down we add the option {user:user_email}

Once we have the form to our liking, we create a page and add it to it.
We create a new page, click on "Add form", select the one we have created and the form code will appear below:

And the result would be the following:

We can see that the email field has been filled in automatically but the Company field has not yet.
Why? because I have to add the variable in the button binding of each tab.

If the link of your form is /form-contact, what you have to do is add the variable of the specific company to the end of the url, that is, /form-contacto/?name_clinic=whatever

The result would be:

In other words, our button to request a quote:

We have to put the url of the contact followed by the variable with the name with which we want it to be filled:

And if you've made it this far, you already have a slightly smarter form 😉

All the best
Oscar