WordPress provides thousands of plugins to use. Some are paid and some are free to install and use. In this post, I am going to talk about the contact form in WordPress. There are lots of plugins for generating the contact form. We can integrate these plugins easily on the WordPress page. But what if you are creating your own template. Then how you will integrate it inside the custom page. Through this post, you will be learning the integration and email setup of the WordPress contact form 7. sIn the previous WordPress post, I had created a custom blog application using the custom template.
Prerequisites
For a new WordPress setup, you need the below tools with the required version. So, I am assuming you have the following tools in your system.
- PHP version >=7.3
- MySQL >=5.6 OR Maria DB >= 10.1
- Server – Apache/Nginx
- VS Code Editor (Optional)
After installing WordPress in your localhost, just create a custom template. I have already posted a tutorial on converting the HTML template in WordPress. That’s why I am not going to repeat it again. I am going to continue with the existing blog project. In that project, I will create a new template page for the contact. Then on that page, I will integrate the contact form 7. So, let’s continue.
Create a Template Page For Contact
Open your project in the VS code, create a folder and just add a new file there. Here, I have created a PHP file named contact.php.
After creating the file, just make it a template page. Hence, we will have to define it as a template as showing below.
<?php
/*
* Template Name: Contact
*
*/How to Create a Custom Taxonomy in WordPress
To complete the template, we will have to create a page inside the WordPress dashboard. So, here I have a page named Blog. Now, I will create another page for the Contact for integrating contact form 7.
So, create a new page and name it Contact. Now, in the page attributes section, just choose the template that we have created with the named contact. So, I have chosen the Contact template for the contact page.
Now, publish it and see the result. As a result, you will have a blank page because we haven’t any single line of HTML there. Hence, we will have to create a design for the contact page. I have added the below snippet for the design of the contact page.
<?php
/*
* Template Name: Contact
*
*/
get_header();
?>
<main id="main">
<div class="hero-section inner-page">
<div class="wave">
<svg width="1920px" height="265px" viewBox="0 0 1920 265" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Apple-TV" transform="translate(0.000000, -402.000000)" fill="#FFFFFF">
<path d="M0,439.134243 C175.04074,464.89273 327.944386,477.771974 458.710937,477.771974 C654.860765,477.771974 870.645295,442.632362 1205.9828,410.192501 C1429.54114,388.565926 1667.54687,411.092417 1920,477.771974 L1920,667 L1017.15166,667 L0,667 L0,439.134243 Z" id="Path"></path>
</g>
</g>
</svg>
</div>
<div class="container">
<div class="row align-items-center">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-md-7 text-center hero-text">
<h1 data-aos="fade-up" data-aos-delay="">Get in touch</h1>
<p class="mb-5" data-aos="fade-up" data-aos-delay="100">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section">
<div class="container">
<div class="row mb-5 align-items-end">
<div class="col-md-6" data-aos="fade-up">
<h2>Contact Form</h2>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam necessitatibus incidunt ut officiis explicabo inventore.</p>
</div>
</div>
<div class="row">
<div class="col-md-4 ml-auto order-2" data-aos="fade-up">
<ul class="list-unstyled">
<li class="mb-3">
<strong class="d-block mb-1">Address</strong>
<span>203 Fake St. Mountain View, San Francisco, California, USA</span>
</li>
<li class="mb-3">
<strong class="d-block mb-1">Phone</strong>
<span>+1 232 3235 324</span>
</li>
<li class="mb-3">
<strong class="d-block mb-1">Email</strong>
<span>youremail@domain.com</span>
</li>
</ul>
</div>
<div class="col-md-6 mb-5 mb-md-0" data-aos="fade-up">
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
<div class="row">
<div class="col-md-6 form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" id="name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validate"></div>
</div>
<div class="col-md-6 form-group">
<label for="name">Email</label>
<input type="email" class="form-control" name="email" id="email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validate"></div>
</div>
<div class="col-md-12 form-group">
<label for="name">Subject</label>
<input type="text" class="form-control" name="subject" id="subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validate"></div>
</div>
<div class="col-md-12 form-group">
<label for="name">Message</label>
<textarea class="form-control" name="message" cols="30" rows="10" data-rule="required" data-msg="Please write something for us"></textarea>
<div class="validate"></div>
</div>
<div class="col-md-12 mb-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="col-md-6 form-group">
<input type="submit" class="btn btn-primary d-block w-100" value="Send Message">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="site-section border-top border-bottom">
<div class="container">
<div class="row justify-content-center text-center mb-5">
<div class="col-md-4">
<h2 class="section-heading">Review From Our Users</h2>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-md-7">
<div class="owl-carousel testimonial-carousel">
<div class="review text-center">
<p class="stars">
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star muted"></span>
</p>
<h3>Excellent App!</h3>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam aperiam dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi, provident voluptates consectetur maiores quos.</p>
</blockquote>
<p class="review-user">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/person_1.jpg" alt="Image" class="img-fluid rounded-circle mb-3">
<span class="d-block">
<span class="text-black">Jean Doe</span>, — App User
</span>
</p>
</div>
<div class="review text-center">
<p class="stars">
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star muted"></span>
</p>
<h3>This App is easy to use!</h3>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam aperiam dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi, provident voluptates consectetur maiores quos.</p>
</blockquote>
<p class="review-user">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/person_2.jpg" alt="Image" class="img-fluid rounded-circle mb-3">
<span class="d-block">
<span class="text-black">Johan Smith</span>, — App User
</span>
</p>
</div>
<div class="review text-center">
<p class="stars">
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star muted"></span>
</p>
<h3>Awesome functionality!</h3>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam aperiam dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi, provident voluptates consectetur maiores quos.</p>
</blockquote>
<p class="review-user">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/person_3.jpg" alt="Image" class="img-fluid rounded-circle mb-3">
<span class="d-block">
<span class="text-black">Jean Thunberg</span>, — App User
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section cta-section">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 mr-auto text-center text-md-left mb-5 mb-md-0">
<h2>Starts Publishing Your Apps</h2>
</div>
<div class="col-md-5 text-center text-md-right">
<p><a href="#" class="btn"><span class="icofont-brand-apple mr-3"></span>App store</a> <a href="#" class="btn"><span class="icofont-ui-play mr-3"></span>Google play</a></p>
</div>
</div>
</div>
</div>
</main>
<?php get_footer();
?>Now, my contact page has a design layout like this.
So, our design part is ready, now we will replace this contact form with the WordPress contact form 7. That means we will create a form with the help of the Contact Form 7 Plugin and then will integrate the shortcode of that form here.
How to Create Custom Post Types in WordPress
Install Contact Form 7 Plugin in WordPress
WordPress contact form 7 plugin is free to download and use. So we will be creating our contact form using this plugin. It provides all the necessary input fields for creating a form.
For installation of the plugin, just go to the Plugins section and click on Add New.
Now, in the search section, type contact form 7. In the search result, you will have the list of plugins which provide the contact form. But, in this post, we’ll be using the contact form 7 plugin. Now, install the plugin.
After the installation, just click on Activate.
Create a Contact Form in Contact Form 7
Once, the plugin has been activated, you will see the Contact option in the sidebar menu. In the next step, we will add a form by clicking on the Add New as showing below.
Now, you will have the default generated input fields for the form. You can delete all the inputs and start adding the new one as the form required.
You can add the Class and Id attribute of every input field. This will help you to enhance the design and functionality of the form inputs. Also, you can use the placeholder and required attributes here.
So, here I have added the form fields for the name, email, subject, and message. You can add more fields as per your requirement. You can simply replace your form code with the below code.
[text* full_name class:form-control placeholder "Your Name"]
[email* email class:form-control placeholder "Your Email"]
[text subject class:form-control placeholder "Subject"]
[textarea message class:form-control placeholder "Your Message"]
[submit class:btn class:btn-primary class:d-block class:w-100 "Submit"]So, here the contact form has been generated by the help of the Contact Form 7 plugin.
How to Convert HTML Template to WordPress
How to Integrate Contact Form in HTML
In this step, we will integrate the created contact form inside the template page that we have created already. WordPress provides the predefined function do_shortcode() to integrate these types of the form using the shortcode.
To proceed further, we will have to copy the shortcode of the Contact Form 7 and paste it into the template page in the contact form section.
<?php echo do_shortcode('[contact-form-7 id="31" title="Contact Form"]'); ?>So, after adding the shortcode of contact form the HTML template page is looking like this.
<?php
/*
* Template Name: Contact
*
*/
get_header();
?>
<main id="main">
<div class="hero-section inner-page">
<div class="wave">
<svg width="1920px" height="265px" viewBox="0 0 1920 265" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Apple-TV" transform="translate(0.000000, -402.000000)" fill="#FFFFFF">
<path d="M0,439.134243 C175.04074,464.89273 327.944386,477.771974 458.710937,477.771974 C654.860765,477.771974 870.645295,442.632362 1205.9828,410.192501 C1429.54114,388.565926 1667.54687,411.092417 1920,477.771974 L1920,667 L1017.15166,667 L0,667 L0,439.134243 Z" id="Path"></path>
</g>
</g>
</svg>
</div>
<div class="container">
<div class="row align-items-center">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-md-7 text-center hero-text">
<h1 data-aos="fade-up" data-aos-delay="">Get in touch</h1>
<p class="mb-5" data-aos="fade-up" data-aos-delay="100">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section">
<div class="container">
<div class="row mb-5 align-items-end">
<div class="col-md-6" data-aos="fade-up">
<h2>Contact Form</h2>
<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam necessitatibus incidunt ut officiis explicabo inventore.</p>
</div>
</div>
<div class="row">
<div class="col-md-4 ml-auto order-2" data-aos="fade-up">
<ul class="list-unstyled">
<li class="mb-3">
<strong class="d-block mb-1">Address</strong>
<span>203 Fake St. Mountain View, San Francisco, California, USA</span>
</li>
<li class="mb-3">
<strong class="d-block mb-1">Phone</strong>
<span>+1 232 3235 324</span>
</li>
<li class="mb-3">
<strong class="d-block mb-1">Email</strong>
<span>youremail@domain.com</span>
</li>
</ul>
</div>
<div class="col-md-6 mb-5 mb-md-0" data-aos="fade-up">
<!-- contact form -->
<?php echo do_shortcode('[contact-form-7 id="31" title="Contact Form"]'); ?>
</div>
</div>
</div>
</div>
<div class="site-section border-top border-bottom">
<div class="container">
<div class="row justify-content-center text-center mb-5">
<div class="col-md-4">
<h2 class="section-heading">Review From Our Users</h2>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-md-7">
<div class="owl-carousel testimonial-carousel">
<div class="review text-center">
<p class="stars">
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star muted"></span>
</p>
<h3>Excellent App!</h3>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam aperiam dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi, provident voluptates consectetur maiores quos.</p>
</blockquote>
<p class="review-user">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/person_1.jpg" alt="Image" class="img-fluid rounded-circle mb-3">
<span class="d-block">
<span class="text-black">Jean Doe</span>, — App User
</span>
</p>
</div>
<div class="review text-center">
<p class="stars">
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star muted"></span>
</p>
<h3>This App is easy to use!</h3>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam aperiam dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi, provident voluptates consectetur maiores quos.</p>
</blockquote>
<p class="review-user">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/person_2.jpg" alt="Image" class="img-fluid rounded-circle mb-3">
<span class="d-block">
<span class="text-black">Johan Smith</span>, — App User
</span>
</p>
</div>
<div class="review text-center">
<p class="stars">
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star"></span>
<span class="icofont-star muted"></span>
</p>
<h3>Awesome functionality!</h3>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ea delectus pariatur, numquam aperiam dolore nam optio dolorem facilis itaque voluptatum recusandae deleniti minus animi, provident voluptates consectetur maiores quos.</p>
</blockquote>
<p class="review-user">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/person_3.jpg" alt="Image" class="img-fluid rounded-circle mb-3">
<span class="d-block">
<span class="text-black">Jean Thunberg</span>, — App User
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section cta-section">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 mr-auto text-center text-md-left mb-5 mb-md-0">
<h2>Starts Publishing Your Apps</h2>
</div>
<div class="col-md-5 text-center text-md-right">
<p><a href="#" class="btn"><span class="icofont-brand-apple mr-3"></span>App store</a> <a href="#" class="btn"><span class="icofont-ui-play mr-3"></span>Google play</a></p>
</div>
</div>
</div>
</div>
</main>
<?php get_footer();
?>Save and run the project to see the result. After placing the contact form 7 shortcode, my form is looking pretty as showing below.
You can check the form validation of the required field here.
How to Create a Custom Blog in WordPress
Configure Email For Contact Form 7
Conclusion
WordPress contact form 7 is a good approach to configure form with email. You can easily set up it inside the HTML by placing a single line of the shortcode. After the configuration of the email, the email can be sent to the admin. Also, you can create another copy of the email that can be sent to the user.
contact form 7 to custom post type is best plugin to provide filter by category, filter by Featured Product, filter by Best selling Product