Graphic Design Bunbury, Website Design Bunbury, Graphic Design, Website Design, Website Designers, Website Developers

Brochure Design | Branding Agency | Brand Development | Logo Design | Business Cards

Bunbury | Busselton | Dunsborough | Margaret River | South West | Western Australia

For graphic design, website design, logo design, in Bunbury, Busselton and the South West of WA, call Brandicoot on 08 9745 9170

How to Create Custom Forms

How to Create Custom Forms

Brandicoot are masters of building custom forms for their clients, from simple contact forms, questionnaires, and online registration and booking forms that quickly and easily integrate with a variety of third party services such as PayPal.

Brandicoot clients that have access to their website dashboard also have the ability to create simple and effective forms of their own using the Forms option on your website dashboard.  No drudgery, just quick and easy form-building. Select your fields, configure your options and easily embed forms on your website. That’s way more satisfying (and less fattening) than a peanutty candy bar any day.

As you already know, Brandicoot love making life easier for our clients, so we have put together this step by step guide to help you on your way to creating customised forms for your website.

Build a Contact Form Step By Step

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.  This is a great overview of the basics and will provide a good foundation for building more complex forms.

1. Create a new form by going to the “Forms” menu on the left hand side of your  website dashboard and then click “Add New

2. This will open the “Create a New Form” popup. Name your form “Contact Us” and enter a description (example: We would love to hear from you! Please fill out this form and we will get in touch with you shortly.) Then click the “Create Form” Button.

3. Now that you have named your form you be on the form editing screen.  Have a look on the right hand side and you will see the Field Options. The two sections we will use today will be the “Standard Field” and “Advanced Field” sections.

4. We are making a contact form, so 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 now appears over on the left hand side.

6. Hover over the Name field on the left and the blue box will appear.  Click the triangle on the top bar to open the editing options.  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 in the bottom left hand side.  This means that the person filling out the form must add details to this field or the form cannot be submitted.

7. Once you tick the Required box, close the name field by clicking the triangle on the top bar 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. Head back over to the Advanced Fields and add the “Email” field.  Edit the Email Field to Required.  It is very important to make the Email field “Required” so you can reply to your customer online.

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”.  We have chosen not to make this a Required field, but you may do so if the form you are designing requires a number in order for you to contact a client about their needs.

10. Finally, 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” field. 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. Click on the “Update Form” button on the right hand side.  It’s probably a good idea to have a look at the form, head to the top of the page and click “Preview”.  This will open the form in a new window, use this page for testing out your form.

Your form design is now complete!  But before you celebrate too much there are a couple of steps left before you put it onto your website.

12. At the top the form editing screen click on “Form Settings”. head to the “Notifications” section and replace the “Send To Email” default “{admin-email}” with the email address you wish to receive notifications to when someone fills out the form.  Scroll right down the bottom and click on “Update Notification”.

Now its time to add your form to a page!  Open to the page or create a new page that you wish to add the form to.

13. Click on the “Add Form” button.

14. Select the form you wish to insert and tick the “Enable AJAX” box, this will help your page load faster.

15. Update (or publish) your page and test out your form.

Congratulations your form is now live on your website!

Need a little help?

If you are having any trouble, or wish to build a more advanced form for your website, don’t hesitate to get in touch the Brandicoot team today!