Contact Form Using HTML And PHP

If you don’t create your website with WordPress. or, If you want to build your website using custom HTML and PHP. You may need a custom contact form.

A Contact form is an essential part of your website. So, you will gain free HTML and PHP scripts in this guide. This article will help you to create a dynamic contact form.

Contact form handles your business revenue. also, the contact form helps to maintain great communication with your visitors. In this guide, I’ll show you a very simple way how to Create Contact Form Using HTML And PHP.

I would like to create a very simple Contact Form using HTML And PHP functions. If you do not use a CMS for your website, then this article for you. It is a responsive contact form and will continuously work on mobile, tablets, and small and big devices.

Please remember, This tutorial, Only HTML And PHP, but I will do not show you, how to connect this form with SQL databases.
So let’s start,

Basic HTML Form

You need to add the following HTML code to your website before close the body tag. Or you can create an HTML contact form template e.g: contact.html.

You can create a Contact Form using Twitter Bootstrap. However, Just copy and paste this HTML code into your HTML template.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>contact form</title>
</head>

<body>

<link href="contact-form.css" rel="stylesheet">

<div class="fcf-body">

    <div id="fcf-form">
    <h3 class="fcf-h3">Contact us</h3>

    <form id="fcf-form-id" class="fcf-form-class" method="post" action="contact-form-process.php">
        
        <div class="fcf-form-group">
            <label for="Name" class="fcf-label">Your name</label>
            <div class="fcf-input-group">
                <input type="text" id="Name" name="Name" class="fcf-form-control" required>
            </div>
        </div>

        <div class="fcf-form-group">
            <label for="Email" class="fcf-label">Your email address</label>
            <div class="fcf-input-group">
                <input type="email" id="Email" name="Email" class="fcf-form-control" required>
            </div>
        </div>

        <div class="fcf-form-group">
            <label for="Message" class="fcf-label">Your message</label>
            <div class="fcf-input-group">
                <textarea id="Message" name="Message" class="fcf-form-control" rows="6" maxlength="3000" required></textarea>
            </div>
        </div>

        <div class="fcf-form-group">
            <button type="submit" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block">Send Message</button>
        </div>

        <div class="fcf-credit" id="fcf-credit">
        Simple HTML email form provided by: <a href="https://wcblogs.com/" target="_blank">WCBlogs</a>
        </div>

    </form>
    </div>

</div>

</body>
</html>

CSS Styles HTML Form

Here the CSS Styles for HTML Form, You can make this form more beautiful using CSS but if you have a great experience with CSS.

Copy to Clipboard

The PHP Code Which Captures And Emails Your Website Form

Below PHP code is a very basic function. The PHP function will capture the form fields specified in the HTML form raised ((Name, Email, and Message), and the fields are then sent off to your email address in plain text.

Create a PHP template, Look like contact-form-process.php and add the following code. Also, You should edit, $email_to, $email_subject, you can add your business email address and your subject.

Copy to Clipboard

After adding the code save the code and go back HTML template. In the below, the HTML contact form example. Contact Form Using HTML And PHP. Open your browser and check the form.

Create Contact Form Using HTML And PHP Best Guide In 2021

Conclusion

Contact Form Using HTML And PHP has been done.
This a very simple Contact form. So, if you want to add more fields, you can add them very easily.

I hope, this form works perfectly. So, Still, if you have any questions, please comment below and if you enjoy this article, then please share it with your friends.