Featured Products
- Home
- JavaScript Scripts
- KwikForms A Comprehensive Material Design jQuery Form Builder Plugin
KwikForms A Comprehensive Material Design jQuery Form Builder Plugin
By : Kwikbitzonline Published on Thursday, June 15, 2017,00:08:22 in JavaScript Scripts
KwikForms a comprehensive material design jQuery form builder plugin.
Using KwikForms you can rapidly create and add forms to your website with just a few lines of code. KwikForms supports the following html inputs: text, textarea, text and textarea with twitter style text count, telephone, number, email, url, range, date â with date-picker, checkbox, checkbox as a switch, radio, file with xhr automatic upload and finally select. KwikForms includes the following pre-compiled select lists: Countries (flags optional), international dialing codes (flags optional), PayPal currencies, global currencies, languages and timezones Plus recaptcha and honeypotKwikForms â form processing
On submit all KwikForms provide a JSON encoded string for processing in any way the user wants e.g. php, asp etc. After processing the user is presented by the success message you create in the div #kwik-confirmation-messageKwikForms installation
It may be silly to point out but KwikForms is a jQuery plugin so jQuery is a requirement.OK so how do you get started?
After downloading KwikForms upload the files to your host server. Logically stylesheet CSS files go into your css folder, and the javascript files into your js folder. The KwikForms download is structured like this:KWIKForms Integration
Create your KwikForm as detailed below on your web page. To call and activate the KwikForm plugin add this script making sure that on the page it is BELOW the javascript files listed in âinstallationâ <script> jQuery('{Your form ID}').kwikForm(); </script>Building your KwikForm
Create your form like this <form role="form" id="{Your form ID}" method="post" action="{Your form processing script}" data-theme="{The form theme colour}"></form> Note: data-theme is âoptionalâ as a default exists. KwikForms inputs are built using divs and data-tags â all inputs start like this: <form role="form" id="{Your form ID}" method="post" action="{Your form processing script}" data-theme="{The form theme colour}"><input type="submit" class="{Your button class}" value="{Your button text}"/>
</form> Donât forget to create your success confirmation message <div id="kwik-confirmation-message"></div>
<h2><em>Thanks</em> for contacting us! - We will get back to you soon!</h2>
</div> The KwikForms plugin then automatically creates the following base HTML <div class="kwik-form-group" data-kwik-type="{The input type)" data-kwik-id="{The field name & id}" data-kwik-label="{The label text}"></div>
<div class="kwik-form-group" data-kwik-type="{The input type)" data-kwik-id="{The field name & id}" data-kwik-label="{The label text}">
<label for="{The field id}">{The label text}</label>
<input type="text" name="'{The field name}" id="{The field id}" class="form-control"/>
<div class="form-control-bar"></div>
</div> To display inline lable and input add the class kwik-inline like this: <div class="kwik-form-group kwik-inline" data-kwik-type="{The input type)" data-kwik-id="{The field name & id}" data-kwik-label="{The label text}"></div>
<div class="kwik-form-group" data-kwik-type="{The input type)" data-kwik-id="{The field name & id}" data-kwik-label="{The label text}">
<label for="{The field id}">{The label text}</label>
<input type="text" name="'{The field name}" id="{The field id}" class="form-control"/>
<div class="form-control-bar"></div>
</div>