Drop · Working Modal Contact Form

This HTML5, CSS3, PHP, AJAX modal contact form includes PHP and AJAX codes to help you create a working contact form for your website. This comes with different color variations and CSS3 animations. It is based on Bootstrap jQuery modal plugin.



· · · · ·


How to set up:

It is easy and no need to documentation because all codes almost all codes are commented. When you download this product, you will receive a zip folder. Open the zip folder in local server or live server and you should see a page similar to this page.



Available color variations:

As you see above, there are 6 color variations. You can create as much as you want. All these color variations are based on class. For example for creating the first color variation you need the following class. Pay attention to primary.


<button class="btn btn-lg btn-hmcf btn-primary" data-toggle="modal" data-target="#modalPrimary">Contact Us</button>

<div class="modal fade modal-hmcf modal-primary" id="modalPrimary" tabindex="-1" role="dialog" aria-labelledby="modalPrimaryLabel" aria-hidden="true">
  ... 
  <h4 class="modal-title" id="modalPrimaryLabel">Drop us a line</h4>
  ...
</div>

You guessed it? for creating the 2nd color variation like above, replace the primary with danger. Consider that these words are case sensitive.



Available animations:

The default animation is fade. There are 30+ animations available and you need to change them with jQuery. Consider that we only provide animations for entrance and the exit animations fade for all. Animations' list →


$('#modalDanger').on('show.bs.modal', function (e) {
  $(this).find(".modal-content").addClass("animated bounce");
});


Inputs states:

There are two effects for :focus state. In default state, color of the input icons color changes like the 1st top modal and for the other state, inputs background color changes like the 2nd top modal. You only need to add .alt-state to form tag. Look below:


<form action="php/submit.php" method="POST" class="alt-state" role="form"> 
... 
</form>