How to create WordPress contact form without plugin (ultimate guide) ?

?Today there are so many plugins that one can use to create WordPress contact form. However, it’s possible to create WordPress contact form without plugin.

But how can you ensure that people contact you whenever they use the contact form that you provided for them?

Your contact form needs to be trustworthy, have the input forms that you need and be well-designed (customize to suit your website).

• Bonus guide: Most Favorite Books by Topic and Category

I don’t think that there is any need to put “human verifications, Captcha and some unnecessary input fields to your contact form”. So this is why you need to have your own customized contact form for all your websites.

Many people would like to use plugin for the contact forms in their website. And I know that some of you may have tested some of the contact form plugins like: WPForms, Ninja Forms, Contact Form 7, Gravity Forms and many others.

There are some pros and cons for using plugin when creating your contact forms. But trust me, the cons is high when compared.

If you’re new to WordPress, don’t panic. You’re in the right website reading this ultimate guide ☑.

In this post I will cover the basis of creating your own contact form in WordPress (including the codes and its explanations) and provide you different contact form designs.

I will teach you how you can successfully apply all the codes and explanations that you will find in this guide.

And guess what! All these things will be delivered to you for free.

Brief hint

I’m a tech guru and a passionate blogger who loves designing things from scratch. If you navigate through my website, you’ll find most of my customization and I regularly update my site.

I find joy creating exciting contents that will satisfy my noble readers to the very best.

Demerits of WordPress plugins

Here are some reasons why you should not use plugins anyhow in your WordPress website:

1. They are vulnerable – More likely to be exposed to the chance of being attacked or harmed
2. Likely to slow down your website – Plugins contains external files that are all connected to your website
3. They can clash with each other – in the sense that they are designed by different people
4. They can restrict some of your website functionality
5. Plugins requires regular updates

Using a customized contact form will serve you greatly in the future, maybe in the long run you decided to change the email address that you’re using to receive form submissions.

Instead of starting all over to reset your plugin, all you have to do is to make few changes to your contact form code.

Pros of customized contact form

1. It does not affect your website loading speed
2. You can modify the codes any time you want
3. It does not require regular update unless you wish to make some changes to your code
4. You’re in control of every single code that consist the contact form
5. You can write CSS codes to beautify your contact form

Before we dive into creating this contact form, it’s important that you grab this few basic knowledge. ↓↓↓

What are the prerequisites for having a customized contact form?

For you to successfully embed this custom contact form in your website, you need to have basic knowledge of some WordPress functions and web languages. They are:

1. HTML – These are the codes that browsers translate to users in order to have a meaningful web page. In this guide, the HTML codes that will be used is mainly <form> and its constituents. This code is used to collect inputs from users and use them for the necessary purposes.
2. CSS – This renders how the HTML codes should be displayed. In this guide I’ll be embedding the CSS to the HTML codes by calling its classes. Any special design that you may see in this contact form will be the product of CSS.
3. PHP – This will be executed internally in you server. It will receive inputs from the HTML form, analyze it, validate it, process it and then deliver it to the website admins email address. As you can see, PHP performs the core function of this contact form.

Now let’s move to the coding part…

Steps on How to Create WordPress Contact Form Without Plugin

The three mandatory steps you should follow in order to manually create WordPress Contact Form Without Plugin are:

• First step: Data processing and error handling
• Second step: Designing and styling the contact form
• Third step: Building the contact form

The steps I listed above are the three major steps that you’ll need in creating WordPress Contact Form Without Plugin.

I also include a screenshot at the end of this article that shows you how your contact form will look like if you properly followed all the steps explained in this article.

Creating the WordPress Contact Form Without Plugin

Most people recommends creating a page template first. But there is no need for that in this guide.

Of recent I made series of research coupled with troubleshooting (as a tech guru) and I discovered a trick that works perfect in all WordPress websites. So I decided to share it (as a passionate blogger).

We all know that websites header and footer codes runs repeatedly each time any part of the website loads. This makes your website header and footer a constant variable in your web pages.

So with this idea I find out that if we place this contact form PHP code at the theme footer, it can be accessible from anywhere in the website.

In this guide, I will like you to copy and paste the core PHP code (this will: analyze, validate and deliver this message 😉 to the Theme footer of your website.

Step 1: Data processing and error handling

For clear understanding, login to WordPress then go to Dashboard > Appearance > Editor > Theme footer. For visual learners, examine the image below.

Note: make sure to paste the code you’re going to copy above these codes (<?php wp_footer(); ?>

</body>

</html>) that are in the end part of your theme footer.

Okay! We are all set. Now copy below code and paste it inside your theme footer. (Remember the #note above)

<?php
if (isset($_POST['Email'])) {

    // EDIT THE 2 LINES BELOW AS REQUIRED
    $email_to = "contact@jonakyblog.com"; /* edit here and Put the email address that people will use to contact you after filling the contact form */
    $email_subject = "Website form submissions"; // This will be the title when you recieve the message in your email.

    function problem($error)
    {
        echo "We are very sorry, but there were error(s) found with the form you submitted. ";
        echo "These errors appear below.<br><br>";
        echo $error . "<br><br>";
        echo "Please go back and fix these errors.<br><br>";
        die();
    }

    // validation expected data exists
    if (
        !isset($_POST['Name']) ||
        !isset($_POST['Email']) ||
        !isset($_POST['Message'])
    ) {
        problem('We are sorry, but there appears to be a problem with the form you submitted.');
    }

    $name = $_POST['Name']; // required
    $email = $_POST['Email']; // required
    $message = $_POST['Message']; // required

    $error_message = "";
    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

    if (!preg_match($email_exp, $email)) {
        $error_message .= 'The Email address you entered does not appear to be valid.<br>';
    }

    $string_exp = "/^[A-Za-z .'-]+$/";

    if (!preg_match($string_exp, $name)) {
        $error_message .= 'The Name you entered does not appear to be valid.<br>';
    }

    if (strlen($message) < 2) {
        $error_message .= 'The Message you entered do not appear to be valid.<br>';
    }

    if (strlen($error_message) > 0) {
        problem($error_message);
    }

    $email_message = "Form details below.\n\n";

    function clean_string($string)
    {
        $bad = array("content-type", "bcc:", "to:", "cc:", "href");
        return str_replace($bad, "", $string);
    }

    $email_message .= "Name: " . clean_string($name) . "\n";
    $email_message .= "Email: " . clean_string($email) . "\n";
    $email_message .= "Message: " . clean_string($message) . "\n";

    // create email headers
    $headers = 'From: ' . $email . "\r\n" .
        'Reply-To: ' . $email . "\r\n" .
        'X-Mailer: PHP/' . phpversion();
    @mail($email_to, $email_subject, $email_message, $headers);
?>

    <!-- include your success message below -->

    Thank you for contacting us. We will give you feedback as soon as we read your message.

<?php
}
?>

There are some compulsory lines of code that you should edit. These lines fall in line 5 & 6 of the above PHP code.

Make sure to click on Update file after you must have successfully pasted and edited the few lines that are mandatory that you should EDIT.

Step 2: Designing and styling the contact form

For us to have a nice looking contact form, we have to use CSS codes to style how our contact form should be displayed.

For easy understanding, go to Dashboard > Appearance > Editor > Stylesheet (style.css)

If you don’t want to alter your existing CSS classes, I’ll advice you to COPY below code and PASTE it at the end (last line of code) of your style.css.

/* ############# Contact Page CSS designed by www.jonakyblog.com ########### */
    .contact-form-container {
    padding: 20px;
}

    .contact-form-name {
    float:left;
    width:calc(50% - 5px);
    height:45px;
    background-color:rgba(255,255,255,0.01);
    font-family:inherit;
    font-size:15px;
    color:#000;
    line-height:45px !important;
    box-sizing:border-box;
    padding:5px 10px;
    margin:0 0 10px;
    border:1px solid rgba(221,221,221);
    border-radius:3px;
    }
    .contact-form-email {
    float:right !important;
    width:calc(50% - 5px);
    height:45px;
    background-color:rgba(255,255,255,0.01);
    font-family:inherit;
    font-size:15px;
    color:#000;
    line-height:45px;
    box-sizing:border-box;
    padding:0 20px;
    margin:0 0 20px;
    border:1px solid #dddddd;
    border-radius:3px;
    }
    
    .contact-form-message {
    float:left;
    width:100%;
    background-color:rgba(255,255,255,0.01);
    font-family:inherit;
    font-size:15px;
    color:#000;
    box-sizing:border-box;
    padding:10px;
    margin:10px 0 20px;
    border:1px solid rgba(221,221,221);
    border-radius:3px;
    }
    .contact-form-button-submit {
    float:left;
    width:100%;
    height:40px;
    background-color:#4caf50;
    font-family:inherit;
    font-size:15px;
    color:#fff;
    line-height:40px;
    font-weight:600;
    text-transform:uppercase;
    cursor:pointer;
    box-sizing:border-box;
    padding:0 10px !important;
    vertical-align: middle;
    margin:0;
    border:0;
    transition:all .27s ease;
    }
    .contact-form-button-submit:hover {
    background-color:#222222
    }

Step 3: Building the contact form

I know that some of you may be confused and be wondering – since there is no page template, how are we going to build this contact form?

As I have already said in some of my posts – I simplify my articles in the way that a novice can understand it.

Now go back to Dashboard > Pages > Add new. Give the new page a name such as: contact or contact us.

Follow below steps to download Block Editor in case you don’t have it.

Important: Am aware that anyone reading this article knows how to write HTML code directly to his/her posts or pages?

In case if you don’t know how to do this, make sure that you are using Block Editor.

How to Install Editor Blocks

You’ll need the Gutenberg plugin for this to work. Both Gutenberg and Editor Blocks can be installed from within /wp-admin.

1. Log in to the WordPress Admin.
2. Navigate to Plugins → Add New.
3. Type ‘Editor Blocks’ into the search field.
4. Once Editor Blocks appears, click ‘Install Now’ then ‘Activate’

Then go to Add block, scroll down until you see Custom HTML, then select it.

At this juncture you can now copy the HTML code below and paste it inside the custom HTML field that you just added using the block editor.

Note: This code you’re about to copy should be pasted inside your “contact page” with the help of “Custom HTML” that comes with the Block Editor.

<!-- Contact form HTML code designed by www.jonakyblog.com -->
<div class="contact-form-container">
    <h2>Contact Form</h2>
        <form action="https://jonakyblog.com/contact-us/" id="contactForm" method="post"> <!-- edit the URL here and change it with your contact page URL. -->
                <input class="contact-form-name" id="Name" name="Name" placeholder="Name *" size="30" type="text" value="" required="">
            <input class="contact-form-email" id="Email" name="Email" placeholder="Email *" size="30" type="text" value="" required="">
            <textarea class="contact-form-message" cols="25" id="Message" name="Message" placeholder="Message *" rows="6" required=""></textarea> 
            <button class="contact-form-button-submit" type="submit">Send Message</button>
                </form>
   </div>
<div style="clear:both"></div>

You have to make few editing to the code above in order not to have any redirection after someone finished contacting you.

From the above code, edit line 4. Remove https://jonakyblog.com/contact-us/ and replace it with your current contact page URL.

If you don’t know how to get your URL when you’re still working on the page, click on ⚙ Settings > permalink > URL slug. Settings is located at the top right side of your page builder environment.

When you’re true publish your page and view your contact page as a client. You can as well fill the forms and send a message to see how this method works.

• Recommended post: How to Add Post Thumbnail or Featured Image in WordPress

Note: after testing the contact form by filling the necessary fields, login to your email provider and you will happily see the: sender name, email address and his/her message body.

Preview of this contact form without plugin

If you follow this guide sequentially and carefully, this is how the contact form should look like in your website.

WordPress Contact Form Code

This WordPress Contact Form Code is programmed in PHP. The complete PHP code that authenticates the WordPress contact form is embedded in step 1 above.

All the necessary guide that will assist you to design the WordPress Contact Form Code is fully explained in the steps above.

Can WordPress Contact Form Send Email?

Yes! The WordPress contact form that i designed in this article automatically sends message to the destination email once a user uses it to contact you.

This WordPress contact form has been tested and confirmed. If you carefully follow this guide and implement it in your website, you’ll have a sweet and amazing WordPress contact form as shown in the image above.

WordPress Contact Form Not Receiving Email?

Are you using a plugin to embed contact form in your WordPress website and you don’t receive emails? This article has the best solution that you’ll ever need.

All you need to do is to manually embed contact form using PHP code. I elucidated in details how to implement the PHP code and how you can design the contact form to have a nice layout.

We recommend using PHP code to embed contact form in your WordPress website because plugin requires regular updates and this updates may affect the current version of WordPress you’re using.

Conclusion

This is one of the easy ways to add custom contact form to your website.

As you can see this method will be more powerful than a heavy plugin that is full of external files. This my amazing trick is very easy to maintain and you have total control over it.

If you were successful in following these steps, please drop a comment with your website URL so that I can preview this awesome contact form in your web page.

Follow me on my social media handles – Facebook, Twitter, Instagram & Pinterest.

Help spread this article to your friends and others that may need it.

Here are other posts you should read:

1. How to Upload Apk and Other Files in WordPress
2. How to Download YouTube Videos in All Devices
3. Complete Guide on How to Be a Successful Freelancer