Responsive HTML Form Full Functional with PHP Possessing Script and jQuery Validation, CSS Styling with 4 CSS Styles 1 Plane and 3 colours Available or Add Your Own and Google No Captcha Security Are You Human Field ( You will have to get a public and private reChaptcha Key for the domain your are going to use the form on for No Captcha to work here

For formatted code open in html editor or note pad and copy the acture form rather than the example code below.

Suitable for all major computer browsers and mobile phones. Test by shrinking of the width you would view on a mobile phone, just shrink your browser to mobile phone size on a computer., To test jQuery validation just submit without filling out any fields.

Simple to make one or two changes to the php processing script and embed the form in your desired page and upload the assets folder with scripts into the same directory as you form page and bingo post yourself as message. Occasionally as with most forms the odd submission might go into your junk folder, so check there and within a minute or two your submission will be received.

To add the form to your page open responsive-jquery-bootstrap-form.html in a html and notepad editor copy that hear to the head of yoru page and the body to the body of your page upload page and assets folder and test.


Form multiple department you need to change or make more ???-formail.php script in the assets folder at this time there are 4 to use support-formmail.php sales-formmail.php enquiries-formmail.php and next-formmail.php for a new department to be added, to create more copy and past the to create a new formmail processing script new-formmail.php name it for your department. Then in the formmail change on each formmail..
$email_to=""; // Change to your email - CC email add comma and email ,
$subject="Next Contact Form"; // Change subject
Also on each formmail near the bottom you can have the same or multiple redirect pages after submit for each formmail...
header('Location: redirect.html'); // your custom redirect after submit, replace redirect.html with full path i.e.
You can create your own redirect page or make more in the assest folder where you can also add more department or change those already made also changing the formmail.php by renaming it ???-formmail.php.

On the form you will also need to point to the assets/next-formmail.php in the options and add the department id i.e id="Next"
<option value="" unselected="selected">- Select Department -</option>
<!-- You can re-order or remove as wished add department id -->
<option value="assets/sales-formmail.php" id="Sales">- Sales -</option>
<option value="assets/support-formmail.php" id="Support">- Support - </option>
<option value="assets/enquiries-formmail.php" id="Enquiries">- All Other Enquiries -</option>
<option value="assets/next-formmail.php" id="Next">- Add Next Department -</option>
<option value="">- More Departments -</option>>

There are two versions of each for one with normal red error test and one with red error text and red highlighted fields for error or green for success. I might with to upload the assets folder with all content and all form to see which you prefer.

Open formmail.php in assets folder in a html or notepad editor.



$email_to = ""; // Add your email

$email_subject = "Contact Form"; // Received email subject

You will not be able to reply to sender if you remove the comment // and if will send from ytou domain email rather than the users and you will be unable to reply to them other than click on the email they have enter.
// $from_email=""; // Email from... from email using site domain
// $headers .= "From:".$from_email."\r\n" . // Set the From Email you will recieve i.e


@mail($email_to, $email_subject, $email_message, $headers);
header('Location: redirect.html'); // your custom redirect after submit, replace redirect.html with full path i.e.

You can enable Cc to send a copy of the form result to the sender and Reply-To if you wish them to respond and an alternative email address rather than the one you entered in the $email_to just remove the two // comment forward slashed in formt of them to enable these options.
// 'Cc: '.$from."\r\n" . // to enable sending a Cc email to sender remove the two comment forward slashes in front of // 'CC
// 'Reply-To:' . "\r\n" . // to enable the reply email address remove the two commment forward slashes in front of 'Reply-To

There is also one change you need to make in the responsive-jquery-bootstrap-form.html. You need to enter your public google rechptcha site key
<!-- you can resave if wished this page as responsive-jquery-bootstrap-form.php -->

<div class="g-recaptcha" data-sitekey="Enter Your Public Site Key Here" style="transform:scale(0.90);-webkit-transform:scale(0.90);transform-origin:0 0;-webkit-transform-origin:0 0; color:transparent; font-weight:normal; line-height:0px;" tabindex="6"> </div>