CREATE A WEBSITE

How to Add a Contact Form to Your WordPress Website – Short Course

By Philip Yiga | June 23, 2017

Adding a contact form to your WordPress website will enable people to contact you about the services and products you’re offering online. In fact, adding a contact-form into your WordPress website doesn’t require any code-knowledge but you will just have to install a contact-form WordPress-plugin. So, in this article I will show you how to create a contact-form in WordPress without writing any code.

Choose the best WordPress Contact Form plugin: when you think of a putting a contact-form onto your website, then that first thing you should do is searching and choosing the best WordPress contact form plugin. In fact, there are multiple free and paid WordPress contact form plugins to choose from but you should consider using “Contact Form by WPForms” plugin because it’s one of the best contact-form plugins on the market today. On the other hand, the WPForms plugin is free of charge and you can use it to create simple contact-forms but if you want to use several powerful features when creating a contact-form then you should consider upgrading to “WPForms-Pro” for best results.

Search and install “Contact Form by WPForms”: in order to install the “Contact Form by WPForms” plugin, you will need to log into your WordPress-account and go to Dashboard >> Plugins >> Add New and then a new window will open-up including a search-tab. So, in the search-tab type in “WPForms” and the “Contact Form by WPForms” plugin will appear first on the search-result list. Afterwards, press on the “Install Now” button in order to start installing the plugin as shown in the illustrations below:

Below is an illustration on how to install the “Contact Form by WPForms” plugin onto your WordPress-account;

After installing the “Contact Form by WPForms” plugin, an activation button will appear and you will just need to click on that button in order to activate the plugin as shown in the illustration below;

Create a new contact-form: after activating your WPForms plugin, you will be capable of creating a new contact-form in WordPress. So, go to Dashboard >> WPForms >> Add New and then a new window will open up in order to help you create a new-form as shown in the illustrations below;

after clicking on the “Add New” button, the WPForms builder open-up and it’s from this section that you will have to give your contact-form a name and after select a preferred contact-form template as shown in the illustration below.

Note: the WPForms plugin comes with 4 pre-built form templates that you can use to create any type of form like a Contact-form, Newsletter Signup-form, Suggestion-form and a lot more with a Blank-form. However, in order to create a contact-form you will need to select the “simple contact form” option because it will help add the Name, Message and Email fields that can be easily filled by the website-users as contact-information.

Edit the contact-form: after clicking on “create simple contact form“, a new window will open-up in order to enable you do some editing. So, you will be able to add other options to your contact-form which include single-line text, paragraph text, checkboxes, numbers, multiple choices and a lot more. Additionally, you will even be capable of editing each of the specified options by giving them your own titles and parameters. In fact all this will be found in the “Fields” section as shown in the illustrations below;

Although you can simply select a new-field to add to your contact-form form the standard-field section, the other customized fields found in the “Fancy Fields” and “Payment Fields” section will have to be paid for by simply upgrading to the PRO-version of the WPForms plugin and below is an illustration on how to do so.

Click on any of the fields above in order to access the upgrading page so that you can gain access to all the fields and features as shown in the illustration below;

Editing a particular field within a created contact-form: you will need to click on any added field within your contact-form in order to access the editing-window. So, below is an illustration on how to edit a particular field within your contact-form;

Or you can even click on “Field Options” in order to edit any selected field within your contact-form as shown in the illustration below;

Note: after clicking on different fields within your contact-form in order to carry-out some editing, you will now have to press on the “SAVE” button to keep the created contact-form as shown in the illustrations below.

Locating the saved contact-form: in order to locate your saved contact-form, you will need to go to Dashboard >> WPForms >> All Forms and then you will be able to view your saved contact-form. So below is an illustration on how to locate and view your contact-form after saving it.

Configuring the contact-form notification and confirmations: after crating your contact-form, you will now need to configure the “Notification” and “confirmations” settings. In fact, a notification is the email you get after someone submits a contact-form to WordPress website while a confirmation-message is what a website-visitor sees after submitting a contact-form. So, a confirmation could be any thank you message or you may even decide to redirect the visitor to a special-page within your website. all in all, in order to access the notification and confirmation settings you will need to go to the “Settings” tab within the WPForms builder as shown in the illustration below;

However, most people tend to leave the form-confirmation as a default thank-you message but you can even redirect the confirmation-type to a specific Page or URL as shown in the illustration above. All in all, the default WPForms-settings are ideal for beginners and you will actually find both notification and confirmation fields pre-filled with values automatically but remember to press the “SAVE” button in case you have made any changes.

Add the contact-form into a website page/post: when you’re done with configuring your WordPress contact-form, you will now have to embed it into any desired WordPress page/post. So, create a new page/post or open an existing post/page in WordPress and then add the contact-form shortcode. So, just click on the “Add Form” button at the top and then select the form you want to add to your post/page as shown in the illustration below:

Below is an illustration of a new-window that will open-up so that you can select a preffered contact-form and after press on “Add Form” button inorder to add the contact-form into your post/page.

Below is an illustration of the added contact-form short-code into your post/page and where to press in order to save contact-form;

Preview the created contact-form: after inserting the contact-form shortcode into your post/page and saving-up any changes made to your post, you will now be able to preview your post/page in order to make sure that the contact-form is functioning properly as shown in the illustrations below;

So, if you only wanted to add a contact-form on one page/post then you will be done now.

Adding a contact-form widget to the sidebar: the Contact Form by WPForms plugin includes a contact-form widget that can be used to add a contact-form in the sidebar or any other widget-area of every post/page. So, in order to add this contact-widget, just go to Dashboard >> Appearance >> Widgets and then search for the WPForms-widget. after seeing it, click and drag it to any widget-ready area on the right as shown in the illustrations below;

Below is an illustration on how to drag your WPForms-widget to any widget-ready area;

Below is an illustration showing the WPForms-widget dragged and dropped to the “Footer Bottom Column Four” widget-area. But remember to press on the “Save” button in order to save-up your widget.