Involver Developer Network : signup

To configure which fields you want the signup_form feature block to collect is as simple as defining HTML form input tags in the body of your feature block definition. Please note that in order to export data you will need to configure matching export fields with the same names as the fields in your form. Form field names cannot include spaces, you can use underscores instead.

For example, if you wanted to collect an email address and the full name of a user, the following input tags would be defined:

{% signup_form name:"signup1" %}
    <ol>
         <li>
             <label for="email_field">Email:</label>
             <input type="text" name="email_field">
         </li>

         <li>
             <label for="full_name">Name:</label>
             <input type="text" name="full_name">
         </li>
    </ol>

    <p>{% signup_form_submit %}</p>
{% endsignup_form %}

Validations are also defined within the template and then passed in via an attribute in the tag definition. See below for more examples.

The only configuration that you then need to make is the settings for the fields that you wish to output when you export signups to CSV file format.

Limiting entries per User

You can also choose to limit how many times a user can enter and how frequently. You should be aware, however, that doing so will require the user to authorize the application to access their profile information since we need to grab their user id in order to track how many times they have submitted. Authorization requests can dramatically increase the bounce rate from your page so we recommend only using this option when absolutely necessary.

Salesforce Integration

To sync your signup application with Salesforce, first check the box next to "Connect to Salesforce". Next, you will need to validate your authorization by selecting "authenticate" and signing into your Salesforce account, if you are not already logged in.

Once logged in, your Salesforce objects will be shown in a drop down menu. Choose any object you'd like. The application will then show you which fields are required for the object you have selected. Take the fields you have chosen and match them to Salesforce fields located in the dropdown.

Block Attributes

name	type	required	description
rules_var	string	no	Specifies the name of the javascript variable that stores the validations that will be checked on form submission.
messages_var	string	no	Specifies the name of a javascript variable that stores custom validation error messages.
name	string	no	Unique name to identify the specific feature instance that you are using in your template code. This is useful if you have multiple instances of the same feature on the same page. Defaults to 'default'
on_success	string	no	Should contain javascript that will be executed after a success form submission.
on_error	string	no	Should contain javascript that will be executed if there is an error with the form submission. By default a dialog box will be displayed with a general error message.
on_limit	string	no	Should contain javascript that will be executed if the user has already reached the submission limit. By default a dialog box will be displayed with a general error message.

Context Variable Attributes

Examples

<script>
var myrules = {
    email_field:  {
      email: true,
      required: true
    },
    age: {
      required: true,
      range: [18,23]
    }
};
</script>

{% signup_form name:"signup1"  rules_var:"myrules" %}
 <ol>
   <li>
    <label for="email_field">Email:</label>
    <input type="text" name="email_field">
   </li>

   <li>
    <label for="age">Age:</label>
    <input type="text" name="age">
   </li>
 </ol>

 <p>{% signup_form_submit %}</p>
{% endsignup_form %}

{% signup_form name:"signup2"  rules_var:"myrules" %}
 <ol>
  <li>
   <label for="email_field">Email:</label>
   <input type="text" name="email_field">
  </li>

  <li>
   <label for="age">Age:</label>
   <input type="text" name="age">
  </li>
 </ol>

 <p>{% signup_form_submit %}</p>
{% endsignup_form %}

Customizing the Submit Button

By default the signup_form_submit tag generates a button with the text 'Submit'.

You can customize this button by using an onclick handler. The name of this handler is the context variable: do_submit

<!-- Make sure the following js variables are set so that confirm/redirect work as expected -->
<script type="text/javascript">
  var signup1_confirm = 'Thanks for signing up.';
  var signup1_redirect = function(){};
  var signup1_rules = {};
</script>
<a href="#_" onclick="{{do_submit}}">{% editable_image name:"submit_button" %}</a>

Add Form Hints Using HTML5 Placeholder Attribute

<script>
$(document).ready(function() {
    var placeholder_inputs = $('[placeholder]');

    placeholder_inputs.bind('focus', function() {
        var input = $(this);

        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).bind('blur', function() {
        var input = $(this);

        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
        }
    }).blur();

    // If user doesn't replace default values, the values are being replaced with empty strings.
    // To prevent submission of the empty form, one can add appropriate rules. See http://developers.involver.com/display/IDN/Validation.
    placeholder_inputs.parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);

            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    })
});
</script>

{% signup_form %}
    <ol>
      <li><input type="text" name="full_name" placeholder="Full Name"></li>
      <li><textarea placeholder="Share your story"></textarea></li>
    </ol>

    <p>{% signup_form_submit %}</p>
{% endsignup_form %}

Overview

Configuration