{"id":117667,"date":"2020-08-29T12:37:49","date_gmt":"2020-08-29T12:37:49","guid":{"rendered":"https:\/\/phppot.com\/?p=11928"},"modified":"2020-08-29T12:37:49","modified_gmt":"2020-08-29T12:37:49","slug":"bootstrap-contact-form-with-javascript-validation-and-php","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2020\/08\/29\/bootstrap-contact-form-with-javascript-validation-and-php\/","title":{"rendered":"Bootstrap Contact Form with JavaScript Validation and PHP"},"content":{"rendered":"

Last modified on September 7th, 2020.<\/p>\n

Bootstrap is the most popular solution to design an optimum, intuitive, mobile-ready UI components. It is easy to integrate the Bootstrap library for the application interface.<\/p>\n

Often, many of my readers ask for a Bootstrap contact form code. So I thought of creating a basic example for a Bootstrap enabled PHP contact form.<\/p>\n

Bootstrap provides in-built features to take care of UI responsiveness, form validation, and more. I used its SVG icon library to display the contact form fields with suitable icons.<\/p>\n

A Bootstrap contact form looks enriched. UI attracts people and enables them to use it with ease. Also, the developers\u2019 effort is reduced by using the Bootstrap framework.<\/p>\n

I have created a secure feature-packed responsive contact form \u2013 Iris<\/a>. This is one of the best and sleek contact form component you can ever get.<\/p>\n

What is inside?<\/h2>\n
    \n
  1. Contact form with vs without Bootstrap<\/a><\/li>\n
  2. Majority of  the contact form fields<\/a><\/li>\n
  3. About this example<\/a><\/li>\n
  4. File Structure<\/a><\/li>\n
  5. Slim UI layout with the Bootstrap contact from<\/a><\/li>\n
  6. Contact form validation with plain JavaScript<\/a><\/li>\n
  7. Processing contact form data in PHP code<\/a><\/li>\n
  8. Bootstrap contact form UI output<\/a><\/li>\n<\/ol>\n

    A contact form collects a different type of user details like name, message and more. There are various popular templates for contact forms.<\/p>\n

    I have created various PHP contact form<\/a> examples. And those form templates uses my own custom CSS.<\/p>\n

    Though it is straight forward to go with custom CSS, designing with Bootstrap<\/a> gives irrefutable offer.<\/p>\n

    Bootstrap provides full-fledged styles to create various types of form layout. It includes more of element-specific, attribute-specific forms styles.<\/p>\n

    With a Bootstrap contact form, the responsiveness, the cross-browser compatibilities are an easy deal.<\/p>\n

    If you already use the Bootstrap framework, then also it would be natural not to choose the custom CSS UI option.<\/p>\n

    For a simple example to prepend icons to form inputs without Bootstrap needs a bunch of CSS and media queries. But, with Bootstrap it has input-group<\/em> selector to achieve this.<\/p>\n

    In case if you want to render a thin, primitive contact form, then custom CSS is preferable.<\/p>\n

    Most of the contact forms have the name, email, subject, message fields. Some times it varies based on the applications\u2019 purpose.<\/p>\n

    For example, site-admin may merge the user feedbacks and inquiries entry points. In such cases, the contact form may have a radio option group to choose between feedback and inquiry.<\/p>\n

    Sometimes, people may collect phone numbers with country code. Also, it may have checkbox options to receive GDPR consent<\/a> as per the European legislation.<\/p>\n

    In a way, contact forms become complex in positioning fields, giving fluidity and more aspects.<\/p>\n

    Bootstrap supports a variety of layout options to create even a more complex form. Based on the complexity of the contact form layout, the Bootstrap is even dependable.<\/p>\n

    About this example<\/h2>\n

    This example uses rebooted form styles with classes to create a Bootstrap contact form. It makes this form UI responsive and consistent in all browsers and viewports.<\/p>\n

    It includes a default contact form having vertically stacked form controls. Each form-control has a prepended icon suitable to the contact input. I downloaded the Bootstrap SVG icon library to have such icons.<\/p>\n

    The form validation with a plain JavaScript simplifies the effort of loading any external libraries.<\/p>\n

    In PHP, it handles the posted data for sending them via a contact email. Also, it stores the data into a database table if any. It is optional and can disable in code.<\/p>\n

    This code uses a simple PHP mail() function<\/a> for sending the emails. In a previous example, I have added how to send email using Gmail SMTP.<\/a> Replace the simple mail() function with the one using PhpMailer via Gmail SMTP.<\/p>\n

    File Structure<\/h2>\n

    The contact form code is a small integrative component of an application. This example contains a very minimal code of having a Bootstrap contact form.<\/p>\n

    The vendor directory includes the Bootstrap CSS and icon library.<\/p>\n

    The bootstrap-contact-form.php<\/em>file contains the contact form HTML template. The landing page renders the contact form by including this template.<\/p>\n

    \"Bootstrap<\/p>\n

    This section shows the Bootstrap contact form HTML code. This HTML shows a default vertically stacked contact form fields.<\/p>\n

    The Bootstrap form grid styles and CSS provides options to display a horizontal form.<\/p>\n

    In the below HTML, each form element is in a form-group<\/em> container. It groups the form element label, form controls, validation and help-text properly.<\/p>\n

    The Email field has a help text that displays a note spaced as text-muted<\/em>.<\/p>\n

    The input-group <\/em>specific styles help to display icon-prepended form controls. These icons are from the Bootstrap SVG icon library.<\/p>\n

    bootstrap-contact-form.php<\/p>\n

    <html>\n<head>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n<title>Bootstrap Contact Form<\/title>\n<link rel=\"stylesheet\" href=\".\/vendor\/bootstrap\/css\/bootstrap.min.css\">\n<\/head>\n<body class=\"bg-light\"> <div class=\"container\"> <div class=\"row py-4\"> <div class=\"col\"> <h2>Bootstrap Contact Form<\/h2> <\/div> <\/div> <form name=\"frmContact\" id=\"frmContact\" method=\"post\" action=\"\" enctype=\"multipart\/form-data\" novalidate> <div class=\"row\"> <div class=\"form-group col-md-4\"> <label>Name<\/label> <span id=\"userName-info\" class=\"invalid-feedback\"><\/span> <div class=\"input-group\"> <div class=\"input-group-prepend\"> <span class=\"input-group-text\"><?php require __DIR__ . '\/vendor\/bootstrap\/bootstrap-icons\/person.svg';?><\/span> <\/div> <input type=\"text\" class=\"form-control\" name=\"userName\" id=\"userName\" required> <\/div> <\/div> <\/div> <div class=\"row\"> <div class=\"form-group col-md-4\"> <label>Email<\/label> <span id=\"userEmail-info\" class=\"invalid-feedback\"><\/span> <div class=\"input-group\"> <div class=\"input-group-prepend\"> <span class=\"input-group-text\"><?php require __DIR__ . '\/vendor\/bootstrap\/bootstrap-icons\/envelope.svg';?><\/span> <\/div> <input type=\"email\" name=\"userEmail\" id=\"userEmail\" class=\"form-control\" required> <\/div> <small id=\"emailHelp\" class=\"form-text text-muted\">Your email will not be shared.<\/small> <\/div> <\/div> <div class=\"row\"> <div class=\"form-group col-md-8\"> <label>Subject<\/label> <span id=\"subject-info\" class=\"invalid-feedback\"><\/span> <div class=\"input-group\"> <div class=\"input-group-prepend\"> <span class=\"input-group-text\"><?php require __DIR__ . '\/vendor\/bootstrap\/bootstrap-icons\/question.svg';?><\/span> <\/div> <input type=\"text\" name=\"subject\" id=\"subject\" class=\"form-control\" required> <\/div> <\/div> <\/div> <div class=\"row\"> <div class=\"form-group col-md-8\"> <label>Message<\/label> <span id=\"content-info\" class=\" invalid-feedback\"><\/span> <div class=\"input-group\"> <div class=\"input-group-prepend\"> <span class=\"input-group-text\"><?php require __DIR__ . '\/vendor\/bootstrap\/bootstrap-icons\/pencil.svg';?><\/span> <\/div> <textarea class=\"form-control\" rows=\"5\" name=\"message\" id=\"message\" required><\/textarea> <\/div> <\/div> <\/div> <div class=\"row\"> <div class=\"col\"> <input type=\"submit\" name=\"send\" class=\"btn btn-primary\" value=\"Send Message\" \/> <\/div> <\/div>\n<?php\nif (! empty($displayMessage)) { ?> <div class=\"row\"> <div class=\"col-md-8\"> <div id=\"statusMessage\" class=\"alert alert-success mt-3\" role=\"alert\"><?php echo $displayMessage; ?> <\/div> <\/div> <\/div>\n<?php\n}\n?> <\/form> <\/div> <script type=\"text\/javascript\" src=\".\/js\/validation.js\"><\/script>\n<\/body>\n<\/html> <\/pre>\n
    The above HTML template imports the Bootstrap CSS from the vendor location.<\/p>\n
    After submitting the contact details, users will receive an acknowledgment message. The bootstrap success<\/em> alert box displays a positive response on successful mail sending.<\/p>\n
    All the fields are mandatory in this Bootstrap contact form example.<\/p>\n
    The js\/validation.js<\/em> file has the validation script. On the window load event, this script sets the submit event listener to check the form validity.<\/p>\n
    Once it found invalid form fields, it will prevent the form to submit. Added to that it will add Bootstrap custom validation styles to highlight the invalid fields.<\/p>\n
    It adds the .was-validated<\/em> class to the parent form element. It highlights the form fields with respect to the :valid<\/em> and <\/span>:invalid<\/em> pseudo-classes.<\/span><\/p>\n
    Apart from the red-bordered invalid field highlighting, the script displays a text-based error message. The setValidationResponse()<\/em> checks the form data and insert the error message into the target.<\/p>\n
    This custom function invokes markAsValid()<\/em> and markAsInvalid()<\/em> to show the error messages. These functions set the element\u2019s display property and the innerText.<\/p>\n
    js\/validation.js<\/p>\n
    (function() { 'use strict'; window.addEventListener('load', function() { var form = document.getElementById('frmContact'); form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); setValidationResponse(); } form.classList.add('was-validated'); }, false); }, false);\n})(); function setValidationResponse() { var emailRegex = \/^([a-zA-Z0-9_.+-])+\\@(([a-zA-Z0-9-])+\\.)+([a-zA-Z0-9]{2,4})+$\/; var userName = document.getElementById(\"userName\").value; var userEmail = document.getElementById(\"userEmail\").value; var subject = document.getElementById(\"subject\").value; var content = document.getElementById(\"message\").value; if (userName == \"\") { markAsInvalid(\"userName\", \"required\"); } else { markAsValid(\"userName\"); } if (userEmail == \"\") { markAsInvalid(\"userEmail\", \"required\"); } else if(!emailRegex.test(userEmail)) { markAsInvalid(\"userEmail\", \"invalid\"); } else { markAsValid(\"userEmail\"); } if (subject == \"\") { markAsInvalid(\"subject\", \"required\"); } else { markAsValid(\"subject\"); } if (content == \"\") { markAsInvalid(\"content\", \"required\"); } else { markAsValid(\"content\"); }\n} function markAsValid(id) { document.getElementById(id+\"-info\").style.display = \"none\";\n} function markAsInvalid(id, feedback) { document.getElementById(id+\"-info\").style.display = \"inline\"; document.getElementById(id+\"-info\").innerText = feedback;\n}\n<\/pre>\n
    This section is something common in all of my contact forms example. But, this is important for which we have started.<\/p>\n
    In this example, it has support to store the contact form data into a database. But, it is optional and configurable in the coding.<\/p>\n
    The PHP code has a variable $isDatabase<\/em> which may have a boolean true<\/em> to enable the database.<\/p>\n
    structure.sql<\/p>\n
    --\n-- Database: `bootstrap_contact_form`\n-- -- -------------------------------------------------------- --\n-- Table structure for table `tbl_contact`\n-- CREATE TABLE `tbl_contact` ( `id` int(11) NOT NULL, `user_name` varchar(255) NOT NULL, `user_email` varchar(255) NOT NULL, `subject` varchar(255) NOT NULL, `message` varchar(255) NOT NULL\n) ENGINE=InnoDB DEFAULT CHARSET=latin1; --\n-- Indexes for dumped tables\n-- --\n-- Indexes for table `tbl_contact`\n--\nALTER TABLE `tbl_contact` ADD PRIMARY KEY (`id`); --\n-- AUTO_INCREMENT for dumped tables\n-- --\n-- AUTO_INCREMENT for table `tbl_contact`\n--\nALTER TABLE `tbl_contact` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;\n<\/pre>\n
    The below code shows the backend logic created in PHP for handling the posted data. This code has the default PHP mail()<\/em> function to send the contact details.<\/p>\n
    index.php<\/p>\n
    <?php\nuse Phppot\\DataSource; if (! empty($_POST[\"send\"])) { $name = $_POST[\"userName\"]; $email = $_POST[\"userEmail\"]; $subject = $_POST[\"subject\"]; $message = $_POST[\"message\"]; $isDatabase = false; if ($isDatabase) { require_once __DIR__ . \"\/lib\/DataSource.php\"; $ds = new DataSource(); $query = \"INSERT INTO tbl_contact (user_name, user_email, subject, message) VALUES (?, ?, ?, ?)\"; $paramType = \"ssss\"; $paramArray = array( $name, $email, $subject, $message ); $ds->insert($query, $paramType, $paramArray); } $toEmail = \"phppot@example.com\"; $mailHeaders = 'From: webmaster@example.com' . \"\\r\\n\" . 'Reply-To: ' . $name . '<' . $email . \">\\r\\n\" . 'X-Mailer: PHP\/' . phpversion(); $mailHeaders = \"From: \" . $name . \"<\" . $email . \">\\r\\n\"; \/\/ if lines are larger than 70 chars, then should be wrapped $message = wordwrap($message, 70, \"\\r\\n\"); \/\/ your PHP setup should have configuration to send mail $isValidMail = mail($toEmail, $subject, $message, $mailHeaders); if ($isValidMail) { $displayMessage = \"Message sent. Thank you.\"; }\n}\nrequire_once __DIR__ . \"\/bootstrap-contact-form.php\"; <\/pre>\n
    After setting $isDatabase<\/em> to true, configure the database details in this class to connect the database for the contact form action.<\/p>\n
    lib\/DataSource.php<\/p>\n
    <?php\n\/** * Copyright (C) Phppot * * Distributed under 'The MIT License (MIT)' * In essense, you can do commercial use, modify, distribute and private use. * Though not mandatory, you are requested to attribute Phppot URL in your code or website. *\/\nnamespace Phppot; \/** * Generic datasource class for handling DB operations. * Uses MySqli and PreparedStatements. * * @version 2.6 - recordCount function added *\/\nclass DataSource\n{ const HOST = 'localhost'; const USERNAME = 'root'; const PASSWORD = 'test'; const DATABASENAME = 'bootstrap_contact_form'; private $conn; \/** * PHP implicitly takes care of cleanup for default connection types. * So no need to worry about closing the connection. * * Singletons not required in PHP as there is no * concept of shared memory. * Every object lives only for a request. * * Keeping things simple and that works! *\/ function __construct() { $this->conn = $this->getConnection(); } \/** * If connection object is needed use this method and get access to it. * Otherwise, use the below methods for insert \/ update \/ etc. * * @return \\mysqli *\/ public function getConnection() { $conn = new \\mysqli(self::HOST, self::USERNAME, self::PASSWORD, self::DATABASENAME); if (mysqli_connect_errno()) { trigger_error(\"Problem with connecting to database.\"); } $conn->set_charset(\"utf8\"); return $conn; } \/** * To get database results * * @param string $query * @param string $paramType * @param array $paramArray * @return array *\/ public function select($query, $paramType = \"\", $paramArray = array()) { $stmt = $this->conn->prepare($query); if (! empty($paramType) && ! empty($paramArray)) { $this->bindQueryParams($stmt, $paramType, $paramArray); } $stmt->execute(); $result = $stmt->get_result(); if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $resultset[] = $row; } } if (! empty($resultset)) { return $resultset; } } \/** * To insert * * @param string $query * @param string $paramType * @param array $paramArray * @return int *\/ public function insert($query, $paramType, $paramArray) { $stmt = $this->conn->prepare($query); $this->bindQueryParams($stmt, $paramType, $paramArray); $stmt->execute(); $insertId = $stmt->insert_id; return $insertId; } \/** * To execute query * * @param string $query * @param string $paramType * @param array $paramArray *\/ public function execute($query, $paramType = \"\", $paramArray = array()) { $stmt = $this->conn->prepare($query); if (! empty($paramType) && ! empty($paramArray)) { $this->bindQueryParams($stmt, $paramType, $paramArray); } $stmt->execute(); } \/** * 1. * Prepares parameter binding * 2. Bind prameters to the sql statement * * @param string $stmt * @param string $paramType * @param array $paramArray *\/ public function bindQueryParams($stmt, $paramType, $paramArray = array()) { $paramValueReference[] = & $paramType; for ($i = 0; $i < count($paramArray); $i ++) { $paramValueReference[] = & $paramArray[$i]; } call_user_func_array(array( $stmt, 'bind_param' ), $paramValueReference); } \/** * To get database results * * @param string $query * @param string $paramType * @param array $paramArray * @return array *\/ public function getRecordCount($query, $paramType = \"\", $paramArray = array()) { $stmt = $this->conn->prepare($query); if (! empty($paramType) && ! empty($paramArray)) { $this->bindQueryParams($stmt, $paramType, $paramArray); } $stmt->execute(); $stmt->store_result(); $recordCount = $stmt->num_rows; return $recordCount; }\n} <\/pre>\n
    This screenshot shows the Bootstrap contact form example output. It displays the valid fields in green and the invalid fields in red.<\/p>\n
    This indication will notify the user on clicking the \u201cSend Email\u201d submit button.<\/p>\n
    \"Bootstrap<\/p>\n
    On successful mail sending, a success response will send to the user as shown below.<\/p>\n
    \"Contact
    Download<\/a><\/p>\n
      <\/p>\n
    \n
    Popular Articles<\/h2>\n<\/p><\/div>\n
     \u2191 Back to Top<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"
    Last modified on September 7th, 2020. Bootstrap is the most popular solution to design an optimum, intuitive, mobile-ready UI components. It is easy to integrate the Bootstrap library for the application interface. Often, many of my readers ask for a Bootstrap contact form code. So I thought of creating a basic example for a Bootstrap […]<\/p>\n","protected":false},"author":2,"featured_media":117668,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"class_list":["post-117667","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-updates"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/117667","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=117667"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/117667\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/117668"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=117667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=117667"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=117667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}