Creating a WordPress contact form using WP Form Builder plugin

WP Form builder is a great free WordPress plugin to help you easily build WordPress forms of all sizes, in this article we will take you step by step through creating a contact form, setting up email notifications, configuring field validation, and thanking the user for completing the form.

This article presumes you have the WP Form Builder plugin installed on your WordPress website and you have the correct permissions to access and create forms, if not you can get WP Form Builder here.

Creating the form

To start we need to create a form, all forms can be accessed via the Forms menu item within the WordPress admin area, under the Forms menu item click on Add Form as you would if you were creating a post or a page.

This will load up an empty form asking for the new form name, I will call it Contact form,  once entered and submitted you will be redirected to the edit for screen.

Adding fields to the form

On the edit form screen you should see a list of available form field types on the right hand column, and an empty column to the left this is where you will be adding/editing form fields in the near future.

To add a form field you can either click on the field type which will insert a field into the end of the field list, or you can drag a field type from the right column into the list of fields on the left which we will call the dropzone, while hovering the dropzone should have a dashed border indicating that you can drop the current field into position, on success of a field being added it should expand and show a list of options to set up for that field.

When adding a field, at minimum you should enter a field label, this is the text that will come before the field element on the form.

In this article we need to add the following fields:

  • Text field – set the label to first name
  • Text field – set the label to surname
  • Text field – set the label to phone number
  • Text field – set the label to Email address
  • Textarea field – set the label to Message

 

Once these have been added, let’s save the form by clicking the Update button in the top right hand corner. On success you should see a notification appear saying that the form has been saved.

If you go and click on the preview button next to the Update button a new tab should appear showing the last saved state of the form, this should display all the fields one after the other.

Let’s go and change how the first name and surname fields are displayed by making use of the custom class input on their field panels, you can toggle the display of each field panel by clicking on the arrow on the right hand side of the field box, once visible add the wpdf-half-col class to the first name field, and add wpdf-half-col-last to the surname field. When using these helper classes make sure to add wpdf-half-col class to the first field and wpdf-half-col-last to the 2nd of the two fields you are laying out together. Once done save the form, press the preview button again, and the first and surname fields should be displayed on the same row. You can easily use the CSS Classes input to customise the layout of the form further if you need to.

Setting up field validation

On previewing the current form you may have noticed that if you submit the form and leave all the fields empty then the form submits and shows a confirmation message which we will change later, but for now let’s force the user to enter some information before the form can be submit, to do this you may have noticed earlier at the bottom of each field panel there is a Validation Rules section, this section gives you the options to add a validation type by clicking the Add validation rule button and edit the message displayed below the field when the validation fails.

In our example set the following validation rules:

  • First Name – Required
  • Email Address – Required, Valid Email Address
  • Message – Required

 

Now when we save and preview the form, on submission of the form with no data the form should reload and display an error message at the top of the form, followed by a list of all the forms errors, then each invalid field is highlighted with the validation message below.

Since you know how to change the text of each individual validation message, we can also change the text and display of the error message displayed at the top of the form. To do this save changes made to the form, if required. Click on the settings tab and scroll down to the Form Errors section, here you can change the error text displayed and set whether you want to display all field errors at the top of the form, or just on the invalid fields themselves. Once done similar to the fields tab click on the update button to save your changes.

Contact Form Notifications

Now we have the form fields setup, it’s time to create email notifications which are sent on successful form submission. By default there is a notification setup which emails the main administrator of the website with a list of all fields with submitted data.

Form notifications can be created under the notifications tab, to add a new notification click on the Add Notification button at the bottom of the page. Similar to editing fields you can toggle the display of each notification by clicking on the toggle arrow on the top right of each notification.

Since notifications are emails sent out via the plugin automatically, their fields are similar to that of an email composer:

  • Send To – list of email addresses separated by a comma
  • Subject – Email subject
  • Message – Main email content
  • From – Optional Email From  Header
  • Cc – Optional Email Cc Header
  • Bcc – Optional Bcc Header

 

Notifications can include submitted form data by using a feature called merge tags, these tags are wrapped inside {{}} you can see from the default notification it uses {{admin_email}}, {{fields}} when the notification is sent out these will be replaced with live data, a list of all merge tags can be found within the manage notifications tab.

Confirmation Message

By default when the form is submitted a message is displayed thanking the user, this message can be changed via the Settings tab under the section Form confirmation. In this example we will be keeping the text the same, but you can easily change this via the field labelled Confirmation message.

Displaying the Contact form on a page

To finish off now that we have created the contact form, setup field validation and email notifications, all that is left to do is display the contact form on a page, Within the WordPress admin area navigate to the edit screen for the page you want to insert the form, Within the WYSIWYG editor a new button should have appeared, if you hover over it a tooltop should appear saying Add Form. Click on the Add form button and a modal window should appear with a dropdown field listing all your created forms, select the contact form we just created and click on the insert button at the bottom of the modal. Once complete a shortcode should be added to your page, the shortcode should look a little like [ wp_form form_id=”#” ].

For more information about WP Form Builders features and how to use it can be found at https://www.wpformbuilder.com/

 



Liked this article? help spread the word.