How To Create a Contact Form in WordPress Without A Plugin

How To Create a Contact Form in WordPress Without A Plugin

Establishing meaningful connections with your audience is SO IMPORTANT in the world of online interaction. This is where contact forms come in. These powerful little tools are so helpful for connecting with your target audience and potential partners! (Not sure what a contact form is? Here’s ours for reference!)

That contact form is essential for you as a blogger, because it’s that gateway that allows readers to send inquiries (and praise!), brands to deliver sponsorship requests, and vendors to submit service offers! It’s not a “nice-to-have” on your blog, contact submission forms are must!

The best part? You don’t even need to install a plugin to create a helpful contact form on your WordPress site. Adding too many unnecessary elements like form plugins can actually create security risks and slow down your site speed which can negatively affect your SEO and overall user experience! This is why we’re sharing a guide on how you can create a contact form on your WordPress website without a plugin.

These steps are easy to follow and provide you with all the information needed to use and apply HTML code on your WordPress blog. Let’s do this!

How To Create a Contact Form in WordPress Without A Plugin

Step 1: Create a new page.

First things first, you need to log into your WordPress dashboard. From there, navigate to Pages and click on Add New. Then, you just need to give your WordPress page a title, such as “Contact” or “Get in Touch.” 

Step 2: Switch to HTML view.

Once you’re in the page editor, you will usually see two tabs at the top. These tabs are Visual and Text or HTML. Click on the Text or HTML tab to switch to the HTML editor. You might be a little intimidated to add code, but this is the best way to add a contact form plugin-free!

Step 3: Insert the HTML code.

As mentioned, we get it if you’re intimidated by coding, but we’re not asking you to be an HTML wizkid! We’ve got the code all written out for you, with just a quick copy and paste job, WordPress and the given data will do all the work. 

So, go ahead and copy and paste the provided HTML code below into the HTML editor. This will give you a basic and pretty much universal contact form.

<div id=”contact-form”>

  <form action=”<?php echo esc_url( admin_url(‘admin-post.php’) ); ?>” method=”post”>

    <input type=”hidden” name=”action” value=”custom_contact_form”>

    <label for=”name”>Name:</label>

    <input type=”text” name=”name” required>

    <label for=”email”>Email:</label>

    <input type=”email” name=”email” required>

    <label for=”message”>Message:</label>

    <textarea name=”message” rows=”5″ required></textarea>

    <input type=”submit” value=”Submit”>

  </form>

</div>

This form code is only simple, but is super user-friendly for those just starting out with HTML code. Whatever you need your contact form to accomplish, this code will be plenty to get it done! 

How To Create a Contact Form in WordPress Without A Plugin

Step 4: Set up the form handling in functions.php.

Now you can open up your theme’s functions.php file. You can find this file in your theme folder. To get it to it, first go to Appearance, then Theme File Editor. 

Add the provided PHP code below to handle form submissions.

function handle_contact_form() {

  if ( isset($_POST[‘action’]) && $_POST[‘action’] == ‘custom_contact_form’ ) {

    $name    = sanitize_text_field( $_POST[‘name’] );

    $email   = sanitize_email( $_POST[’email’] );

    $message = sanitize_textarea_field( $_POST[‘message’] );

    // You can add your custom logic here, like sending an email

    // For example:

    $to      = ‘your@email.com’;

    $subject = ‘New Contact Form Submission’;

    $headers = array(‘Content-Type: text/html; charset=UTF-8’);

    $message_body = “Name: $name\n\nEmail: $email\n\nMessage:\n$message”;

    wp_mail( $to, $subject, $message_body, $headers );

    // Optionally, you can redirect the user after submission

    wp_redirect( home_url(‘/thank-you/’) );

    exit;

  }

}

add_action( ‘admin_post_nopriv_custom_contact_form’, ‘handle_contact_form’ );

add_action( ‘admin_post_custom_contact_form’, ‘handle_contact_form’ );

This custom HTML block works by checking if the form has been submitted, sanitizing the input data. It’ll also allow you to customize how your website handles the forms, like if you want WordPress to send you an email or store the data somewhere. Yes, even with HTML editing you have complete control over your website! Just make sure after you add it, you hit Update File to save.

Step 5: Customize the PHP code.

Customize the $to variable in the PHP code to your email address. The address you choose is where the form submissions will be sent. Then, you can respond to that submission right there from your email. Once all this coding stuff is done, the process of managing the contact form info is super easy. 

Step 6: Save changes and test the form.

Save your changes to the functions.php file. You can go to the page you created earlier and fill out the form to test it before you launch it. We definitely advise this! Especially if you’re not used to working with the HTML editor. 

How To Create a Contact Form in WordPress Without A Plugin

Step 7: Remember these additional tips.

See, that wasn’t so hard? But, we have some additional tips for first time HTML coding champs like yourself. Keep this advice in mind as you make your way through your WordPress site:

  • Security: Make sure you sanitize and validate user input to prevent any malicious actions against your site. The provided PHP code above uses great functions like sanitize text field and sanitize email for basic input sanitization.
  • Error Handling: You will definitely want to add error handling to ensure that users are informed if there are any issues that could occur with their form submission. Otherwise, you could see a decline in communications and potential revenue. We don’t want that! Here are some error handling codes to add for further customization.
  • Redirects: After the form has been successfully submitted, you can redirect users to a thank you page or any other page you may choose.
  • Styling: The HTML code we have provided above is very basic. However, you can enhance the styling if you choose to by adding CSS to your theme or using inline styles within the actual HTML code. This will be your next step if you want a more custom form!
  • Testing: It is a good idea to test the form thoroughly to make sure it works just as it should. You can check the successful submissions and error scenarios. This will ensure no one has any issues submitting the form when you launch the page.

Plugins for WordPress Contact Forms

If you decide to use a plugin for your contact form because you don’t have many plugins and extra elements as is, we have a few recommendations! Here are some plugins for creating a WordPress contact submission forms:

Create a simple contact form with these handy tips!

With these handy tips, you can easily create forms for your WordPress site. This is a great way to ensure there’s an easy gateway between you and your audience or partners! However, don’t forget that directly editing theme files such as functions.php can have adverse consequences if the right steps aren’t followed. ALWAYS have a backup before you make changes. 

You could also use a child theme for any sort of customization to avoid losing any mods you’ve made during theme updates. If you’re new to WordPress or looking to learn more, we have a range of blogs including how to stop spam comments on WordPress, how to include internal links, and more about WordPress blogging!

For more expert blogging tips and tricks, head on over to the InfluencerSEO blog. We have heaps of helpful info on blogging topics like SEO, social media, writing, and plenty more. It’s a must-have resource for every aspiring career blogger!

Join the discussion

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses cookies to improve your user experience. By using this site you agree to these cookies being set. To find out more see our Cookie Policy.