Git Product home page Git Product logo

contactable's Introduction

Contactable jQuery plugin.

Website : http://theodin.co.uk
Twitter : @philipbeel

Descrpition

Contactable is a jQuery plugin that enables users to incorporate a feature rich contact form into any website running PHP or Java.

Usage

Call in the jQuery framework and jquery.contactable.js in your webpage

<script type="text/javascript" src="jquery.contactable.js"></script>

Create an element in your HTML that you want the contact form to be generated into.

<div id="contactable"></div>

Initiate the contactable plugin when the page loads

$('#contactable').contactable({
	subject: 'A Feeback Message'
});

IMPORTANT

Open the mail.php file and look for [email protected] and replace with the email address you wish to receive contact messages to.

For Java web applications configure JNDI resource for javax.mail.Session for your servlet container (example for Tomcat included), customize Mail.java, , and change [email protected].

Plugin parameters

You can extend the contactables configuration with some of the following configuration

{
  subject: {String}           // Email subject heading
  header: {String}            // Text to display at the top of the form
  url: {String}               // URL path of mail.php file **must be absolute**
  name: {String}              // Name label
  email: {String}             // Email label
  dropdownTitle: {String}     // Dropdown label, if empty no dropdown is displayed
  dropdownOptions: {Array}    // Select options for dropdown
  message: {String}           // Message label
  submit: {String}            // Label text for the submit button
  recievedMsg: {String}       // Message successfully wording
  notRecievedMsg: {String}    // Message failed wording
  footer: {String}            // Text to display at the bottom of the form
  hideOnSubmit: {Boolean}     // hide the form after submitting it
}

contactable's People

Contributors

chuckhoupt avatar flokli avatar liborjelinek avatar martijnmegens avatar philipbeel avatar philipjbeel avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

contactable's Issues

When i click submit i get error message

I believe I have the code installed correctly however when i try filling the form and submitting the form - i get the "message could not be sent" message. Any idea what could cause this to happen? Thanks!

Sanitize user input in mail.php

Shouldn't the user input be a bit sanitized to prevent a possible attack vector against the mail client?

Contactable/mail.php

Lines 3 to 7 in a576ce4

$name = stripcslashes($_POST['name']);
$emailAddr = stripcslashes($_POST['email']);
$issue = stripcslashes($_POST['issue']);
$comment = stripcslashes($_POST['message']);
$subject = stripcslashes($_POST['subject']);

Wrapping these lines with htmlentitiesand ENT_QUOTES would make it probably much more secure already.

Minified version doesn't add css classes - breaks layout

I just downloaded the zip file containing the minified version of contactable.js.

Unfortunately it doesn't add the prefix #contactable to all the html elements while constructing contactable thus breaking the whole layout.

No "Sender"

Thank you very much for such nice plug-in. It works propertly! I have only one question: How can I apply an information about sender? For example, I use this form on my website and when anyone send me a massage from contact form, I get an E-Mail from "nobody". How can I apply this information?

jQuery.fn.toggle is deprecated

Currently contactable requires the use of jQuery migrate if you're using the current versions of jQuery. The browser console in chrome reports the following error (when you use migrate):

JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated

It appears related to the following code:

// Toggle the form visibility
jQuery.fn.toggleClick = function() {
    var functions = arguments, iteration = 0
    return this.click(function() {
        functions[iteration].apply(this, arguments)
        iteration = (iteration + 1) % functions.length
    })
}

Multiple fields

How can I add more text fields and drop downs to the contact form?

hideOnSubmit problem

Hi,
Thank you for the plugin! It's really nice. I have only one small problem, when I set hideOnSubmit to true, it works, but when I click again on contact, the contact button disappears from the page. how can I solve this?

Toggle visibility from external link?

Hi from Germany,
first of all thank you for your nice plugin. I try to achieve toggling the form by an external link, like this:

    // open and close feedback
    $('.feedback').on('click',function(e) {
        e.preventDefault();
        if($('#contactable-overlay').css('display') == 'block'){
            //is open, close it
            $('#contactable-contactForm').animate({"marginLeft": "-=390px"}, "4000");
            $('#contactable-inner').animate({"marginLeft": "-=387px"}, "4000").animate({"marginLeft": "+=5px"}, "2000");
            $('#contactable-overlay').css({display: 'none'});
        } else {
            // is close, open it
            $('#contactable-overlay').css({display: 'block'});
            $('#contactable-inner').animate({"marginLeft": "-=5px"}, "2000");
            $('#contactable-contactForm').animate({"marginLeft": "-=0px"}, "2000");
            $('#contactable-inner').animate({"marginLeft": "+=387px"}, "4000");
            $('#contactable-contactForm').animate({"marginLeft": "+=390px"}, "4000");   
        }
    });

Does not properly work for me. Do you have any advice how to toggle visibility of the form from anywhere on the page? Thank you for your help!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.