Simple Contact Form with Bootstrap, PHP and Ajax (Updated to Bootstrap 4)

I am writing this simple yet very helpful tutorial about creating a simple contact form using Bootstrap and PHP. We will use Bootstrap to design the form and submit the form through an Ajax request to the server. At the backend, we will have PHP file which will check the submitted data and send an email to our desired email address. Through this backend code, we will send a response as Sent or Failed and based on that, we will show a message at the front end.

Note: We will not be doing any explicit data validation for now. However, we will use default HTML5 validation in the form.

We need total 3 things to complete this simple contact form. The HTML markup, PHP code, and Ajax request code. Let’s start!

1. The HTML markup

The HTML markup will be a simple HTML form with some input fields and buttons. I am using simple Bootstrap to design the form. Here I am using the Bootstrap stylesheet from the CDN. However, you can download the CSS and host it on your own server. Below is the markup which will create an HTML form shown at the top of this tutorial.

The above markup will give us the output as shown in the images above when we load the page.

Great! We are done with the HTML markup. Next, we have to create server-side code which will actually process the form request. Through this code, we will take the data submitted by the form and send an email to a particular email address. We assume that the HTTP POST request will contain the name, email and message data. So we will extract these data from the HTTP POST request, and send these details through email to a particular email id.

We have to send the data to a different email id e.g. the email address of the admin of the site, and not to the email address submitted by the user/visitor 🙂

2. Server-side PHP code

Cool! So here is the code which will do the job. Consider the following code inside submit.php. We need this name when we submit the form.

3. Ajax request code

So we are done with the HTML markup and server-side PHP code. Now the final step is to submit the HTML form to the PHP server through HTTP POST request. Here in this tutorial, we will submit the form through an Ajax request as mentioned in the start of the tutorial. Based on the response received back from the server, we will print some message for the user. Below is the code to submit the form through Ajax

We also need to load jquery.js in order to use the HTTP Ajax request. For this tutorial, I’m loading this jquery through CDN. But you can host it on your server as mentioned above regarding the Bootstrap style.

So, the final markup along with Ajax request will be

You can also put all this code together in a single PHP file, instead of keeping the HTML markup and PHP code separately.

And we have created a simple contact form using Bootstrap, PHP, and Ajax. We used minimal code to develop this form. However, you can customize this form as much as you want.

Feel free to drop a comment if you are facing any difficulties in implementing this form at your end. If you want to get a complete customized contact form for your site, you can contact us and we will get you done this for just $10.

If you feel this tutorial can be helpful for others, please share!