This is a step by step guide/tutorial with images on how to install, setup, configure and use the free version of ‘Contact Form by WPForms’ WordPress plugin.

The ‘Contact Form by WPForms’ is of the most popular WordPress plugin to setup and create one or multiple customisable contact forms for your WordPress website or blog. It’s ideal for beginners since its very easy to use a contact form builder with drag and drop functionality. You can create simple and advanced contact forms. Contact Form by WPForms is in use by 3+ million active websites with 5 star rating reviews.

How to Install Contact Form by WPForms

To install, go to ‘Plugins > Add New’ and on the top right corner next to ‘Keyword’ type ‘Contact Form by WPForms’. Wait for the plugin to appear and then click its ‘Install Now’ button. Wait again until you see the its ‘Activate’ button and click it.

how to install contact form wpforms

 

Then select select from the WordPress left menu the new entry ‘WPForms > Add New’.

how to add new contact form wpforms

 

This step is about creating a basic simple contact form. Type in the ‘Form Name‘ field the new name you wish for your contact or newsletter form. Take your mouse on the box ‘Simple Contact Form‘ and the click on ‘Create Simple Contact Form‘.

how to create simple contact form wpforms

 

A new window will appear as below.On the left, in the tab ‘Add Options‘, you will see the ‘Standard Fields‘. You can drag and drop with your mouse this fields to the contact form on the right and place them where you want.

If you don’t wish for example the field ‘Name’ to be part of your contact form, you can delete it by clicking the red trash can symbol on the right. If alternatively you wish to edit the ‘Name’ filed, then take your mouse on top of this field until you see the grey box ‘Click to edit. Drag to reorder’. Click on it.

how to edit contact form wpforms

 

You now work on the tab ‘Field Options‘. If you wish to disable the ‘Last Name‘ in the contact form, select in the field ‘Format’ (No 3) drop down menu the option ”Simple’. The contact form result is show below. Enabling the option ‘Required’ (No 3) forces the user to complete respective field and a red asterisk will appear next to the edited field. The ‘Field Size’ option (No 4) increases or decreases the size of the edited field. When you finish the complete contact form editing, click the ‘Save’ button (No5).

how to edit field contact form wpforms

 

Selecting ‘Settings > Notifications‘ from the side left menu, allows the editing of types of notifications. For example, in the Field ‘Send to Email Address’, you can add a second email recipient by adding the an additional email separated with comma. The [admin_email] is the email that is defined in WordPress menu ‘Settings > General’ in the field ‘Administration Email Address’. Check it that is the correct email address.

how to setup notifications email contact form wpforms

 

Selecting ‘Settings > Confirmations‘ from the side left menu, allows the editing of types and form of notifications.The field ‘Confirmation type’ offers 3 options, as confirmation page that will be shown after the message is send. ‘Message’ which is pre-written text as shown below.  ‘Show Page’ allows the selection of a pre-made WordPress. ‘Go to URL’ allows the insertion of a custom url address.

Now it time to save the new contact form you made by clicking the orange button on top right corner.

how to edit confirmationmessage contact form wpforms

 

How to Create a Contact Form Page

The final step is to create a page that will contain the WPF contact form you made. So, create a WordPress page, name it ‘Contact Form’.Then click the + symbol (No9). Type in the field ‘wpf’ (No10) to find the widget option ‘WPFroms and click on it (No11).

how to create page with contact form wpforms

 

Then select from the drop down menu the name of the contact form you created and named (in this case it is ‘Simple Contact Form (ID $24’).

how to select form contact form wpforms

 

The next image shows the contact form you selected. Then ‘Publish’ the page.

create page with contact form wpforms

 

The final website page called ‘Contact Form’ will look like this to the page visitors:

final contact form wpforms

 

Next step is to add the page you created in the menu so that it is visible to every website visitor. Do that from the menu ‘Appearance > Menu’, find the page/post named ‘Contact Form’, click ‘Add Menu’, ‘Save menu’.

Congratulations. You made it.

Final Very Important Details to Fix Potential Emailing Problems

If you send a message from the contact form and it says message sent but it is not working (ie if you don’t receive the message by email), then check your email server settings in WordPress menu ‘Settings > Writting’. If you still have email delivery problems, then use the WordPress plugin WP Mail SMTP (1 million WordPress users use it for this WordPress ‘reason’ …..). This plugin uses the method of sending emails with the SMTP protocol instead of PHP. In the WP Mail SMTP setting enter your email servers email settings (ask your domain/email package provider to help you if you don’t know what that is).

Interested for an alternative contact form plugin? Read How to Setup and Use Contact Form 7 WordPress Plugin.

Back to the list of The Best WordPress Plugins