How to create a contact form plugin in WordPress

How to create a contact form plugin in WordPress

This post has been viewed 195 times.

In this tutorial, we would be dealing with how to create a contact form plugin in WordPress.

There are tons of contact form plugins in the WordPress plugin directory. There are also contact form included in some WordPress themes.

If you are wanting to become one of those developers in the repository then you got to start somewhere.

Also, if you are also the person who don’t want to use plugins in the directory because some of them have the functions that you don’t actually need and it just bloats your website then you can use this tutorial to create your own simple contact form plugin.

What you’ll need:

  • A web server.
  • A WordPress website.

Note:

  • This will not work on localhost. (unless you have installed and correctly configured some STMP plugin such as WP Mail SMTP)

Since we want to show the form using the WordPress WYSIWYG editor then we can create it as a shortcode. You can read more on about shortcodes in how to create a shortcode tutorial.

Step 1: Create the plugin header.

Below is the plugin header that we are going to use. Feel free to edit some of the values.

This will make our plugin hooked into the WordPress core.

Step 2: Create two (2) functions.

The function myContactFormRender() will render our HTML codes to make sure that it will fit in the theme.

The other function myContactForm() will have the form and the PHP code to process the form.

Step 3: Create a shortcode.

We will hook the myContactFormRender() function to be able to use it as a shortcode.

We will use the shortcode [simple_contact_form] to show our contact form.

Step 4: Create the fields.

We will create fields inside the function myContactForm().

In this example, we are going to have a field for the name, email address, subject and the message of the sender and all of them are required.

We also used the method post to make it more private and action to self since our shortcode also hold the code to process our form.

Step 5: Create the form processing code.

We have created a condition where our code will only process the form when the form is actually submitted.

The $to variable is assigned in a WordPress function get_option() with a parameter of admin_email. This will automatically fetch the email address of the WordPress website.

The wp_mail() function behaves likes the built-in PHP mail() function.

Then the last condition that we have created would be to check whether our contact form really sends our message or not, just for the user to be aware.

Step 6: Add CSS design.

It is up to you on how you will design your contact form as this two (2) classes above are enough for me.

Take a note that most of the time, it takes the appearance of the theme installed so you don’t have to worry much designing the form.

Step 7: Connect the two functions.

You may have observed that we created two (2) functions earlier, and this is the time to connect them.

Complete code:

That’s it, our simple contact form plugin is done. Just activate the plugin that we have created and just simply use the shortcode [simple_contact_form] then click Publish.

Happy developing!

Hello, I am a freelance website and mobile application developer. I am also the owner of this website, so if you have any projects for me you can contact me at [email protected] or use the contact page. When I’m not doing some work, I can be found watching Anime/Asian Dramas/American TV Series, playing computer games, and writing tutorials on this website. I run the program repeatedly hoping the error won’t show up next time.