Over the years, Brandicoot has built many custom forms for their clients, from simple contact forms to online registration and booking forms that link to online payment gateways such as PayPal. Brandicoot clients that have access to their website dashboard also have the ability to create forms of their own. It is for their benefit that I am putting together this step by step guide.
This guide is going to run through how to make a simple contact form, adding in name, email and phone number fields as well as a text box that allows users to add in a message. It is a good foundation for building more complex forms.
1. Create a new form by going to Forms > Add New
2. Here you will see the form title “Untitled Form” with a description. Hover over it and click on the edit button. Rename your form “Contact Us”. For now we will leave the description as it is. Then close the form settings box (top right).
3. Now that you have renamed your forms you will see the field options on the right hand side. The two sections we will use today will be the standard field and advanced field sections.
4. As we are making a contact form, we are going to need some of the advanced fields. Click on the advanced fields drop-down tab on the right.
5. Click on the “Name” button. You will see that it appears over on the left hand side.
6. Hover over the name field on the left and the blue box will appear. Click on Edit. Now you will be able to edit the details of the name field. All we are going to do in here is click in the “required” box. This means that the person filling out the form has to add details to this field or the form cannot be submitted.
7. Once you tick the required box, close the name field and you will see that there is now a red asterisk next to the Name field. This means that it is a required field.
8. Add the email field and also make it a required field
9. Next we will add the Phone field. In here we will need to make a change as the default for phone numbers is in the American format. Open the Phone field and click on the “Phone Format” drop-down and select “International”. I have chosen not to make this a required field, but you may do so if you wish. The form you are designing may require a number in order for you to contact a client about their needs.
10. We are now going to add a section for the user to leave us a message. Click on the “Standard Fields” tab on the right hand side. From this list we are going to add the “Paragraph Text” option. As default this will be named “Untitled”. Hover over it and click on edit. Let us rename this “Your Message”. Let us make it a required field.
11. Our form design is now complete! There are only a couple of steps left before we can make it live. Click on the “Save Form” button on the right hand side. A menu appears. Click on “Setup Email Notifications for this Form”
12. In the email notifications section add the email address you wish to get notifications for when someone fills out the form. Scroll right down the bottom and click on save settings.
13. You can now add your new form to a page! All you need to do is go to the page you wish to add the form to and click on the gravity forms insertion button.
14. Select the form you wish to insert. Make sure the “Enable AJAX” box is ticked. The other 2 boxes are optional.
15. Update your page (or publish if a new page) and test out your form!
If you find that you are having a little trouble, or are wishing to build a more advanced form for your website, then please give Andrew, Chris or Simon a call on (08) 9745 9170 and they will be able to help you out.