Friday , 24 November 2017
Home » WP Guides » How to Create a Contact Form in WordPress?

How to Create a Contact Form in WordPress?

Whether you are planning on launching a simple blog, a business website or an e-commerce store using WordPress, you would certainly need a ‘Contact Us’ page to let your visitors interact with you. And it is always recommended to use a contact form on your “Contact Us” page rather than displaying your email address publicly to prevent spam.

Of course, WordPress offers an assortment of plugins to add a contact form to your website. However, there are many WordPress developers who prefer writing their own code instead of using and configuring a pre-made plugin.

Therefore, today in this article, we are going to show how to create a contact form with and without a plugin to make it easy for both technical and non-technical users to use either method as per their convenience and needs.

How to add contact form in wordpress

How to create a contact form with a plugin?

Of course, we are going to need a plugin. In this tutorial, we are going to use WPForms which is one of the most user-friendly contact form plugins and probably the best option available in the WordPress plugin directory. The plugin also comes integrated with a drag and drop builder to enable you to easily create contact forms by simply dragging and dropping elements.

Installing and activating WPForms:

In order to get started, install and activate the plugin. You can install WPForms by clicking on plugins -> add new. In the search bar on the right-hand side, search WPForms and hit install now. Once installed, make sure you have activated the plugin.

Creating a contact form with WPForms:

Log in to your WordPress dashboard and open WPForms menu. Click add new. You will be redirected to the WPForms drag and drop tool. You would need to give your contact form a name. Once you have selected a name for your form, choose a contact form template from two inbuilt form templates i.e. simple contact form or blank. For this tutorial, we are choosing simple contact form template. The template will add the Name, Email, and Message field. You can either manually customize it or use a drag and drop page builder to edit them.

Also, you can add a new field by selecting from the given fields in the left sidebar. Once you are satisfied with the created form, hit save.

Configuring form confirmation and notifications:

It is extremely important to configure Form Notifications and confirmation settings. Form confirmation, as the name suggests, confirms your visitors that whether the message has been delivered or not.

Form notification automatically sends an email to you that a visitor has submitted an inquiry on your website. In order to configure these settings, you need to click on settings tab of the plugin. You can either change or leave the form confirmation message as default i.e. thank you a message. In the form notification tab, all fields are pre-filled with default values. The admin email of the website receives the notification email by default. You can change it to a custom email address by filling the field with your email address.

Add the form to your page:

WPForms allows you to use a shortcode to add the created contact form to a WordPress page. In the text editor, click on “add form” and insert the desirable form.

How to create a contact form without a plugin?

Creating a form without a plugin certainly involves a lot of coding and technical skills. But we have tried to simplify the process by dividing the whole process into smaller steps.

Let’s get started.

Note: though you can add the following code to your functions.php file, the best to go about it is by creating a plugin so that when you switch themes you don’t end up with a messy website filled with the unnecessary code here and there.

<?php

/*

Plugin Name: Simple Contact Form Shortcode

Plugin URI: http://yourwebsite.com/author/yourname/

Description: A simple contact form for simple needs. Usage: <code>[contact email=”your@email.address”]</code>

Version: 1.0

Author: Your name

Author URI: http://yourwebsite.com/

*/

class WPwidgets_contact_form {

private$form_errors = array();

?>

The function __construct() is used to manage the shortcodes which is recognizable by WP.

 

function__construct() {

// Register a new shortcode

add_shortcode(‘contact_form_dm’, array($this, ‘shortcode’));

}

To design the form use the following code:

staticpublic function form() {

echo'<form action=”‘ . $_SERVER[‘REQUEST_URI’] . ‘” method=”post”>';

echo'<p>';

echo’Your Name (required) <br/>';

echo'<input type=”text” name=”your-name” value=” . $_POST[“your-name”] . ‘” size=”40″ />';

echo'</p>';

echo'<p>';

echo’Your Email (required) <br/>';

echo'<input type=”text” name=”your-email” value=”‘ . $_POST[“your-email”] . ‘” size=”40″ />';

echo'</p>';

echo'<p>';

echo’Subject (required) <br/>';

echo'<input type=”text” name=”your-subject” value=”‘ . $_POST[“your-subject”] . ‘” size=”40″ />';

echo'</p>';

echo'<p>';

echo’Your Message (required) <br/>';

echo'<textarea rows=”10″ cols=”35″ name=”your-message”>’ . $_POST[“your-message”] . ‘</textarea>';

echo'</p>';

echo'<p><input type=”submit” name=”form-submitted” value=”Send”></p>';

echo'</form>';

}

The validate_form function validates the values of the contact form:

publicfunction validate_form( $name, $email, $subject, $message ) {

// If any field is left empty, add the error message to the error array

if( empty($name) || empty($email) || empty($subject) || empty($message) ) {

array_push( $this->form_errors, ‘No field should be left empty’);

}

// if the name field isn’t alphabetic, add the error message

if( strlen($name) < 4 ) {

array_push( $this->form_errors, ‘Name should be at least 4 characters’);

}

// Check if the email is valid

if( !is_email($email) ) {

array_push( $this->form_errors, ‘Email is not valid’ );

}

}

Sending an email: send_email function is used to send the mail to the admin.

Public function send_email($name, $email, $subject, $message) {

// Ensure the error array ($form_errors) contain no error

if( count($this->form_errors) < 1 ) {

// sanitize form values

$name= sanitize_text_field($name);

$email= sanitize_email($email);

$subject= sanitize_text_field($subject);

$message= esc_textarea($message);

// get the blog administrator’s email address

$to= get_option(‘admin_email’);

$headers= “From: $name <$email>” . “\r\n”;

// If email has been process for sending, display a success message

if( wp_mail($to, $subject, $message, $headers) )

echo'<div style=”background: #3b5998; color:#fff; padding:2px;margin:2px”>';

echo’Thanks for contacting me, expect a response soon.';

echo'</div>';

}

}

 

Process_functions method is used to call and process the send_email and validate_form functions.

publicfunction process_functions() {

if( isset($_POST[‘form-submitted’]) ) {

 

// call validate_form() to validate the form values

$this->validate_form($_POST[‘your-name’], $_POST[‘your-email’], $_POST[‘your-subject’], $_POST[‘your-message’]);

 

// display form error if it exist

if(is_array($this->form_errors)) {

foreach($this->form_errors as $error) {

echo'<div>';

echo'<strong>ERROR</strong>:';

echo$error . ‘<br/>';

echo'</div>';

}

}

}

$this->send_email( $_POST[‘your-name’], $_POST[‘your-email’], $_POST[‘your-subject’], $_POST[‘your-message’] );

self::form();

}

Now, it’s time to add the form to your page. To do so, you need to use a shortcode that we discussed at the very beginning of this section.

add_shortcode(‘contact_form_dm’, array($this, ‘shortcode’));

‘shortcode’, the second argument passed in the add_shortcode function is a callback method which calls shortcode() function.

Finally to display the form on your web page, you need to use the following code and add it to the page where you want to add the form.

<?php echo do_shortcode(‘[contact_form_dm]’); ?>

Congratulations, you have successfully created and added the contact form to your website.

Author Bio:

Kerin Miller is a renowned web development professional who works with Stellen Infotech, a leading WordPress Development Company with a global reach. She is a passionate blogger who loves to write and share everything about WordPress and new web design technologies.

One comment

Leave a Reply to Frances Cancel reply