Want to know how to include this custom form elements into your web?

1. Include the jQuery plug-in and then, after it, insert our plug-in WEformElements.js <script src="path/jquery.min.js"></script> <script src="path/WEFormElements.js"></script>
2. Insert our CSS WEformElements.css stylesheet. It provides basic styling to the elements. You can override them with your own styles. <link rel="stylesheet" type="text/css" href="path/WEFormElements.css">
3. Creating Dropdowns:
   <ul class="WEdropdown [classes]" data-name="" [class-container=""] [data-disabled=""]> <li data-value="opt1" class="selected">Option 1</li> <li data-value="opt2">Option 2</li> </ul> The options for this dropdown are the following ones:
   • classes: required class WEdropdown. You can also include your own classes for styling the dropdown, or for fireing events.
   • data-name: required. It will give the name you provide here to an auto-generated input with this name.
   • class-container: optional. Sometimes you just need to add some classes to the container. By providing them here separated with spaces, you will achieve that.
   • data-disabled: optional. Introduce any character inside to disable the dropdown.
4. Creating checkboxes:
   <input type="checkbox" class="we-checkbox [classes]" name="" value="" data-label="" [class-container=""] [data-id=""] [disabled] [checked]> The options for the checkboxes are the following ones:
   • class: required class we-checkbox. You can also include your own classes for styling the checkbox, or for fireing events.
   • name: required. The name of the input.
   • value: required. The value of the input.
   • data-label: required. The text along the checkbox button.
   • class-container: optional. Sometimes you just need to add some classes to the container. By providing them here separated with spaces, you will achieve that.
   • data-id: optional. Sometimes when clicking a checkbox you want to know it's ID and fire a function. This will give the checkbox the ID.
   • disabled: optional. In case you want to disable the checkbox.
   • checked: optional. In case you want the checkbox checked.
   • .on("change"): jQuery that you can trigger when a checkbox is clicked. Our plug-in fires a .trigger("change") event so you can add your own jQuery/JavaScript code once the checkbox has changed it's value.
5. Creating radio buttons:
   <input type="radio" class="we-radio [classes]" name="" value="" data-label="" [class-container=""] [data-id=""] [disabled] [checked]> The options for the radio buttons are the following ones:
   • class: required class we-radio. You can also include your own classes for styling the radio button, or for fireing events.
   • name: required. The name of the input.
   • value: required. The value of the input.
   • data-label: required. The text along the radio button.
   • class-container: optional. Sometimes you just need to add some classes to the container. By providing them here separated with spaces, we will achieve that.
   • data-id: optional. Sometimes when clicking a radio button you want to know it's ID and fire a function. This will give the radio button the ID.
   • disabled: optional. In case you want to disable the radio button.
   • checked: optional. In case you want the radio button checked.
   • .on("change"): jQuery that you can trigger when a radio button is clicked. Our plug-in fires a .trigger("change") event so you can add your own jQuery/JavaScript code once the radio button has changed it's value.