Are you looking a way to create a contact form and add it to your WordPress website without any coding skills?
WordPress Live Form is the ultimate solution for building any type of form such as contact form, subscription form, client review form, payment form, calculators, WooCommerce form etc. within a few moments.
In this article, we will explain how you can create any type of contact form by using the Drag & Drop Form Builder.
Why You Should Use A Contact Form On Your Website?
Whether you are running a business or launching a website, it’s crucial for you to reach your customers easily. More specifically, a simple contact form is the first step for attracting more customers. With it, you can ask any question about your service or collecting emails from your clients.
If you use a contact form it will reduce all the spam emails from your website. To add more, you will also save your times and effort and help to get all the information you need through the contact form.
Let’s know how you can create a contact form with the live form plugin.
How To Create A Contact Form In WordPress With WordPress Live Form Plugin?
Here, you can use either the Free or Paid version of the plugin. The free version includes the main features that require to create a contact form and configure the form wheres the paid version provides some extra exclusive features such as advanced fields, payment fields, MailChimp connect and much more.
Step 2: Create a Contact Form in WordPress
Once you have activated the plugin, a new option “Forms” will appear in your dashboard. Now, for building a new form, navigate to Form► Add New option from the admin dashboard.
After clicking on the option, a new window “Builder” appears to you with lots of customization features and settings. On the right of it, you will also find an option named “Settings” to more customize your form. We will describe more details for each option and settings below:
Form Name:
For building a new form, you have to give a meaningful name of the form. Here you can do this by the Form Name option.
Button Label:
Button label is mainly used to clearly explain what the button does. It means it actually describes your users what happens when they click on the button. In this field, you will find the label of the button is submitted by default. But you can change the label by writing anything you want as Apply, Done etc on it according to your need.
Button Color:
Here, you can choose the color of your button from the drop-down list. There are 7 colors you will find for the submit button.
Button Size:
In this field, you can select the size of your button from the four prebuilt button sizes. These are- Default, Large, Small, Very Small.
Button Position:
If you need to change the position of your button in the form, you can use this option. There are four prebuilt positions (Right, Left or Center, full width) appears from the drop-down list. You can choose one where you want to see the button on your new form.
On the left column of this window, you will also view two other settings options name – Field and Field Settings. This option basically allows you to add a new field on your form.
In the field section, the plugin provides some preformed fields (Commonly Used Fields, Generic Fields, Advance Fields) where you can view lots of pre-made field box that helps to create the form within just a few moments. Moreover, You can use these fields to build any type of form you like.
If you are using the free version of this plugin, you can use the commonly used fields, generic fields. For using the advance fields, you have to use our pro version.
Commonly Used Fields:
All the needed fields for building a new form will appear in the Commonly Used Fields. You can use these basic fields ( Name, Email, Subject, Message) in your form by drag and drop order with your mouse. All these fields also offer some exclusive field settings to make your work easier and fast. In addition, for more information on the basic common fields and its customizing feature, you may take a look at the Commonly Used Fields type documentation.
Generic Fields
Below the Commonly Used Fields, you will find an option of Generic Fields where lots of other preformed fields you will find. These fields are-
Text
Textarea
Number
Radio
Select
Checkbox
To add this field in your contact form, you need to just click on the plus (+) icon of the field or drag-and-drop them into the main editing area.
Like the commonly used fields, these generic fields also provide amazing settings option for customizing your form. To clarify, You can check our documentation about Generic Fields to get to know more about it.
Once you have inserted all your required field in the form, click on the Save Form option to save all these changes.
Step 3: Configure The Form settings
After creating your form, its time to configure your contact form properly. To do this, you will need to go on Settings options from right over the Builder window. Once you have clicked on the Settings button, you will see a new window opened where you can set up some additional settings for making your form fairly.
Now in the Form Settings, you can write your form description, submission message of form submit and even you can set up a page that appears to your customers when they submit the form. Here, we have described the settings in details below:
Form Description:
Here, you can write a short description of your form. Also, you may add some HTML settings given upper the description or code in your form description. This description shows below to the form name to your users.
Successful Form Submission Message:
In this box, you can write the message which will be shown to your users when they submit the form. By default, it shows a “Thank You” message. More even, you can add a picture as a message through it to your users.
Redirect to:
This feature allows deciding which page your users see when they submit the form. It provides three options as a redirect to the same page, custom page or custom URL. You can choose what you need from these three options.
Step 4: Add Email Notification on your contact form
Do you want to get email updates every time when someone submits a contact form to your site?
You can add this feature on your contact form by the Email Notifications tab right after the Form settings. Further, If you need to send the form submission to multiple email addresses you can do this by adding multiple email addresses separated by a comma.
For more details, you can check our documentation about Email Settings for setting up the email notification.
Step 5: Set up the Contact Form Template
If you want to set up the form template you can do this from the UI settings tab right over the Email Notifications tab. Here, you can set up your form width as pixel or percentage through the Form width option. Moreover, you may set up your template design from the two prebuilt design (card, default).
Make sure you have click on the Save Form button after doing all these changes.
Step 6. Add the Contact Form in a WordPress Page
Now, after all the configuration of your contact form, its time to show it to your desired page/post. To do this, at first, go to Forms► All forms and copy the shortcode of the newly created form from the list.
Further, go to your desired page/post and paste the code in the edit box. If you have not created any post or page then go to Pages ► Add new or Post ► Add new and paste the shortcode to the edit box. After pasting, click on the publish button to appear the page to your users.
Here’s what the form would look like on a sample WordPress page:
That’s it. Now you have created a contact form in WordPress using WordPress Live Form with zero coding knowledge.
If you have any question related to it you may ask in the comment section. We appreciate further comments, support or suggestions!
Sidratul Sohrat
I am Sidratul Sohrat, a dedicated content writer with a fervent passion for creating engaging and informative content related to technology, business, and marketing.
Things That Shouldn’t Be On Your Forms
Make A Smart WordPress Form With Conditional Logic
Are you looking a way to create a contact form and add it to your WordPress website without any coding skills?
WordPress Live Form is the ultimate solution for building any type of form such as contact form, subscription form, client review form, payment form, calculators, WooCommerce form etc. within a few moments.
In this article, we will explain how you can create any type of contact form by using the Drag & Drop Form Builder.
Why You Should Use A Contact Form On Your Website?
Whether you are running a business or launching a website, it’s crucial for you to reach your customers easily. More specifically, a simple contact form is the first step for attracting more customers. With it, you can ask any question about your service or collecting emails from your clients.
If you use a contact form it will reduce all the spam emails from your website. To add more, you will also save your times and effort and help to get all the information you need through the contact form.
Let’s know how you can create a contact form with the live form plugin.
How To Create A Contact Form In WordPress With WordPress Live Form Plugin?
Step 1: Install the WordPress Live form Plugin
Before installing the plugin, we will suggest you read our article about the complete overview of the WordPress live form to know the amazing features of this plugin.
Now, to start, open your WordPress dashboard and install the WordPress Live Form from your plugin library. To certainly, you can check out the step by step guide about installing and activating WordPress Live form plugin.
Here, you can use either the Free or Paid version of the plugin. The free version includes the main features that require to create a contact form and configure the form wheres the paid version provides some extra exclusive features such as advanced fields, payment fields, MailChimp connect and much more.
Step 2: Create a Contact Form in WordPress
Once you have activated the plugin, a new option “Forms” will appear in your dashboard. Now, for building a new form, navigate to Form► Add New option from the admin dashboard.
After clicking on the option, a new window “Builder” appears to you with lots of customization features and settings. On the right of it, you will also find an option named “Settings” to more customize your form. We will describe more details for each option and settings below:
Form Name:
For building a new form, you have to give a meaningful name of the form. Here you can do this by the Form Name option.
Button Label:
Button label is mainly used to clearly explain what the button does. It means it actually describes your users what happens when they click on the button. In this field, you will find the label of the button is submitted by default. But you can change the label by writing anything you want as Apply, Done etc on it according to your need.
Button Color:
Here, you can choose the color of your button from the drop-down list. There are 7 colors you will find for the submit button.
Button Size:
In this field, you can select the size of your button from the four prebuilt button sizes. These are- Default, Large, Small, Very Small.
Button Position:
If you need to change the position of your button in the form, you can use this option. There are four prebuilt positions (Right, Left or Center, full width) appears from the drop-down list. You can choose one where you want to see the button on your new form.
On the left column of this window, you will also view two other settings options name – Field and Field Settings. This option basically allows you to add a new field on your form.
In the field section, the plugin provides some preformed fields (Commonly Used Fields, Generic Fields, Advance Fields) where you can view lots of pre-made field box that helps to create the form within just a few moments. Moreover, You can use these fields to build any type of form you like.
If you are using the free version of this plugin, you can use the commonly used fields, generic fields. For using the advance fields, you have to use our pro version.
Commonly Used Fields:
All the needed fields for building a new form will appear in the Commonly Used Fields. You can use these basic fields ( Name, Email, Subject, Message) in your form by drag and drop order with your mouse. All these fields also offer some exclusive field settings to make your work easier and fast. In addition, for more information on the basic common fields and its customizing feature, you may take a look at the Commonly Used Fields type documentation.
Generic Fields
Below the Commonly Used Fields, you will find an option of Generic Fields where lots of other preformed fields you will find. These fields are-
To add this field in your contact form, you need to just click on the plus (+) icon of the field or drag-and-drop them into the main editing area.
Like the commonly used fields, these generic fields also provide amazing settings option for customizing your form. To clarify, You can check our documentation about Generic Fields to get to know more about it.
Once you have inserted all your required field in the form, click on the Save Form option to save all these changes.
Step 3: Configure The Form settings
After creating your form, its time to configure your contact form properly. To do this, you will need to go on Settings options from right over the Builder window. Once you have clicked on the Settings button, you will see a new window opened where you can set up some additional settings for making your form fairly.
Now in the Form Settings, you can write your form description, submission message of form submit and even you can set up a page that appears to your customers when they submit the form. Here, we have described the settings in details below:
Form Description:
Here, you can write a short description of your form. Also, you may add some HTML settings given upper the description or code in your form description. This description shows below to the form name to your users.
Successful Form Submission Message:
In this box, you can write the message which will be shown to your users when they submit the form. By default, it shows a “Thank You” message. More even, you can add a picture as a message through it to your users.
Redirect to:
This feature allows deciding which page your users see when they submit the form. It provides three options as a redirect to the same page, custom page or custom URL. You can choose what you need from these three options.
Step 4: Add Email Notification on your contact form
Do you want to get email updates every time when someone submits a contact form to your site?
You can add this feature on your contact form by the Email Notifications tab right after the Form settings. Further, If you need to send the form submission to multiple email addresses you can do this by adding multiple email addresses separated by a comma.
For more details, you can check our documentation about Email Settings for setting up the email notification.
Step 5: Set up the Contact Form Template
If you want to set up the form template you can do this from the UI settings tab right over the Email Notifications tab. Here, you can set up your form width as pixel or percentage through the Form width option. Moreover, you may set up your template design from the two prebuilt design (card, default).
Make sure you have click on the Save Form button after doing all these changes.
Step 6. Add the Contact Form in a WordPress Page
Now, after all the configuration of your contact form, its time to show it to your desired page/post. To do this, at first, go to Forms► All forms and copy the shortcode of the newly created form from the list.
Further, go to your desired page/post and paste the code in the edit box. If you have not created any post or page then go to Pages ► Add new or Post ► Add new and paste the shortcode to the edit box. After pasting, click on the publish button to appear the page to your users.
Here’s what the form would look like on a sample WordPress page:
That’s it. Now you have created a contact form in WordPress using WordPress Live Form with zero coding knowledge.
If you have any question related to it you may ask in the comment section. We appreciate further comments, support or suggestions!
Sidratul Sohrat
I am Sidratul Sohrat, a dedicated content writer with a fervent passion for creating engaging and informative content related to technology, business, and marketing.