jQuery plugin for AllClients landing pages
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.editorconfig
README.md
crmform-plugin.js
crmform-plugin.min.js

README.md

crmform-plugin

jQuery plugin for AllClients landing pages

GENERAL

The plugin does three basic things:

  1. Decouples the landing page form from its table-based layout
  2. Lets you clone multiple instances of the form
  3. Corrects some of the odd behavior of the landing page editor

The out-of-the-box AllClients form is contained in a table, which is restrictive design-wise. The CRMForm plugin pulls the form out of the table and wraps the inputs in divs, then removes the table from the document.

USAGE

The crmform plugin requires jquery. The best way to use the plugin is to copy and paste the code directly into the template inside a script tag, just below jQuery.

Include the form in a landing page:

<div class="form-container">
	<!-- form -->
</div>

Invoke the plugin on the container:

$('.form-container').CRMForm();

SETTINGS

Option Type Default Description
style String "placeholders" Determines where you display the input name. The other option is "labels", anything else will default to "placeholders". Select fields will have labels either way
containerClass String "form-control-container" The class of the div that wraps each form control
checkboxContainerClass String none The class of the div that wraps checkboxes. If not specified, it will use the containerClass
inputClass String none The class for inputs, selects, and textareas. Will not apply to checkboxes

BOOTSTRAP EXAMPLE

This will set up the form with Twitter Bootstrap classes

$('.form-container').CRMForm({
	style: "placeholders",
	containerClass: "form-group",
	inputClass: "form-control",
	checkboxContainerClass: "checkbox"
});

CLONING THE FORM

You may wish to include multiple instances of the same form on a single landing page. For example, you may have the form at the top and bottom of the page, or you may have the form in the masthead and a popup. Call cloneForm and pass the location of the second form:

$('.form-container').CRMForm({
	style: "labels"
}).cloneForm('.second-form-container');

Cloned forms will be synced so that when a user fills out one, all other instances of the form will be filled out simultaneously with the same information. They will take on all the settings of the original form.

NOTES

Form spacers have to be given an explicit height

.formSpacer {
	height: 32px;
}

The plugin works best if you replace the default submit button. Hide the button:

.submitButton {
	display: none;
}

and paste this below each instance of the form (replace the class name with your own):

<a href="javascript:if(validateForm() != false){myForm.submit()};" class="your_own_button_class">
	<!--type:text; label:"Text for Button"; default:"Submit This Form!"; clickable:1;-->
</a>