Slide Submit – A jQuery Plugin For Spam-less Forms

Posted on July 12, 2012 by Jason

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="/vendor/jquery-ui-1.8.22.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 »