A Better Form – A jQuery Plugin

A Better Form is a jQuery plugin I designed to help stop automated form submissions. A Better Form can dramatically reduce or completely eliminate spam comments, email spam, spam articles, and other kinds of automated spam.

How Does It Work?

A Better Form creates a hostile environment for bots by performing a number of tasks, checks, and balances.

No form = no spam!

A Better Form allows webmasters to build web forms using no form elements at all. A Better Form can convert HTML objects to form elements, taking the form out of “form”. As simple as it may sound, removing the form elements from the form thwarts 90% of spambots. Using this method, forms are no longer set apart from the rest of the HTML. Bots can’t even find a form to spam!

Interaction required!

A Better Form detects when a form is being interacted with and requires certain kinds of interaction spambots are incapable of simulating.

Browser capabilities required!

A Better Form uses JavaScript and browser cookies to process and validate submission.

Valid data required!

A Better Form provides numerous options and classes which aid in customization and form data validation.

Callbacks And Serialization

A Better Form provides webmasters powerful tools for handling form submissions, such as pluggable callback functionality, data serialization, and JSON encoding.

A Better Form may not be the perfect solution for every type of circumstance. However, because of it’s features, it can be customized to suit most needs.

Download

Download the source from my repository.

DEMOS

Working examples can be seen here!

Documentation And Examples

Think you can crack it?

If you can beat A Better Form at it’s own game, please send me an example. A Better Form eliminated 100% of the automated form submissions from my websites.

A form is only as secure as it’s processing script.

Are you using A Better Form but continue to receive spam form submissions? Be sure the spammer isn’t bypassing your form by attacking the form processing script. Just because the form is secure doesn’t mean the form’s processing script is also. A Better Form is client-side technology, but form data is processed server-side. So, be sure your server-side script is secured. A Better Form stops bots on the client-side, but does not prevent bots from attacking your server-side processing script directly.

If you need help securing your forms, I am available for hire.

  • Phil

    Love the plugin – it’s ingenius – thanks for making it available.

    Do you have an example including some validation in the callback function? I have managed to get simple validation to work, but then the form will not submit when this error is corrected.

  • Jason

    Please get the latest version. I’ve made some updates which will help you validate your form data. I have also updated the documentation with the new options and classes, and created some demo pages, which you can find on the examples page.

    Thanks for your comment.

  • Phil

    Fantastic – thanks Jason.

  • Alex

    What about of hidden input fields? Feels not work with this plugin for now?

  • Jason

    Yes, hidden fields do work with this plugin. See the example pages at http://jasonlau.biz/home/a-better-form-a-jquery-plugin/examples at the bottom of the examples section.

  • Webmaxter

    What is the “Authorization requiered!” message ?
    Send data is not working for me. I’ve correctly configure the form, I can see the remplaced field.
    But when I am clicking on submit, I’ve got this message…

  • Jason

    What is the URL address for the webpage when you see the “Authorization Required” message? Are you using the Form Builder to make your form? Please post a copy of the javascript you’re using.

  • Webmaxter

    (Sorry for my bad english, I’m French…)
    The URL for the page is the same as loading, there is no change when the submit button is clicked.

    This is my form :

    Name :
    Mail :
    Message :

    Send 
    Reset

    And this is my script :
    jQuery(document).ready(function(){
    $(“#contact_f”).abform({
    attributes :’action=”?contact” method=”POST”‘,
    multipart : true,
    serialized : false,
    convert : ‘{name|text|class=”abrequired”}{mail|text|class=”abemail abrequired”}{message|textarea|cols=”80″ rows=”5″ class=”abrequired” style=”width:99%;”}{submit|button|class=”absubmit”}{reset|button|class=”abreset”}’
    });
    });

    I tried some changes but nothing better.
    Thank you in advance for your help and for your plugin.

  • Webmaxter

    …and I did not use the Builder, I followed the instructions in the documentation.

  • Jason

    Try removing the “attributes” option. The problem may be the “action” attribute you are using. Try using the #hash symbol instead of “?contact”. Or use the full path instead – For example, “index.php?mode=contact”.

  • Webmaxter

    Removing the “attributes” changes nothing.
    Use the # symbol or use the full path does not resolve the matter either. Even if I have the same data in the js file.
    The problem exists both locally and online.

    Thank you !

  • http://pulse.yahoo.com/_RYM3KZVAHWXADZ5BLFZBB5LGF4 OsmanG

    211

  • Captain WAI

    Does the word “accessibility” mean anything to you?

  • http://jasonlau.biz Jason Lau

    That’s vague. Usually, “accessibility” is relative to “spam”. The more accessible something is, the more spam it receives.

  • Marc Palmer

    The fact that you do not have a demo of this makes this plugin essentially worthless. I will not download this when I can’t see what it even does. Complete waste of my time.

  • Jason

    If you spent less time complaining and more time looking, you would have found the example pages. Now I’ll waste my time by pointing you in the proper direction. http://jsonlau.com/home/2011/a-better-form-examples/

  • Meathor

    Is any Demo available?

  • http://webxecutive.com/ Jason