Slide Submit – A jQuery Plugin For Spam-less Forms

Posted on July 12, 2012 by

Slide Submit is a jQuery plugin which will convert almost any object into a form-submitting or form-enabling slider. Instead of pressing a button, users can slide the slider to submit the form. Or, if you build your form with all of the fields disabled, you can create a slider which behaves like a toggle switch to enable and disable the fields.

Demo:

Demo Source Code:

This plugin requires both jQuery and jQuery UI.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="JasonLau.biz" />

	<title>Slide To Submit Demo</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script>
    <style type="text/css">
    <!--
    #demo-form{
        width: 350px;
        padding: 40px;
        border: 1px solid gray;
        margin: 0px auto;
        -moz-border-radius: 4px;
        -khtml-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
    }
    
    #submit-slider{
        width: 150px;
    }
    
    #result{
        padding: 10px;
        margin: 10px 0px;
    }
    -->
    </style>
    <script type="text/javascript" src="jquery.slidesubmit.js"></script>
    <script type="text/javascript">
	<!-- 
    jQuery(function($){
        $( "#submit-slider" ).slidesubmit({
            form_container: '.demo-form',
            form_wrap: true,
            form_atts: 'action="#" method="post"',
            hidden_field: '.for-bots',
            label_class: 'slide-submit-label'
        });
        $( "#enable-form-slider" ).slidesubmit({
            form_container: '#demo-form',
            label : 'Slide To Enable Form',
            slide_enable: true 
        });
    });
     -->
</script>
</head>

<body>

<div id="demo-form" class="demo-form">
<?php
	if($_POST):
?>
<div id="result" class="ui-state-highlight ui-corner-all padding-4">The form was submitted!</div>
<?php
	endif;
?>
<div id="enable-form-slider"></div><br />
<label>Your Name</label><br />
<input type="text" class="demo-name" required="required" form="demo-form" disabled="disabled" /><br />
<label>Your Email</label><br />
<input type="email" class="demo-email" required="required" form="demo-form" disabled="disabled" /><br />
<label>Message Subject</label><br />
<input type="text" class="demo-subject" required="required" form="demo-form" disabled="disabled" /><br />
<label>Message</label><br />
<textarea cols="30" rows="5" class="demo-message" disabled="disabled"></textarea><br />
<input type="hidden" class="for-bots" name="forbots" value="" /><br />
<div id="submit-slider"></div>
</div>
</body>
</html>

View the demo in a new window.

Options:

Slide Submit has a few options which can help reduce spam or customize the slider. Below are all of the plugin’s options and their default values.

  • form_container : false
    Either the class or id selector for the form container. Optional. If no selector is chosen, by default, the slider’s parent will be selected as the container. Example: form_container: ‘.my-form-container’ or form_container: ‘#my-form-container’
  • value : 1
    This is the numeric value the slider will return upon submission.
  • label : ‘Slide To Submit’
    This text will be placed either immediately before or after the slider, depending on the label_position option. Instructs the user. Set this to false for no label.
  • label_class : ‘slide-submit-label’
    Optional css class for the label.
  • label_position : ‘before’
    Either before or after.
  • width : ’100px’
    The width of the slider in pixels.
  • form_wrap: false
    Boolean: true or false to wrap the slider’s parent container in a form tag before submitting. This allows you to code the form without a form tag.
  • form_atts: ‘action=”#” method=”post”‘
    The attributes for the form tag. Only used if form_wrap is called.
  • hidden_field: false
    If you code your  form manually, add a hidden form field, give it a unique ID or class name, and insert the id or class selector here. Spambots will populate the hidden field, which will disable the form, preventing them from submitting it. See the demo source.
    Example: 
    hidden_field: '#my-hidden-field-id'

    Or: 

    hidden_field: '.my-hidden-field-class'
  • slide_enable: false
    Setting this to true will change the behavior of the slider’s action. Instead of submitting the form, the slider will toggle all of the form fields to enable or disable them. This assumes the form fields are disabled to begin with. See the demo for a working example.

See below how options are used.

$( "#submit-slider" ).slidesubmit({
            form_wrap: true,
            form_atts: 'action="#" method="post"',
            hidden_field: '.for-bots'
        });

Follow The Link Below To Download jquery.slidesubmit.js

Source Code: jquery.slidesubmit.js
 
 

Posted in jQuery | 16 Comments »
Tagged: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

  • Anaïs Faë

    Thank you very much !
    But jQuery has updated yesterday, your code doesn’t work anymore.. I solved the problem by using :

    instead of :

  • http://websitedev.biz/ Web Dev

    jQuery UI needed to be updated to version 1.8.22 to work with jQuery latest.

    Thanks for the report!

  • http://twitter.com/TheGolfSpace Tony Korologos

    Maybe I’m brain dead, but what are the post variables then?

  • http://websitedev.biz/ Web Dev

    The post’d variables will be whatever the name attributes for your form-fields are. The form will post the same variables it would if you were using a submit button.

  • http://twitter.com/TheGolfSpace Tony Korologos

    Perhaps I should back up and try it out of the box first. I’m working on converting this to a joomla contact form so I can eliminate contact form spam on my joomla based sites. I can’t get the post data for some reason.

  • http://websitedev.biz/ Web Dev

    If you’re interested, I designed a contact form for Joomla some time ago.

    Unfortunately someone else (Mustaq Sheikh) is stealing all of the credit for developing it now. Such is the life of an opensource developer, I suppose.

    Anyway, here it is http://extensions.joomla.org/extensions/extension-specific/zoo-extensions/18145

  • http://websitedev.biz/ Web Dev

    Are you using form_wrap: true , in addition to the form tag in your HTML?

    If so, you need to use form_wrap: false instead, or remove the form tag from the HTML, and use a div instead.

    Otherwise the form itself becomes wrapped in another form tag, which could lead to empty form-submissions.

    Using form_wrap: true allows you to omit the form tag from the webpage HTML, making it difficult for bots to submit the form.

  • http://twitter.com/TheGolfSpace Tony Korologos

    Just checked that out. Didn’t see any sliders in the demo. If I get this figured out I can release the extension with full credit to your work. I’ll check the form wrap issue. Many thanks. I’ll keep you posted.

  • http://twitter.com/TheGolfSpace Tony Korologos

    And IF they stole it from you, it is a commercial release. #lame

  • http://twitter.com/TheGolfSpace Tony Korologos

    For some reason if I change form_wrap to false I don’t get any post data. If I leave it as true, I get only the field forbots. I added a hidden field and I’m able to get that data post as well. Not a .js pro haha.

  • http://websitedev.biz/ Web Dev

    IF?

    He wanted support in making a spam-free contact form, just like you are; except you’ve already disclosed your intentions, while he didn’t. I took MY contact form and tweaked it for use in Joomla, and he turned around and claims the credit. AND yes, he profited from it, which is illegal, since I released it under a GPL license. Click my “Contact Me” link and you’ll see the similarities. #lame is correct. It’s what people do. You might be surprised how many times I have found my own work with someone else’s name on it.

  • http://websitedev.biz/ Web Dev

    That form doesn’t use sliders, but uses other spam-prevention methods. If you will send me your code, or a link to your development site, I will see what’s wrong. Otherwise, I am just taking stabs at it and guessing.

  • http://websitedev.biz/ Web Dev

    Be sure to add the “name” attribute to your form fields. The demo does not have the name attributes for security reasons. The only field with a name in the demo is forbots, which is probably why you’re seeing that field and not the others.

  • http://websitedev.biz/ Web Dev

    I will change the demo or the plugin so this doesn’t happen to someone else in the future.

  • http://twitter.com/TheGolfSpace Tony Korologos

    OMG I feel a little embarrassed. I assumed that part of the trick of the spam prevention was the lack of the name attribute! I put the name attribute in and the fields are properly posting! Hah! So obvious. Next step, (learning query and jquery with joomla) is to get all the jquery calls properly coded for joomla.

  • HTMS

    bot’s can’t slide?