In this guide, I will show you how to create a nicely styled contact page form in WordPress without a plugin or anything of sort. The simple contact us form will have provision for user’s name, user’s email, message box and a submit button all styled in CSS.
Contact us page and forms are necessary in any blog or website so that users can easily reach out to the owners of such site with their inquiries. Usually, the form is programmed to deliver messages to email boxes or the WordPress admin dashboard. This page when available on any website, further shows the users the trust level of that site and give them a feel of acceptance, because they can reach out to the admins of such sites.
However, there are many ways to create a contact page form in WordPress without a plugin; two of which is by using a custom-coded PHP script or using a third party service to integrate in your site which sometimes is easier to implement.
However, we will be focusing on the custom-coded PHP script to create our first contact page in WordPress.
Before we proceed, kindly check my previous guide on How to Add Stylish Recent Posts Widget in WordPress Without Plugin.
How to Create Contact Page Form in WordPress Without a Plugin.
In order not to make this tutorial complex, we will try to keep everything simple. This is because, we are aware of some of you who aren’t familiar with using HTML, CSS and PHP. HTML will structure the form, CSS will add styles to the contact form and while PHP will add functionalities to the form “backend”.
We won’t be doing all of that though a little of it; Styling the form! Yes, we will utilise a free form solution service known as Formspree.
Formspree will handle the backend functionality of our form so that we won’t be going through the hassle and tussle of writing a PHP script for this purpose. We will further style our form so that it will feel just the ways it should be.
Create a free Formspree account.
Firstly, sign up on Formspree.io. It is completely free to create an account on this emailing service. Although, they have premium plans which users can upgrade to later on (if you wish).
After creating an account, you will be assigned to a dashboard. Go ahead to create a new project, then a NEW FORM. Copy the code by selecting the HTML form which might look like the following on the screenshot below. (except the “action” field.
Adding the Contact form in WordPress Page.
Now that your HTML form is ready, it is time to add it to your WordPress page.
Create a Page in WordPress by navigating to Dashboard > Pages > Add New. Type the name of your page as Contact Us.
Secondly, we will be using Gutemberg to add “Custom HTML” in our created page. Copy and paste the code generated from Formspree into the HTML block.
Next, we will have to style the HTML form using CSS. Copy the code below to style this form.
#contact input[type="text"],
#contact input[type="email"],
#contact textarea {
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px;
}
#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact textarea:hover {
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa;
}
#contact textarea {
height: 100px;
max-width: 100%;
resize: none;
}
#contact button[type="submit"] {
cursor: pointer;
width: 100%;
border: none;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
#contact button[type="submit"]:hover {
background: #43A047;
transition: background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
#contact input:focus,
#contact textarea:focus {
outline: 0;
border: 1px solid #aaa;
}
Once you’re done, PUBLISH the page and preview your newly created form.
That’s it.
So finally, anytime someone submits a message using the form, you will get notified directly in your email.
If you have any questions, don’t hesitate to leave us a feedback in the comments below this post. Have a great weekend and see you in the next tutorial.
