Floating Ajax based Contact Form

Floating contact form is ideal solution if you want to let your visitors instantly contact you without having to go to contact page. In this tutorial I’ll be creating a floating contact form using CSS, jQuery and PHP, which will be positioned “fixed” on the right side of the page. The form can be toggle open or closed by clicking on the opener button.

The base code for this tutorial is pretty similar to my previous tutorial Simple Ajax contact form, you may visit and learn how this Ajax contact form really works if you are pretty novice one. Here mostly we are going to focus on CSS and jQuery part to make our existing contact from float and toggle on button click.
Floating Ajax Contact Form

Mark Up

Let’s create a typical HTML form with some input fields, I have enclosed form with some DIV elements here and assigned some IDs to the elements, we need these IDs later in jQuery code and CSS. You can place this markup anywhere within <body></body> section of your webpage. Typically on the top of the content, but after <body> tag.

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
<!-- contact form start -->
<div class="floating-form" id="contact_form">
<div class="contact-opener">Open Contact Form</div>
    <div class="floating-form-heading">Please Contact Us</div>
    <div id="contact_results"></div>
    <div id="contact_body">
        <label><span>Name <span class="required">*</span></span>
            <input type="text" name="name" id="name" required="true" class="input-field">
        </label>
        <label><span>Email <span class="required">*</span></span>
            <input type="email" name="email" required="true" class="input-field">
        </label>
        <label><span>Phone <span class="required">*</span></span>
            <input type="text" name="phone1" maxlength="4" placeholder="+91" required="true" class="tel-number-field">
            —<input type="text" name="phone2" maxlength="15" required="true" class="tel-number-field long">
        </label>
        <label for="subject"><span>Regarding</span>
            <select name="subject" class="select-field">
            <option value="General Question">General Question</option>
            <option value="Advertise">Advertisement</option>
            <option value="Partnership">Partnership Oppertunity</option>
            </select>
        </label>
            <label for="field5"><span>Message <span class="required">*</span></span>
            <textarea name="message" id="message" class="textarea-field" required="true"></textarea>
        </label>
        <label>
            <span>&nbsp;</span><input type="submit" id="submit_btn" value="Submit">
        </label>
    </div>
</div>
<!-- contact form end -->

Styling Contact Form

Using CSS position:fixed we can make our contact from stick to a position, and using left or right property it can be positioned on either side of the page. That’s the primary CSS trick here, later using jQuery we can create an effect for page scroll.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* floating box style */
.floating-form { /*contact form wrapper*/
    max-width: 300px;
    padding: 30px 30px 10px 30px;
    border: 1px solid #ddd;
    right: 10px;
    position: fixed; /*Form position fixed*/
    }
.contact-opener { /*opener button*/
    position: absolute;
    left: -88px;
    transform: rotate(-90deg); /* rotate button -90deg */
    top: 100px;
    padding: 9px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.43);
    cursor: pointer;
    border-radius: 5px 5px 0px 0px;
}

To fit the opener button perfectly on the right, I’ve used transform:rotate(-90deg) CSS3 property, it will rotate the button, and will look pretty good. But remember some old browsers do not support this CSS3 feature, if you are concerned about old browsers, you might want to use background image instead.

jQuery

When the page loads, we want our contact form to be hidden on the right side, it will remain hidden until user clicks on opener button and opens the contact form. For that we will be using jQuery animation() method. Just play with the position value in the code below to get it absolutely right for your page layout.

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
    var _scroll = true, _timer = false, _floatbox = $("#contact_form"), _floatbox_opener = $(".contact-opener") ;
    _floatbox.css("right", "-322px"); //initial contact form position
   
    //Contact form Opener button
    _floatbox_opener.click(function(){
        if (_floatbox.hasClass('visiable')){
            _floatbox.animate({"right":"-322px"}, {duration: 300}).removeClass('visiable');
        }else{
           _floatbox.animate({"right":"0px"},  {duration: 300}).addClass('visiable');
        }
    });
});

We also want to give our contact from some effect when user scrolls the page, because a fixed contact from looks rather boring, so we give it some floating feel.

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
$(document).ready(function(){
    var _scroll = true, _timer = false, _floatbox = $("#contact_form"), _floatbox_opener = $(".contact-opener") ;
    _floatbox.css("right", "-322px"); //initial contact form position
   
    //Contact form Opener button
    _floatbox_opener.click(function(){
        if (_floatbox.hasClass('visiable')){
            _floatbox.animate({"right":"-322px"}, {duration: 300}).removeClass('visiable');
        }else{
           _floatbox.animate({"right":"0px"},  {duration: 300}).addClass('visiable');
        }
    });

    //Effect on Scroll
    $(window).scroll(function(){
        if(_scroll){
            _floatbox.animate({"top": "30px"},{duration: 300});
            _scroll = false;
        }
        if(_timer !== false){ clearTimeout(_timer); }          
            _timer = setTimeout(function(){_scroll = true;
            _floatbox.animate({"top": "10px"},{easing: "linear"}, {duration: 500});}, 400);
    });

});

Conclusion

To make this tutorial brief, I haven’t included the jQuery Ajax and PHP part, you can always go back to my previous post : Simple Ajax contact form and examine the code. Or just download example code from download link below, which includes all the pieces you need to create your own floating Ajax contact form, good luck!

Download Demo

22 Comments Add Comment

  • Thank You!
    Works in a wonderful way.
    How can we send with SMTP it would be very nice if you could set up a PHP file.

     Reply
  • it is working fine thanks u very much such a brilliant script

     Reply
  • if i add this code the submit button is not working

     Reply
  • I have installed this form on xammp but it is not sending message and giving this error can someone provide me with the solution

    Undefined index: HTTP_X_REQUESTED_WITH in C:\xampp\htdocs\aq\contact_me.php on line 8
    {“type”:”error”,”text”:”Sorry Request must be Ajax POST”}

     Reply
  • on page load form should be open.

     Reply
  • Really good tutorial and work perfectly, but i just want to move it from the right to the left side, what should i do?

     Reply
  • How can i make this form submit the data to an email address via javascript if possible. If i use a tag i can have the data sent to an email or a database. But i loose some of the functionality of the form staying open and stating a message that the information was sent.

     Reply
  • Hello,
    I am trying to use your script on this page http://buyeuroauto.com/ but no response when i tried to submit the form, not happens

     Reply
  • add this css to stick the contact link

    #contact-wrapper #contact-btn{
    position:fixed;
    }

     Reply
    • #contact-wrapper #contact-btn{
      position:fixed;
      }…………………………………………………..its work and every thing work perfectly

      $headers = ‘From: ‘.$user_Email.” . “rn” .
      ‘Reply-To: ‘.$user_Email.” . “rn” .
      ………………………………………………………..should be replace

      $headers = ‘From: ‘.$user_Email.” . “\r\n” .
      ‘Reply-To: ‘.$user_Email.” . “\r\n” .

  • not good when I have tried to scroll the page down , form has gone down with the scroll

     Reply
  • how do I open the form on the other side , from left to right ?

     Reply
  • Tried and tried but just get a message that comes up on ‘sending’ … “Internal Server Error”
    Any ideas ? Anything to do with ajax_response.php lines 4 thro 6 ?

     Reply
    • Finally got the programme to work but had to uninstall from my website as any hyperlink that was underneath the ‘#contact-wrapper’ became temporally invalid.
      Tried moving the ‘#contact-wrapper’ up and down the page but it conflicted to much with the hyperlinks.
      Good try otherwise !

  • I am getting error on this line $(w).on(‘scroll.sticky, resize.sticky’, that.onScroll);
    Uncaught TypeError: undefined is not a function
    Any ideas?

     Reply
  • Nice tutorial!
    However scrolling down seems to cause problems as affects the form’s position. Even in your example, it’s not appeared after some scrolling. Is there any way to make this work?

     Reply
    • Yo George!

      Here’s a terrible CSS fix of the problem:
      ADD “!IMPORTANT” TO THE DEFAULT CSS TO OVERRIDE THE AJAX

      #contact-wrapper {
      top: 50px !important;
      }

    • Solved Problem
      1 . Floating problrm………try

      #contact-wrapper{
      position: fixed;
      right: 0px;
      z-index: 99999;
      top: 1000px;
      height: 300px;
      float: left;
      }

      2. Display problem……try

      Before end of body …….code…….

      $( document ).ready(function() {
      $(‘#contact-wrapper’).stickyfloat({ duration: 200, cssTransition: true, offsetY:200}); //stickyfloat contact form

      $(“#contact-btn”).click(function() { //smoothly slide open/close form
      var floatbox = $(“#floating-contact-wrap”);
      if (floatbox.hasClass(‘visiable’)){
      floatbox.animate({“right”:”-340px”}, “fast”).removeClass(‘visiable’);
      }else{
      floatbox.animate({“right”:”0px”}, “fast”).addClass(‘visiable’);
      }
      });

      $(“#message-send-btn”).click(function() { //try sending email

      //validate the form
      var validator = $( “#floating-contact”).validate();
      var isValid = validator.form();

      if(isValid){ //is everyting valid? proceed

      //collect values from input fields
      var user_name = $(‘.floating-contact-inner input[name=name]’).val();
      var user_email = $(‘.floating-contact-inner input[name=email]’).val();
      var user_message = $(‘.floating-contact-inner textarea[name=message]’).val();

      //prepare ajax data
      post_data = {‘s_name’:user_name, ‘s_email’:user_email, ‘s_message’:user_message};

      $(this).hide(); //hide submit button
      $(‘#ajax-loading-image’).show(); //show loading image

      $.post(‘ajax_response.php’, post_data, function(data){
      validator.resetForm();
      //load success massage in #result div element,
      $(“#result”).hide().html(”+data+”).slideDown();
      $(‘#floating-contact’).hide(); //show submit button

      }).fail(function(err) { //load any error data

      $(“#result”).hide().html(”+err.statusText+”).slideDown();
      $(“#message-send-btn”).show(); //show submit button
      $(‘#ajax-loading-image’).hide(); //hide loading image

      });

      }else{
      $(“#message-send-btn”).show(); //show submit button
      $(‘#ajax-loading-image’).hide(); //hide loading image
      }
      });

      });

      And…………………..And ………………………….And…………………..and…………………………………

      Add code on Footer

      After Footer end………………………

       

      Name

      Email

      Message

       

      3. Responsive probleme…..Working on it .till time try to use Display:none with device 240 to 480 pxl