Login to your account!
Join the World's Largest Web App Marketplace!
Great to see you here!
Let’s set up your account in just a couple of steps.
Forgot password?
Enter your username or email to reset your account.
KwikForms A Comprehensive Material Design jQuery Form Builder Plugin
By : Kwikbitzonline Published On Thursday, June 15, 2017, 07:08 In JavaScript
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 honeypot
KwikForms – 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-message
KwikForms 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:
- kwik_event_calendar_v2_0_0
- CSS
- form-layout-style.css
- svg
- The svg image files needed for flag display
- JS
- jquery.min.js
- form-layout.js
- moment-with-locales.js
- scr
- kwik-process.php – an example form processing script
- kwik-upload.php – an example file upload script
- example.html
- CSS
Copy-paste the stylesheet <link>’s into the <head> of your web page. Make sure they are in the following order:
- <link rel=”stylesheet” type=”text/css” href=”path_to/css/any other style sheets you currently use”>
- <link rel=”stylesheet” type=”text/css” href=”path_to/css/form-layout-style.css”>
Add the JavaScript pages near the end of your pages, right before the closing </body> tag. Make sure they are in the following order:
- <script type=”text/javascript” src=”path_to/js/jquery.min.js”></script>
- <script type=”text/javascript” src=”path_to/js/moment-with-locales.js”></script>
- <script type=”text/javascript” src=”path_to/js/any other JavaScript pages/jQuery plugins you currently use”></script>
- <script type=”text/javascript” src=”path_to/js/your site javascript page.js”></script>
- <script type=”text/javascript” src=”path_to/js/form-layout.js”></script>
And that’s it all you need to do now is create an HTML element on your page to display your Kwik Event Calendar – example:
<div id="my_kwik_event_calendar_HTML_element"></div>
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>
KWIKForms building the specific input types
To create the individual input types use the following data-kwik-type’s
| text | data-kwik-type="text" |
| textarea | data-kwik-type="textarea" |
| textarea with twitter style text count | data-kwik-type="textcount" |
| telephone | data-kwik-type="telephone" |
| number | data-kwik-type="number" |
data-kwik-type="email" | |
| url | data-kwik-type="url" |
| range | data-kwik-type="range" |
| date | data-kwik-type="date" |
| checkbox | data-kwik-type="checkbox" |
| checkbox as a switch | data-kwik-type="switch" |
| radio | data-kwik-type="radio" |
| file with xhr automatic upload | data-kwik-type="file" |
| select | data-kwik-type="select" |
To create the pre-populated select lists use the following data-kwik-type’s
| Countries | data-kwik-type="country-list" |
| International dialing codes | data-kwik-type="dilaing-list" |
| PayPal currencies | data-kwik-type="paypal-currency" |
| Global currencies | data-kwik-type="currency-list" |
| Languages | data-kwik-type="language-list" |
| Timezones | data-kwik-type="timezone-list" |
To create the Recaptcha use the following data-kwik-type
| Recaptcha | data-kwik-type="recaptcha" |
Additional data-options exist for the different input types
| data-theme – overrides the form theme colour for individual inputs | data-theme="red" |
| data-kwik-required – Creates a required field | data-kwik-required="required" |
| data-kwik-errormessage – a field specific error message | data-kwik-errormessage="The error message to output" |
| data-kwik-value – a field specific value | data-kwik-value="Your value" |
| data-kwik-flag – displays country flags in the country-list and dialing-list selects | data-kwik-flag="true" |
| data-kwik-min – the minimum value for number and range fields | data-kwik-min="0" |
| data-kwik-max – the maximum value for number and range fields | data-kwik-type="100" |
| data-kwik-step – the step value for number and range fields | data-kwik-step="1" |
| data-kwik-max – the maximum character count for text count inputs | data-kwik-max="140" |
| data-kwik-allowed – allowed MIME types for file uploads | data-kwik-allowed="image/gif,image/jpeg,image/jpg,image/png" |
| data-kwik-maxSize – the maximum file size for uploads (Mb) | data-kwik-maxSize="2" |
| data-kwik-list – array of objects to create checkboxes or radio inputs | data-kwik-list="[{'id':'1','label':'Test'},{'id':'2','label':'Test this'}]" |
| data-kwik-option-list – array of objects to populate select lists | data-kwik-option-list="[{'id':'1','label':'Test'},{'id':'2','label':'Test this'}]" |
