In today’s digital age, it is essential for every website to have a contact form to communicate with its users. A contact form is a great way to collect information from your visitors, respond to their queries, and build trust. In this article, we will guide you through the step-by-step process of creating a contact form in WordPress.
A contact form is a web-based form that allows your website visitors to contact you without revealing your email address. A contact form is an essential part of every website as it helps users to get in touch with you directly. In this article, we will show you how to create a contact form in WordPress with step-by-step instructions.
Why Do You Need a Contact Form in WordPress?
There are many reasons why you need a contact form on your WordPress website. Here are some of the most important ones:
- A contact form allows users to contact you without revealing your email address, which can prevent spam and protect your privacy.
- A contact form helps users to communicate with you directly, which can increase trust and credibility.
- A contact form enables you to collect user feedback, inquiries, and suggestions, which can help you improve your website and your products or services.
- A contact form can be integrated with your email marketing tool to grow your email list and promote your business.
Step 1. Choosing the Best WordPress Contact Form Plugin
Are you struggling to choose the best WordPress contact form plugin for your website? With so many options available, it can be overwhelming to decide which one to use. In this article, we’ll introduce you to the most beginner-friendly contact form plugin on the market – WPForms.
Why WPForms is the Best Contact Form Plugin
There are many reasons why we believe WPForms is the best WordPress contact form plugin available. Here are the top three:
Beginner-Friendly
WPForms is incredibly easy to use, even for beginners. The drag-and-drop form builder allows you to create a contact form in just a few clicks. You don’t need any coding skills to get started.
Free Version Available
WPForms Lite is available for free and is perfect for creating a simple contact form. Over 5 million sites use WPForms Lite, making it one of the most popular WordPress contact form plugins available.
Upgrade to WPForms Pro
When you’re ready for more advanced features, you can upgrade to WPForms Pro. This gives you access to more powerful form features, including conditional logic, multi-page forms, and payment integration.
Step 2. Install a Contact Form Plugin on WordPress
For this tutorial, we’ll use WPForms Lite because it’s free and easy to use.
You can install this plugin on your site by logging into your WordPress dashboard and going to Plugins » Add New.
Then, in the search field, type ‘WPForms’, and click on the ‘Install Now’ button.
This will automatically install the plugin on your site.
Next, you need to activate the plugin by clicking the ‘Activate’ button.
Step 3. Create a Contact Form in WordPress
Now that you have activated WPForms, you are ready to create a contact form in WordPress.
To do this, navigate to WPForms » All Forms in your WordPress admin panel. Then, click the ‘Add New’ button.
This will open the WPForms drag-and-drop form builder template library. Start by giving your contact form a name and then select your contact form template.
To choose a template simply hover over it and click the ‘Use Template button.
WPForms Lite comes with over 20+ free-form templates to choose from. You can use these to create just about any type of contact form you like.
For the sake of this example, we will go ahead and select the ‘Simple Contact Form‘ template. It will automatically add the Name, Email, and Message fields.
You can click on any of the form fields to edit them.
When you click on a form field it will bring up a ‘Field Options’ panel on the left where you can make changes.
You can also use your mouse to drag and drop the fields to change the order.
If you want to add a new field, then simply select from the available fields on the left sidebar.
You can drag it over to your form or click on it, and it will automatically be added to your form.
When you’re done customizing your form, make sure to click on the ‘Save’ button.
Step 4. Configuring WordPress Form Notification and Confirmations
Now that you have created your contact form, it’s important that you properly configure the form notification and form confirmation options.
Form confirmation is what your website visitor sees after they submit the form. This can be a simple thank you message, a page where you’ve uploaded downloadable PDFs, or anything you’d like.
Form notification is the email you get after someone submits the contact form on your WordPress blog.
To customize the confirmation message, click on the ‘Settings’ tab and then the ‘Confirmations’ tab inside the form builder.
There’s already a default thank you a message.
However, you can customize this in the ‘Confirmation Message’ box, if you’d like.
If you want to redirect users after successful form submission instead of showing a message, then select ‘Go to URL’ from the ‘Confirmation Type’ dropdown.
Then, enter the URL where you want to redirect users too.
If you make any changes here, then make sure to click the ‘Save’ button.
After that, you can make sure the form notification settings are correct. Simply click on the ‘Notifications’ tab from the same ‘Settings’ menu.
The best part about WPForms is that the default settings are ideal for beginners. When you go to the notification settings, all fields will be pre-filled dynamically.
The notifications by default are sent to the admin email that you set up when you created your site.
If you want to send it to a custom email address, then you can change that. If you want to send the notification to multiple emails, then just separate each email address by a comma.
The ‘Email Subject Line’ is pre-filled with your form name. The ‘From Name’ field is automatically populated with your user’s name.
When you reply to the form inquiry, it will go to the email that your user filled in the contact form.
Make sure you click the ‘Save’ button if you make changes here.
Step 5. Adding WordPress Contact Form on a Page
Now that you are done configuring your WordPress contact form, it’s time to add it to a page.
You can either add it to an existing contact page or create a new page in WordPress.
If you want to create a new contact form page simply go to Pages » Add New and then give your page a name.
We will be using the WPForms block to add the form to a page. Simply click on the ‘Plus’ add block button and search for ‘WPForms’.
Then, click on the ‘WPForms’ block.
The WPForm block will now appear in the content area of your page.
You need to click on the drop-down menu to select the form you created earlier.
WPForms will load your contact form preview inside the editor. You can now click the ‘Publish’ or ‘Update’ button to save your form.
Now, you can visit your website to see it in action.
Here’s what the form looked like on a sample WordPress contact page:
If you only wanted to add the contact form on the page, then you’re done here. Congratulations.
WPForms also comes with a WordPress contact form shortcode. You can use this by visiting WPForms » All Forms and then copying the shortcode next to your form.
Then, all you need to do is open up the page where you want to add it and click the ‘Plus’ add block button, and search for ‘Shortcode’.
Next, click the ‘Shortcode’ block.
Then, paste the shortcode that you copied above into the box.
After that, click ‘Update’ or ‘Publish’ and your contact form will be live on your website, just like above.
Step 6. Adding WordPress Contact Form in a sidebar
WPForms also comes with a WordPress contact form widget that you can use to add your contact form to a sidebar or any other widget-ready area in your WordPress theme.
To do this, you need to go to Appearance » Widgets and then click the ‘Plus’ add block icon in the widget area you want to add your form.
Next, search for ‘WPForms’.
Then, click on the ‘WPForms’ block to add it to your sidebar.
After that, you need to select your contact form from the drop-down.
This will automatically load a preview of your form.
Next, click the ‘Update’ button to save your changes.
Now, you can visit your site to see your contact form live in your sidebar or other widget areas.
How do I create a contact form in WordPress without plugins?
Creating a contact form in WordPress without using plugins can be done by following these steps:
- Create a new page in WordPress by going to Pages > Add New.
- Switch to the Text tab and add the following code:
<div id="contact-form">
<h2>Contact Us</h2>
<form action="" method="post">
<p><label for="name">Name:</label> <input type="text" name="name" id="name"></p>
<p><label for="email">Email:</label> <input type="text" name="email" id="email"></p>
<p><label for="subject">Subject:</label> <input type="text" name="subject" id="subject"></p>
<p><label for="message">Message:</label> <textarea name="message" id="message"></textarea></p>
<p><input type="submit" name="submit" value="Submit"></p>
</form>
</div>
- Save the page and preview it to see the contact form.
- Next, you need to create a script to handle the form submission. Add the following code to your theme’s functions.php file:
add_action( 'wp_mail_failed', 'wpse_phpmailer_error' );
function wpse_phpmailer_error( $wp_error ) {
if ( isset( $wp_error->errors['wp_mail_failed'] ) ) {
echo '<div class="error">';
echo '<p>' . __('There was an error sending the email.', 'text-domain') . '</p>';
echo '<p>' . $wp_error->errors['wp_mail_failed'][0] . '</p>';
echo '</div>';
}
}
add_shortcode( 'my-contact-form', 'my_contact_form_shortcode' );
function my_contact_form_shortcode() {
ob_start();
if ( isset( $_POST['submit'] ) ) {
$name = sanitize_text_field( $_POST['name'] );
$email = sanitize_email( $_POST['email'] );
$subject = sanitize_text_field( $_POST['subject'] );
$message = sanitize_textarea_field( $_POST['message'] );
$to = 'youremail@example.com';
$headers = array(
'From: ' . $name . ' <' . $email . '>',
'Content-Type: text/html; charset=UTF-8'
);
wp_mail( $to, $subject, $message, $headers );
echo '<div class="success">';
echo '<p>' . __('Thank you for your message. We will get back to you soon.', 'text-domain') . '</p>';
echo '</div>';
}
include( get_template_directory() . '/contact-form.php' );
return ob_get_clean();
}
- Save the functions.php file and create a new file called contact-form.php in your theme’s directory.
- Copy and paste the code from step 2 into the contact-form.php file.
- Replace “youremail@example.com” with your email address in the my_contact_form_shortcode function.
- Go to the page where you added the contact form and add the shortcode [my-contact-form].
- Save the page and test the contact form by submitting a message.
By following these steps, you can create a simple contact form in WordPress without using plugins. However, keep in mind that using a plugin is generally a more efficient and secure way to create a contact form, as it provides more options for customization and protection against spam.
FAQs About How to Create a Contact Form in WordPress
How do I create a popup contact form in WordPress?
To create a popup contact form in WordPress, you can follow these steps:
1. Install and activate a popup plugin like Popup Maker or OptinMonster.
2. Create a new popup and select the form type as “Contact Form” or “Custom Form“.
3. Customize the design of your popup using the available options, such as color, font, and size.
4. Add the necessary fields to your contact forms, such as name, email, and message.
5. Configure the form settings, such as email notifications and success messages.
6. Set the trigger for your popup, such as on click or on page load.
7. Add the popup to your website by selecting the appropriate display options, such as on specific pages or posts.
8. Save the changes and test your popup by submitting a message.
How do I create a popup contact form in WordPress without using a plugin?
You can also create a popup contact form without using a plugin by following these steps:
1. Create a new page in WordPress by going to Pages > Add New.
2. Add the contact form code as shown in the previous answer.
3. Save the page and copy its URL.
4. Install and activate a popup plugin like Popup Maker or OptinMonster.
5. Create a new popup and select the form type as “HTML Form“.
6. Add the HTML code for your contact form, replacing the action attribute of the form tag with the URL of the page you created in step 3.
7. Customize the design and settings of your popup as desired.
8. Set the trigger for your popup, such as on click or on page load.
9. Add the popup to your website by selecting the appropriate display options, such as on specific pages or posts.
10. Save the changes and test your popup by submitting a message.
Conclusion
In conclusion, creating a contact form in WordPress is a simple process that can be accomplished in just a few steps. By using a plugin like Contact Form 7 or WPForms, you can easily customize your form and add it to any page or post on your website.
When creating your contact form, be sure to include all of the necessary fields, such as name, email, and message. You may also want to consider adding additional fields, such as phone number or subject, depending on the purpose of your form.
Once your form is created, you can customize its appearance and behavior using the various options available in your chosen plugin. You can also configure email notifications and other settings to ensure that you receive and respond to submissions in a timely manner.