How to create contact form using bootstrap

How to create contact Form - FREE PDF

Code Examples
Links to all the resources

Hey guys!

Today we will talk about such essential feature for any website as contact form. Recently, while working on one of the projects, I had a pleasure combining couple of very nice tools (Bootstrap 3 + JQuery + jqBootstrapValidation), which resulted in minimalistic , but powerful contact form, that would be a good addition to any website.

VIEW DEMO CODE

In this post I will walk you through the process of developing this form. Also if you just want to put it in your website, just pulled from my github repo and have fun.

Sounds good ?

Let’s start.

When I was developing my form I had in mind following goals:

– Minimalistic design
– Track person’s contacts for future communication
– Send form information directly to my email
– Validate input – client side and server side
– Show success when form is sent, or provide alternative method if something went wrong

As you might see – nothing special. I would love if somebody else would provide me this solution yesterday, when I was working on my project – this could save me some time!

Let’s divide our workflow into sections:
– Required Libraries
– UI
– Client-side Validation, JQuery – PHP Interaction
– PHP (so called server side)

Required Libraries

We will require following libraries :
– Botostrap 3
– jqBootstrapValidation

So all you need to do is just download necessary files and put them in.

After getting Bootstrap and jqBootstrapValidation our website tree will look like this:

–
– – css
– – – bootstrap.min.css
– – js
– – – bootstrap.min.js
– – – jqBootstrapValidation.js

Let’s move to the UI part.

UI

For the UI we will use Bootstrap 3 and some attributes from jqBootstrapValidation.js . I won’t cover Bootstrap 3 components as it will take far too long, but if something is unclear, please shoot me an email and I will clarify that for you.

So in the root of our website we need to create file form.html .

Final version of /form.html will look like this:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<!-- Contact form for your site by Anatoly Spektor  -->

 <body>

 <br />

 <!-- a row has to be in a container -->

<div class="container"> 

 <!-- Contacts -->

 <div id="contacts">

   <div class="row"> 

     <!-- Alignment -->

 <div class="col-sm-offset-3 col-sm-6">

    <!-- Form itself -->

          <form name="sentMessage" class="well" id="contactForm"  novalidate>

        <legend>Contact me</legend>

   <div class="control-group">

                    <div class="controls">

   <input type="text" class="form-control" 

          placeholder="Full Name" id="name" required

              data-validation-required-message="Please enter your name" />

     <p class="help-block"></p>

     </div>

          </div>  

                <div class="control-group">

                  <div class="controls">

   <input type="email" class="form-control" placeholder="Email" 

                   id="email" required

           data-validation-required-message="Please enter your email" />

  </div>

     </div>  

               <div class="control-group">

                 <div class="controls">

     <textarea rows="10" cols="100" class="form-control" 

                       placeholder="Message" id="message" required

         data-validation-required-message="Please enter your message" minlength="5" 

                       data-validation-minlength-message="Min 5 characters" 

                        maxlength="999" style="resize:none"></textarea>

  </div>

               </div>    

      <div id="success"> </div> <!-- For success/fail messages -->

     <button type="submit" class="btn btn-primary pull-right">Send</button><br />

          </form>

 </div>

      </div>

    </div>

   </div>

 <!-- JS FILES -->

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

 <script src="./js/bootstrap.min.js"></script>

 <script src="./js/jqBootstrapValidation.js"></script>

 <script src="./js/contact_me.js"></script>

  </body>

Sorry for this formatting, it’s hard to put code into WP, please find formatted version of form.html here

If you are familiar with Bootstrap – this code is pretty straightforward.

There are couple of important things I would like to point out:

Since we are using jqBootstrapValidation, we need to put novalidate attribute into our form tag, otherwise HTML5 validation will clip jqBootstrapValidation validation.
To change color/style of your error messages just change “.help-block” CSS class
data-validation-* classes are used to specify custom message when user does something incorrectly. You can find more about those here.
jqBootstrapValidation library looks at input and textarea tags and automatically puts validation if needed. For example if there is a “required” attribute, it automatically will put error message if the field is empty.

That’s all I can think of, if you have additional questions, please send me an email, or ask me in the comments below the post.

Client-side Validation, JQuery – PHP Interaction

So now we have finished the design of our form. Next step is to activate jqBootstrapValidation library, pass users data to PHP, which will send an email and finally show something to the user.

Most of these is done in one tiny JQuery function.

Here it is (file js/contact_me.js):

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

/*

  Jquery Validation using jqBootstrapValidation

   example is taken from jqBootstrapValidation docs 

  */

$(function() {

 $("input,textarea").jqBootstrapValidation(

    {

     preventSubmit: true,

     submitError: function($form, event, errors) {

      // something to have when submit produces an error ?

      // Not decided if I need it yet

     },

     submitSuccess: function($form, event) {

      event.preventDefault(); // prevent default submit behaviour

       // get values from FORM

       var name = $("input#name").val();  

       var email = $("input#email").val(); 

       var message = $("textarea#message").val();

        var firstName = name; // For Success/Failure Message

           // Check for white space in name for Success/Fail message

        if (firstName.indexOf(' ') >= 0) {

    firstName = name.split(' ').slice(0, -1).join(' ');

         }        

  $.ajax({

                url: "./bin/contact_me.php",

             type: "POST",

             data: {name: name, email: email, message: message},

             cache: false,

             success: function() {  

             // Success message

                $('#success').html("<div class='alert alert-success'>");

                $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")

              .append( "</button>");

               $('#success > .alert-success')

              .append("<strong>Your message has been sent. </strong>");

     $('#success > .alert-success')

    .append('</div>');

     //clear all fields

     $('#contactForm').trigger("reset");

        },

     error: function() {  

   // Fail message

    $('#success').html("<div class='alert alert-danger'>");

             $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")

              .append( "</button>");

             $('#success > .alert-danger').append("<strong>Sorry "+firstName+" it seems that my mail server is not responding...</strong> Could you please email me directly to <a href='mailto:me@example.com?Subject=Message_Me from myprogrammingblog.com'>me@example.com</a> ? Sorry for the inconvenience!");

          $('#success > .alert-danger').append('</div>');

   //clear all fields

   $('#contactForm').trigger("reset");

      },

           })

         },

         filter: function() {

                   return $(this).is(":visible");

         },

       });

      $("a[data-toggle="tab"]").click(function(e) {

                    e.preventDefault();

                    $(this).tab("show");

        });

  });

/*When clicking on Full hide fail/success boxes */ 

$('#name').focus(function() {

     $('#success').html('');

  });

For the most part I have took the function from jqBootstrapValidation examples. However, there are couple of things particularly interesting to us.

jqBootstrapValidation allows to overwrite submit on success behaviour, which I am doing in this case. If user submits everything without errors – I do a POST request to the file bin/contat_me.php with name, email and message.

File contact_me.php, which we will code in the next section, sends me an email with everything that user filled in. Also, I check If I am able to connect to this file, in this case I send back “Message sent successfully” to the user, otherwise I give an error telling user to email me directly ( use cases: for example if mail server is down, if validation on server side failed, if permissions to php file are incorrect etc) .

There is not much to add, but if you have any questions regarding this function do not hesitate to ask.

PHP (so called server side)

Finally, we got to the last piece of this puzzle. I have a php file that does some validation on the data received from form and sends me an email.

Here is my PHP file ( bin/contact_me.php )

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<?php

// check if fields passed are empty

if(empty($_POST['name'])    ||

   empty($_POST['email'])   ||

   empty($_POST['message']) ||

   !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))

   {

 echo "No arguments Provided!";

 return false;

   }

$name = $_POST['name'];

$email_address = $_POST['email'];

$message = $_POST['message'];

// create email body and send it 

$to = 'me@myprogrammingblog.com'; // put your email

$email_subject = "Contact form submitted by:  $name";

$email_body = "You have received a new message. nn".

      " Here are the details:n nName: $name n ".

      "Email: $email_addressn Message n $message";

$headers = "From: contacts@myprogrammingblog.comn";

$headers .= "Reply-To: $email_address"; 

mail($to,$email_subject,$email_body,$headers);

return true;   

?>

As you might see my PHP file is even more simple. Of course you can add extra validation on top of it. For my use case I am just checking if fields are not empty and if email has correct format. If everything is correct, I create an email and use PHP’s mail function to email it.

You can find all these files here.

I hope this function will be useful for you!

Where to host your Contact form ?

I have been asked by couple of you where to host this contact form. There are many good hosting providers, and I will certainly create a separate post comparing some of them, however if you are looking for something cheap (like $4 cheap

) quick and easy to use and setup – Bluehost is the way to go.

Regards,

Anatoly

Update:

F.A.Q

(Thanks a lot to Corey Russell for resolving some of the occurring issues)

Q: I see “Sorry <Name> it seems that my mail server is not responding… Could you please email me directly to….”
A: 1. Go to line 26 of the contact_me.js file you have. There you’ll see the url for contact_me.php. Make sure that url is correct. I think by default it is pointing to a folder called bin.
2. If you try it from your desktop it won’t work as it doesn’t have a php server/client installed.

All about IT

Search This Blog

How to create a contact form with Bootstrap ? (JQuery/PHP/HTML5/JqBootstrapValidation)

How to create a contact form with Bootstrap ? (JQuery/PHP/HTML5/JqBootstrapValidation)

How to create contact Form - FREE PDF

VIEW DEMO CODE

Required Libraries

UI

Client-side Validation, JQuery – PHP Interaction

PHP (so called server side)

Where to host your Contact form ?

Comments

Post a Comment

Popular posts from this blog

Top five MLM companies in Pakistan

Run Android on Your Computer

All about IT

How to create a contact form with Bootstrap ? (JQuery/PHP/HTML5/JqBootstrapValidation)

​

How to create contact Form - FREE PDF

VIEW DEMO CODE

Required Libraries

UI

Client-side Validation, JQuery – PHP Interaction

PHP (so called server side)

Where to host your Contact form ?

Comments

Post a Comment

Popular posts from this blog

Top five MLM companies in Pakistan

Run Android on Your Computer