Free Bootstrap Contact Form Template with PHP, jQuery, AJAX

Published on: Mar 05 2016 by Anli

Bootstrap Contact Form Template PHP, jQuery, AJAX

Today’s web design resource is a new Bootstrap Contact Form template made with PHP, jQuery, AJAX and, of course, HTML5 & CSS3. The template is responsive and you can use it in the contact section of your website, either by integrating it in an existing page, or as a stand-alone page.

The form uses PHP and AJAX to validate and send the message to your chosen email address. It also comes with a fullscreen background and Font Awesome icons. Take a look below to find the full list of features, the live preview link and the download link. For my other free forms and templates click here.


You might also like:

Bootstrap Contact Forms: 2 Free Responsive Templates
How to Create a Bootstrap Contact Form with PHP, jQuery and AJAX

Features

  • Working Contact Form (PHP, jQuery, AJAX)
  • Responsive Layout (Bootstrap framework)
  • Fullscreen Background (Images Slider also available)
  • Form Validation, to prevent users from leaving empty fields
  • Font Awesome icons

How To Use The Template

Download the zip package below and extract it.

Use the “index.html” file to modify the HTML code. The style can be changed from the CSS files in the “css” folder (assets/css).

In the “contact.php” file (in assets) you can enter the email address where you want to receive the messages, or modify the error texts.

I have also used some Javascript (jQuery) for the form validation (AJAX), for the error messages, for the text to display when the form is sent correctly and for the fullscreen background. You can find this code in the “scripts.js” file (assets/js).

The images are located in the “img” folder (assets/img).

Tutorials

How to Add a New Dropdown / Select Field to This Form

Demo, Download and License

VIEW DEMO

DOWNLOAD: Free Bootstrap Contact Form Template (1290)

LICENSE:

You can use this Bootstrap contact form template in personal and commercial projects, but you can’t sell or distribute it directly, “as is”. If you plan to use it, a link to this page or any form of spreading the word will be much appreciated.

Background image by: StockSnap.io

Want More Forms?

Take a look at the Marco template. It comes with 10+ layouts and 30+ forms (contact, registration, login and subscription forms):

Marco Template: Contact Forms

Marco Template: Registration Forms

2 Comments So Far

  1. Digiben says:

    Mate can you also show how to add a select field.

Leave a Reply