Using Gravity Forms
Like Beaver Builder, Gravity Forms is a plugin that has exceptional documentation. So, rather then recreate the wheel we will be linking to lots of that.
Gravity Forms works hand in hand with Gravity Views. You can easily create complex forms using Gravity Forms and then make Views or tables so that user can view the data and even edit it.
The sections below reference documentation at the Gravity Forms site - however, Gravity Viewsalso has a great guide for learning it as well.
The basics of creating a new Gravity Form. If you need more info, check out their documentation. You can also watch a video.
You create a new form the same way your do a new post or new page. By either clicking the + New menu option in the top black bar and selecting Form from the dropdown.
Or go to the Dashboard and clicking New Form under the Form menu or click the Add New button on the forms listing page.
You will be shown a pop-up window asking for the name & description of the form. Fill those in and click on the Create Form button.
Finally, you'll be shown this page where you can drag and drop elements, set properties and do all sorts of cool things to make your form.
As you build your form - these are the field types that you can use. Stick to Standard and Advanced types of fields right now - if we need the other types we will spend some time learning how to use them as they are trickier then they appear! If you need more info - check out the Gravity Forms help.
- Simply click on the field type you want to add and drag it over to the form layout. You can create columns by placing fields side by side.
- Fields have four categories of Attributes:
- General: Field Label is the label for the field. For most fields you can set a length of input, type of input (input mask), if it is required and if there can be duplicates. A Description is extra text that shows up in a smaller font to explain the field and it's use if needed. Depending on the type of field there might be extra options. For DropDowns, Checkboxes and RadioButtons there is an Edit Choices button that allows you to enter the choices. You can have the Labels be the values that are stored in the Database or set a different value. Note - don't change mid-form use!!!
- Appearance: lets you set whether a placeholder is used - text that is displayed before they enter anything, where the field label and description are placed, custom validation message and custom CSS class. We do not use the latter two much.
- Advanced: Admin Field Label (never use), Default Value is useful for setting a default, Visibility means who sees it and whether to allow field to be populated dynamically. Again this last one is advanced.
- Conditional Logic: will talk more about separately. But you can set logic so this field only appear when it is met.
- Standard Fields are:
- Single Line Text: simple characters.
- Paragraph: multiple lines of text
- Drop Down: drop down box of choices
- Number: only numbers - can set range or format appearance
- Checkboxes (user can select more than one option).
- Radio Buttons: can select only one option
- Hidden (if you need to pass information to another form or use for conditional logic) This is a more advanced technique.
- HTML - allows you to place HTML formatted markup.
- Section - creates a section header. You can also apply conditional logic to all fields in a section by simply applying it to a Section.
- Page - makes a page break if you want a multi-page form.
- Advanced Fields that we use are:
- Name: defaults to first and last name - can set prefix, middle name, suffix
- Date: automatically requires a date - can select to use Date Picker, Date Field or Drop Down
- Time: similar to date but for time
- Phone: requires a phone number - can set format
- Address: requires an address - can set format. Can easily display Maps based on this input.
- Website: requires a valid URL
- Email: requires a valid email address
- File Upload: allows you to upload files to the website.
- CAPTCHA - check for spam.
- Post Fields are used to automatically create WordPress Posts - advanced.
- Pricing Fields are use if we are selling items - not yet!
- GravityView - advanced - fields to use with GravityView
A great way to see how to create a gravity form is to watch this animation on the Gravity Forms site. It shows you clearly how you drag and drop and use columns!
You can set Settings for Gravity Forms as a whole or for individual forms. Here we are talking about them in individual forms.
The type of settings can change depending on what add-ons you have installed. Here are the basics ones:
- Name of the Form
- Description of the Form
- Layout - default placement of labels & descriptions
- Save & Continue - only works well if they are logged in
- Restrictions - again only used in advanced cases.
- Form options - leave all not set except for Enable Inline Edit. This allows us to directly edit fields in Data Tables or Views.
There are more complicated settings that we only use for special cases. You can read more about them here.
Finally, because we use Gravity Views there is one setting that shows up for that called Allow inline-editing. We set this to be valid if we create a table or view of the form data and want to allow it to be updated.
The Form List Page displays a list of all your forms. You can easily check here to see what is going on with all your forms. You can access this by clicking on Forms->Forms on the Dashboard.
In the screen above, you'll notice when you hover over a form - a whole menu appears.
- Edit - allows you to update the layout of the form.
- Settings - allows you to change the basic Settings of the form like name, description and overall preferences.
- Entries - allows you to view, edit and delete entries for that form. Learn more here.
- Connected Views shows a list of all Views or Data Tables created based on that form. You can select a View to edit it.
- Create a Calendar - right now is only use with the Add an Update form to add events to the website calendar.
- Preview lets you sneak a glance
- Trash lets you delete but still keeps the form accessbile
- Duplicate will duplicate it so that you can create another form based on a current one.
Check out the Gravity Form documenation for a more complete explanations of how you use the form list to find and edit a form.
Conditional Logic is one of the most powerful tools of Gravity Forms - or so I think. It let's you do certain actions based on certain conditions.
Like if a user is filling out a form and it ask if they are a teacher, student or parent - it can then show them different fields to fill in. Or it can direct where the contents of the form are sent based on an answer. There are so many cool things to do with it.
You can set and use conditional logic to show fields on the form, to determine what kind of notification is sent after the form is submitted, what happens after the form is submitted - are they sent an email? send to another page? shown a message? It can also be used to sign users up for mailing lists and other cool things.
Take a minute and look at the documentation.
There are two ways that you can add a form to a page.
-
Edit Page: Add Form button:
- If you are Editing a page without using Beaver Builder, there is an Add Form button at the top.
- You can click that to display a drop down and add a form to your page.
- It will put in a shortcode which is a bit of WordPress code that allows you to easily add functionality to your site. The shortcode looks like this:
Sorry. You must be logged in to view this form.
- The id identifies what forms. You can see a list of all forms used on the Jackson-Reed website with their information here.
- If you set title = "true" the title of the form will display on the page - same for the description.
2 - Paste the shortcode in the page.
- If you are using Beaver Builder, the easiest way to add a form is to paste the shortcode. Follow the explanation above to do so.
Gravity Forms comes with lots of add-ons or extra tools. Some of them are created by them and some are created by third party vendors. Here are the ones that come with Gravity Forms that we use:
- Advance Post Creation: allows you to use inputs from a form to create a WordPress post. You can see an example of this in our Add a News Item page. This creates a post and lets you assign it a title, body, image, category and tag so that it shows up in the right place. It also allows you to designate if it has a date and should go on the calendar. If so, using Conditional Logic, it allows you to enter a date and then adds the event to the calendar.
Right now that is the only one that is turned on but at some point we will turn on either the Square or PayPal Add On to allow for payments to be processed. We will also turn on plugin to sync email addresses with our mailing service once that is designated.
Third Party Tools
We also use Gravity Perks suite of tools. Right now we use GP Copy Cat and GP Easy Pass through. We will probably use other Perks as we get going like GP Auto Login, GP Limit Choices and more fun things. You can read more about these tools here.