How to Create a Contact Form in WordPress

Constructing a contact form for WordPress from the bottom up is feasible. This article explains how to create your contact form and the advantages of doing so.


In this tutorial, we’ll concentrate on creating a WordPress contact form without the aid of a plugin. WordPress has a ton of plugins available for whatever you want, but you could feel more satisfied and secure creating features from scratch. Why bother, you might wonder? We’ll discuss a couple of them now. For instance, individuals often don’t want to fiddle with a plugin’s UI, or the plugin does a lot more than you’d like.


Starting from scratch, we’ll install WordPress. Learn about the Codex if you’re unsure how. Create a child theme that only contains a stylesheet and a unique page template to adhere to best practices. Create a new folder called “contact-form” in wp-content/themes. Create the files style.css and page-contact-us.php there.


Getting Started Creating Your Own Contact Form

You should be able to activate the theme on your test site at this point and get started.


The following action is constructing a page with the brief title “Contact Us.” This is a unique name. It instantly corresponds to the page-contact-us.php template file that we created before. This approach to making a custom page template isn’t a one-size-fits-all answer; just a convention WordPress offers that I enjoy. A page titled “About Us” would be shown automatically using page-about-us.php. It’s helpful!


Visiting your newly constructed “Contact Us” page will result in a blank page if you built page-contact-us.php and left it empty. But it’s all fine! Alrighty. Now that the base page is in place, it’s time to add a basic form. Sorry about the inline style! This is solely for error and success messages, consolidating everything into a single file. Feel free to style it however you like. CSS.


Several things are happening at this time. We start by echoing the $react variable, which we’ll examine in a moment. The remaining text consists solely of form tags, but you’ll notice that their values repeat the $_POST variable. This prevents the user from having to start from the beginning if the form is submitted improperly because all the data will still be there.


Additionally, a cunning “hidden” form input enables us to determine whether a user has posted anything or not. But I’ll get to that later. Each input has an asterisk next to it to indicate it is necessary.


You’ll have a neat contact form if you save that and refresh!