Form created using HTML
You can copy and paste this directly into your HTML page, or use it as a basis for your contact us page.
<!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://www.freecontactform.com" target="_blank">FreeContactForm.com</a> </div> </form> </div> </div> </body> </html>
The CSS styles to use with the HTML form above
File Name: contact-form.css (you must save using this name exactly)#fcf-form { display:block; } .fcf-body { margin: 0; font-family: -apple-system, Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; background-color: #fff; padding: 30px; padding-bottom: 10px; border: 1px solid #ced4da; border-radius: 0.25rem; max-width: 100%; } .fcf-form-group { margin-bottom: 1rem; } .fcf-input-group { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: stretch; align-items: stretch; width: 100%; } .fcf-form-control { display: block; width: 100%; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; outline: none; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .fcf-form-control:focus { border: 1px solid #313131; } select.fcf-form-control[size], select.fcf-form-control[multiple] { height: auto; } textarea.fcf-form-control { font-family: -apple-system, Arial, sans-serif; height: auto; } label.fcf-label { display: inline-block; margin-bottom: 0.5rem; } .fcf-credit { padding-top: 10px; font-size: 0.9rem; color: #545b62; } .fcf-credit a { color: #545b62; text-decoration: underline; } .fcf-credit a:hover { color: #0056b3; text-decoration: underline; } .fcf-btn { display: inline-block; font-weight: 400; color: #212529; text-align: center; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .fcf-btn { transition: none; } } .fcf-btn:hover { color: #212529; text-decoration: none; } .fcf-btn:focus, .fcf-btn.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .fcf-btn-primary { color: #fff; background-color: #007bff; border-color: #007bff; } .fcf-btn-primary:hover { color: #fff; background-color: #0069d9; border-color: #0062cc; } .fcf-btn-primary:focus, .fcf-btn-primary.focus { color: #fff; background-color: #0069d9; border-color: #0062cc; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } .fcf-btn-lg, .fcf-btn-group-lg>.fcf-btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; } .fcf-btn-block { display: block; width: 100%; } .fcf-btn-block+.fcf-btn-block { margin-top: 0.5rem; } input[type="submit"].fcf-btn-block, input[type="reset"].fcf-btn-block, input[type="button"].fcf-btn-block { width: 100%; }
The PHP Code which captures and Emails your website form
The PHP code below is very basic - it will capture the form fields specified in the HTML form above (Name, Email, and Message). The fields are then sent off to your email address in plain text.
Note: You need to edit 2 parts of the script below. You need to set your email address (this will not be available for anyone to see, it is only used by the server to send your email). You can also specify an email subject line (or just leave the one which is there).
File Name: contact-form-process.php (you must use this filename exactly)<?php if (isset($_POST['Email'])) { // EDIT THE 2 LINES BELOW AS REQUIRED $email_to = "you@yourdomain.com"; $email_subject = "New form submissions"; 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 be in touch with you very soon. <?php } ?>
Save the files above. Once you edit the form to fit with your design, you are ready to try it out.
No comments:
Post a Comment