How to Create a Simple Dynamic and Responsive Contact Form Using PHP and Bootstrap

Our contact form is simple enough to execute and requires three files. I will explain the whole concept in 3 simple steps. The codes for each part contain necessary notes for your convenience.

Step-1 ☆ Creating Functional HTML Code Integrating jQuery

At first, you have to create an index.html file.Then paste the following code directly into your HTML file.
[html]

Dynamic HTML Contact Form

Send Us an Email

Your message has been sent successfully.

Error! Please provide valid information.



[/html]

Step-2 ☆ Integrating CSS to the Contact Form

Create a file namely style.css (as we mentioned the reference earlier in line 9 of index.html file. The following codes are for your stylesheet.
[css]
/*—————————————
4.6.2 CONTACT FORM
—————————————–*/
.contact-form { width: 480px }
.contact-form .success,
.contact-form .error { display: none }
.contact-form .input-box { min-height: 50px }
.contact-form .input-box,
.contact-form .textarea-box {
margin-bottom: 15px;
margin-top: 15px;
outline: 0;
border: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid #e3e3e3;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
color: #727272;
padding-left: 12px;
font-size: inherit;
line-height: inherit;
width: 100%;
}
.contact-form .standard-button {
background: #739438 none repeat scroll 0 0;
color: #fff;
font-weight: 700;
padding: 15px 30px;
text-transform: uppercase;
}
.success {
color: #fff;
font-size: 16px;
white-space: nowrap;
font-weight: 400;
background: #739438;
line-height: 28px;
text-align: left;
position: relative;
padding-left: 40px;
}
.error {
background: #f00 none repeat scroll 0 0;
color: #fff;
font-size: 16px;
font-weight: 400;
line-height: 28px;
padding-left: 40px;
position: relative;
text-align: left;
white-space: nowrap;
}
#contact .icon-style { font-size: 18px }
.contact-form .standard-button:hover,
.contact-form .standard-button:focus { color: #a0ce4e }
.field-wrapper textarea:focus, .field-wrapper input:focus{outline: 1px solid #739438}
[/css]

Step-3 ☆ Creating a .php File

Copy the following code directly into your .php file. We named the file sendmail.php as we mentioned it in index.html line no. 40. You can use your desired email address in line 16 of your .php file.
[php]
if ( isset($_POST[’email’]) && isset($_POST[‘name’]) && isset($_POST[‘subject’]) && isset($_POST[‘message’]) && filter_var($_POST[’email’], FILTER_VALIDATE_EMAIL) ) {
// detect & prevent header injections
$test = “/(content-type|bcc:|cc:|to:)/i”;
foreach ( $_POST as $key => $val ) {
if ( preg_match( $test, $val ) ) {
exit;
}
}
$headers = ‘From: ‘ . $_POST[“name”] . ‘<‘ . $_POST[“email”] . ‘>’ . “\r\n” .
‘Reply-To: ‘ . $_POST[“email”] . “\r\n” .
‘X-Mailer: PHP/’ . phpversion();
//
mail( “wpdivine@gmail.com”, $_POST[‘subject’], $_POST[‘message’], $headers );
}
?>
[/php]

Output of the Project


  1. Complete Contact Form After Step 1
    canvas
  2. Validation Message for Incomplete Form Submission
    canvas2

The screenshot for success message was not included in the post. We will be able to view the message only if your files are hosted in a public server (not your local server) and all the data are valid for the fields. Thank you for being with us. I will return with another useful topic soon.

Leave a Comment

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

Related Posts