Adding a Built-in Contact Form to WordPress

This tutorial will go over how to add a built-in contact form to your WordPress theme without having to use a plugin. I am not saying that using plugins are bad, it is just nice to have this functionality built-in to your WordPress theme out-of-box.

In this tutorial you will learn how to create a new contact page template, go over the PHP code that does the form processing and error handling, build the Bootstrap contact form, and create a contact widget area. We will also add the Bootstrap Alert component to display the status of the form submission to the user.

By the end of this tutorial you will have a working contact form that sends all submissions to the admin’s email.

Steps

  1. Create a new file in the root of your WordPress theme called template-contact.php
  2. Add the following code to this new file

  3. Open the functions.php file
  4. In the bootstrapwp_widgets_init function around line 71, register a new sidebar for the contact page
  5. The following code should be added directly under the code we added to register the Left Sidebar widget area:

  6. Create a new file in the root of your WordPress theme called sidebar-contact.php
  7. Add the following code to this new file:

  8. Now you need to update the get_sidebar markup in the template-contact.php template to the following:

  9. You should now be able to go to Appearance->Widgets from the WordPress Dashboard and add a widget to the Contact widget area
  10. Done!

Notes from the Video

Here is the link to the website were I found the basic contact form code. Notice this form code is not translation ready, does not include Bootstrap classes, and the form processing has been modified.

Feedback

Please let me know what you think of this tutorial and if you need help with anything.

  • Robert Cheatham

    Hey Brad, cool tutorial. Just one question. Any advice on retaining the inputted values when the form is submitted and there is an error. It’s really annoying for the user to have to re-enter data in the case of only one field containing bad data?
    R

    • This would be a good future tutorial. Until then, you could try the following: http://stackoverflow.com/questions/6225617/php-keep-form-info-after-submit-form-failed

      • Matthew Abraham

        Why is that for the future? Most modern contact forms function in the way Robert is requesting. While the link is a great resource, it really should be baked into the tutorial. Without it, it’s a great big UX problem.

        • Because like with anything else you can continue to add features and make it better. I could make a complete series on just handling forms, inputs, validation, turing it into a plugin, etc. This gives the user a great end result and enough knowledge to build it out however they would like.

          • Matthew Abraham

            A validation course would be great addition to your platform. However, I’m not convinced in this particular request to not have all your form data stolen by a “robot” because of an validation error.. is a feature. I just can’t picture telling a client that. My idea of this course is that I will have something that I would have to use upon completion. I would have to use a plugin for the contact, I currently just don’t have the time to RYO. None of this is said in raised voice, I ‘m just expressing my expectations that I had when committing to your platform.

          • Thanks for the feedback! I think Robert was just asking for the form data to be retained when there is a form submission with an error. As of now when a user submits a form with an error, validation messages appear under the inputs, and the form fields are cleared. The link that I provided to stackoverflow goes over exactly how to implement this feature. If you took the time to understand the tutorials up to this point it should be no problem to add.

            I am not sure what you are talking about form data stolen from a “robto” because of a validation error. Either way, thanks again for your feedback. In the Bootstrap 4 series I will keep this in mind when wiring together the contact form.

    • David Reinhardt

      Hey Robert,

      Know this was awhile ago but this code is how to retain info in the fields.

      <div class="form-group “>

      <input class="form-control" type="text" name="contactName" id="contactName" value="” />

      <div class="form-group “>

      <input class="form-control" type="text" name="email" id="email" value="” />

      <div class="form-group “>

  • Andy Jordan

    I would like to do this instead of using a plugin, is there a way to view the form submissions form the dashboard as well as getting them through email?

    • Sure, there is a way to have the message display in the Dashboard. This would need to be covered in a different tutorial though.

  • small suggestion: add in turning off the comments on pages by default, but especially here.

    • WordPress 4.3 will turn off the comments on pages by default.

  • Patricia Ellis

    Why do we need an edit button on the contact form?

    • You don’t have to use the Edit button anywhere if you don’t want. It is just there to allow the admin to easy go to the page editor.

  • Allison Pillar

    Did we ever end up going over how we can change where the email gets sent to? Not sure if I missed that somewhere along the way!

    • You can change get_option(‘admin_email’) to custom variable or any email you would like. Right now it is setup to send the email to the admin.

  • Mark

    I noticed that when you didn’t have a sidebar there was nothing there. Is there a way to add a message regarding adding content by the user?

    • You could do a PHP if statement. Something like.. if(sidebar){ display sidebar} else { here is my message }