jQuery Web Development

Contactable jQuery Plugin on The Right Side of Page

27 Comments read

Contactable is a great jQuery plugin by Philip Beel to include a nice sliding contact form, even if you only understand a tiny bit of jQuery and PHP.

I needed to use this plugin for one of my project, but I want it to be on the right side of the page instead of left. In order to do this, you need to change a small portion of the CSS and JS files. No special skills required. Still, you can save your time since you can download it directly below:

» click here to download Contactable on right side of page «

All credits go to Philip Beel. Instructions and demo can be checked directly on this plugin’s homepage.

RELATED POSTS

  1. Top Five jQuery Plugins For Any Project
  2. 5 Clean and Free Coming Soon Page Templates with Email Subscription Form
  3. Saidokā – Docked by your side
  4. MailChimp Subscribe Form with PHP, jQuery and AJAX

27 Comments Contactable jQuery Plugin on The Right Side of Page

    1. Michael

      Hi Arvin – You will need to have some HTML/jQuery knowledge to change the content. I would suggest to look at the plugin’s page for better directions on how to achieve this.

      Reply ↓
  4. Walter

    Hello!

    I new with code and PHP. Can you please explain me how this can work with a Bigcommerce template? Where I need to put the codes? What I need to do? Can you please help me?

    Thanks!

    Reply ↓
    1. Michael

      Hi Walter – It is quite difficult to do this if you never modified your BigCommerce template before, and honestly is also risky. My suggestion is to contact their support and provide the zipped files to get them to help to install it, if possible. Additionally, although I am not 100% sure aboute this, the mail.php script may not work as usually you cannot install your own PHP script on a hosted e-commerce platform.

      Sorry if this does not help much, but I am open to discuss this further if you really want to have it installed on your web store.

      Reply ↓
  5. Andreas Morawietz

    Wonderful Maikel! What a great work!
    Is there a simple solotion to have one “contcactable” left and a second “right”?
    i know , thats very bad! 🙂
    Greetings from Germany.
    Andreas

    Reply ↓
    1. Michael

      Hi Andreas – Thank you, it is really just a minor modification of Philip Beel’s great plugin. Well if you want to have two Contactable forms on the left and right, you will need to modify the JS and CSS files. Basically my version uses the same ID’s and everything else, so it is not designed to run simultaneously with the original.

      Sorry I cannot provide a “simple” suggestion for this case as you hoped 🙂

      Reply ↓
  7. justin

    onsubmit the error “Sorry but your message could not be sent, try again later” displays but it still sends the email. I’m scratching my head on this one.

    Reply ↓
  8. justin

    i have launched the contactable right on my web server, however after submitting the form, I just see the ajax image spin with no success or fail message. any suggestions?

    Reply ↓
  9. ogmios

    Hi:

    Really a fantastic job, clean and easy to implement. It works perfectly.

    I just have one question: It would be possible to open the form also using an href text? something like “click here”

    Reply ↓
    1. maykel

      Thanks, the credit should really go to Philip Beel the original creator of the plugin. I just slightly modify it.
      The link to open the form is generated by JS, to make sure it doesn’t appear on browsers where JS is disabled. So there is no easy way to change it to text, not without editing the JS file. Hope this answers your question.

      Reply ↓
  10. Shamash

    This is great.
    It would be even greater if you could kindly specify exactly where you have modified the original code.

    Reply ↓
    1. maykel

      Thanks. It has been more than a year since I made this slight modification of an excellent jQuery plugin, so I cannot remember the details of changes perfectly. But all I did was ‘reverting’ the animations to opposite direction, then minor adjustments to the image asset and CSS.

      Reply ↓
  12. edvaldo

    Sorry, but I can not change the field names of the form, try:

    //define the new for the plugin ans how to call it

    $.fn.contactable = function(options) {

    //set default options

    var defaults = {

    name: ‘n’,

    email: ‘Email’,

    message : ‘Mensage’,

    subject : ‘A contactable message’,

    recievedMsg : ‘OBRIGADO’,

    notRecievedMsg : ‘desculpe’,

    disclaimer: ‘Please feel free to get in touch, we value your feedback’,

    hideOnSubmit: true

    };

    but does not change, any tips?

    Thank-Edvaldo Brazil

    Reply ↓
    1. maykel

      You need to change the HTML construct on line 34 under jquery.contactable.js file. I can’t give you an example right now as the code was not displaying properly if I copied here, but do let me know if you still need some help.

      Reply ↓
    1. maykel

      Lee, everything seems to be correctly placed so I can’t be sure either what is wrong. But I do notice that jquery.js is being called twice, on the header and later near the bottom. You might want to clean that up, also try to move the line. See if that helps. I am curious with this problem, so keep me updated with the progress!

      Reply ↓
  16. Stillmatic

    Hey!
    You forgot something.
    The form wont scroll after finisch sending.

    $(‘#contactForm’).animate({dummy:1}, 2000).animate({“marginRight”: “-=450px”}, “slow”);
    $(‘div#contactable’).animate({dummy:1}, 2000).animate({“marginRight”: “-=447px”}, “slow”).animate({“marginRight”: “+=5px”}, “fast”);

    There it is. Rest is perfect

    THX

    Reply ↓

Leave a Reply