php contact form with validation and send email

php contact form with validation – Creating a basic contact form in PHP is pretty simple. PHP code to send email from contact form by the users on the website and with success message.

php contact form with validation

PHP Contact Form send an email with validation. Strip unnecessary characters (extra space, tab, newline) from the user input data (with the PHP trim() function) Validating the form submission with Multi step form wizard jquery validation Example.

Contact form database table structure

CREATE TABLE `members_tbl` (
  `contact_id` int(11) NOT NULL,
  `member_name` varchar(100) NOT NULL,
  `member_email` varchar(255) NOT NULL,
  `query_title` varchar(255) NOT NULL,
  `msgbody` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

Simple Create the contact form HTML as shown below with validation and save it with .php File extension

Step 1: Contact Form User Interface

contact-view.php
view of the php contact form with validation.

<html>
<head>
<title>Contact Us Form</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div class="form-container">
        <form name="frmContact" id="" frmContact"" method="post"
            action="" enctype="multipart/form-data"
            onsubmit="return validateContactForm()">

            <div class="member-dtl">
                <label style="padding-top: 20px;">Your Full Name</label> <span
                    id="memberName-details" class="details"></span><br /> <input
                    type="text" class="mem-elem" name="memberName"
                    id="memberName" />
            </div>
            <div class="member-dtl">
                <label>Email</label> <span id="memberEmail-details"
                    class="details"></span><br /> <input type="text"
                    class="mem-elem" name="memberEmail" id="memberEmail" />
            </div>
            <div class="member-dtl">
                <label>Subject</label> <span id="query_title-details"
                    class="details"></span><br /> <input type="text"
                    class="mem-elem" name="query_title" id="query_title" />
            </div>
            <div class="member-dtl">
                <label>Messages</label> <span id="memberMsg-details"
                    class="details"></span><br />
                <textarea name="msgbody" id="msgbody"
                    class="mem-elem" cols="60" rows="6"></textarea>
            </div>
            <div>
                <input type="submit" name="send" class="btn-submit"
                    value="Send" />

                <div id="statusMsg"> 
                        <?php
                        if (! empty($notification)) {
                            ?>
                            <p class='<?php echo $type; ?>Messages'><?php echo $notification; ?></p>
                        <?php
                        }
                        ?>
                    </div>
            </div>
        </form>
    </div>

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        function validateContactForm() {
            var countconfirm = true;

            $(".details").html("");
            $(".mem-elem").css('border', '#e0dfdf 1px solid');
            var memberName = $("#memberName").val();
            var memberEmail = $("#memberEmail").val();
            var query_title = $("#query_title").val();
            var msgbody = $("#msgbody").val();
            
            if (memberName == "") {
                $("#memberName-details").html("Required.");
                $("#memberName").css('border', '#e66262 1px solid');
                countconfirm = false;
            }
            if (memberEmail == "") {
                $("#memberEmail-details").html("Required.");
                $("#memberEmail").css('border', '#e66262 1px solid');
                countconfirm = false;
            }
            if (!memberEmail.match(/^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/))
            {
                $("#memberEmail-details").html("Invalid Email Address.");
                $("#memberEmail").css('border', '#e66262 1px solid');
                countconfirm = false;
            }

            if (query_title == "") {
                $("#query_title-details").html("Required.");
                $("#query_title").css('border', '#e66262 1px solid');
                countconfirm = false;
            }
            if (msgbody == "") {
                $("#memberMsg-details").html("Required.");
                $("#msgbody").css('border', '#e66262 1px solid');
                countconfirm = false;
            }
            return countconfirm;
        }
</script>
</body>
</html>

Step 2: PHP Contact Form Input Processing

index.php

<?php
if(!empty($_POST["send"])) {
	$name = $_POST["memberName"];
	$email = $_POST["memberEmail"];
	$query_title = $_POST["query_title"];
	$msgbody = $_POST["msgbody"];

	$link = mysqli_connect("localhost", "root", "inginityknow", "pakainfo_v1") or die("Connection Error: " . mysqli_error($link));
	mysqli_query($link, "INSERT INTO members_tbl (member_name, member_email,query_title,msgbody) VALUES ('" . $name. "', '" . $email. "','" . $query_title. "','" . $msgbody. "')");
	$insert_id = mysqli_insert_id($link);
	//if(!empty($insert_id)) {
	   $notification = "Your contact information is saved successfully.";
	   $type = "success";
	//}
}
require_once "contact-view.php";
?>

Step 3: Send Contact Form Input Data via an Email

send_contact_mail.php

<?php
if(!empty($_POST["send"])) {
	$name = $_POST["memberName"];
	$email = $_POST["memberEmail"];
	$query_title = $_POST["query_title"];
	$msgbody = $_POST["msgbody"];

	$toEmail = "[email protected]_samples.com";
	$mailHeaders = "From: " . $name . "<". $email .">\r\n";
	if(mail($toEmail, $query_title, $msgbody, $mailHeaders)) {
	    $notification = "Your Full contact information is received successfully.";
	    $type = "success";
	}
}
require_once "contact-view.php";
?>

Don’t Miss : Contact form PHP code

Read Also:  JavaScript Objects - methods array constructor and new object

Step 4: Style Code

style.css

body {
    font-family: Arial;
    width: 600px;
}

.form-container {
    background: #f1ecdf;
    border: #e2ddd2 1px solid;
    padding: 20px;
    border-radius: 2px;
}

.member-dtl {
    margin-bottom: 20px;
}

.member-dtl label {
    color: #75726c;
}

.mem-elem {
    width: 100%;
    border-radius: 2px;
    padding: 10px;
    border: #e0dfdf 1px solid;
    box-sizing: border-box;
    margin-top: 2px;
}

.span-field {
    font: Arial;
    font-size: small;
    text-decoration: none;
}

.btn-submit {
    padding: 10px 60px;
    background: #9e9a91;
    border: #8c8880 1px solid;
    color: #ffffff;
    font-size: 0.9em;
    border-radius: 2px;
    cursor: pointer;
}

.errorMsg {
    background-color: #e66262;
    border: #AA4502 1px solid;
    padding: 5px 10px;
    color: #FFFFFF;
    border-radius: 3px;
}

.successMsg {
    background-color: #9fd2a1;
    border: #91bf93 1px solid;
    padding: 5px 10px;
    color: #3d503d;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
}

.details {
    font-size: .8em;
    color: #e66262;
    letter-spacing: 2px;
    padding-left: 5px;
}

I hope you get an idea about php contact form with validation.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.