If you would use, e.g., your Gmail address, the emails can be blocked by your web hosting provider.
Important: To avoid being marked as spam or even to be able to send it from your web host, use an existing email on your domain. If you will be using the form on, use this variable.
$from - the email address that will be in the From field of the email. In the first part of the script, we configure the basic variables we will need. The PHP script that will handle the email sending is located in the contact.php file. This should basically do for the HTML part of the form, and we can move on to the PHP script.ĭo not forget to download and include the Bootstrap validator JavaScript files if you are writing the code yourself and not using the CDN version.
Also, note type="email" and type="tel" inputs that will enhance the user experience, especially for users using a mobile device. To display the possible errors, there is a block added to each form-group. We will be using custom error messages for each field, passed to the script in the data-error attribute. In our case, these are required and type="email". Validation rules are specified on form inputs via the standard HTML5 attributes. For the validation of the fields, we will be using the great Bootstrap validator. This should contain the id of the form element it refers to. Do not forget to properly assign labels for the fields using their for attribute. To learn more about Bootstrap columns and rows, check out this tutorial. 
Form groups are Bootstrap helpers that take care of the appropriate vertical spacing in the form.
Standard Bootstrap forms markup is used - rows, columns, form groups. messages that will serve us to display the success or error message after sending the form via AJAX. As there could be more forms on the page (search etc.), we mark our form with #contact-form id to address it correctly in JavaScript later on. We will send the contact form values via POST to the PHP script called contact.php. Well, this looks a bit more interesting already, so let's have a look at all the pieces of the puzzle now: In the end, our form should look like this: This is a demo for our tutorial dedicated to crafting working Bootstrap contact form with PHP and AJAX background.Īs we have the main layout ready, we can replace the in our HTML code with our fancy Bootstrap Contact form itself. for Bootstrap, jQuery and a Font Awesome I used their CDN versions. If you test the scripts without an internet connection, don't forget to include their local versions.Ĭontact Form Tutorial by Ĭontact form Tutorial from. before the closing tag, we include jQuery, Bootstrap scripts, Bootstrap validator, and local contact.js file which will handle AJAX sending of the form. In the head, we include the Bootstrap stylesheet, Lato from Google fonts, and a local custom.css stylesheet. 
There should not be anything tricky for you, so just a few words about it: Let's start with the main HTML layout of our contact form page. Bootstrap 3 version is also part of the download. PHP provides functions for connecting to a MySQL database.Note: I updated this tutorial to Bootstrap 4 already but no worries if you are still using Bootstrap 3 in your project.
0 kommentar(er)
