So, your designers have come up with a design to give the form checkbox on your Drupal 7 site an updated look. You've come up with a prototype that incorporates the design and now you've found out it can be a bit tricky to implement in a Webform for Drupal.
Webform module has its own idea of style and has configurations and functions that are a little restrictive when it comes to front-end development.
This is the solution my team came up with.
Required modules: Webform 4 - which requires PHP 5.3, CTools, and Views 3, and Webform Boolean.
Create a Webform and add any fields needed by your form. Add a Boolean/Checkbox type field with whatever Label you like - keep in mind we'll be hiding the label and using the Description to get this to work.
Configure the Boolean/Checkbox component with the following:
- Label can be anything at all, it won't be shown
- Description - this is where you'll enter what will appear to label for the checkbox
- Display -> Label display must be Inline
- Wrapper CSS classes - give this component a class so you can target the input label and field in the jQuery and CSS
This then, is the HTML output of the Boolean Checkbox:
<div class="checkbox__input form-item webform-component webform-component-boolean webform-component--field-key-name webform-container-inline"> <label for="edit-submitted-field-key-name">Checkbox Label</label> <div id="edit-submitted-field-key-name" class="form-checkboxes webform"> <input class="webform form-checkbox" type="checkbox" id="edit-submitted-field-key-name" name="submitted[field_key-name]" value="1" /> </div> <div class="description">The Description tells the user what is being selected by checking this box.</div> </div>
Here's the jQuery we need:
(function ($) { /* Checkbox */ Drupal.behaviors.checkbox = { attach: function (context, settings) { // unbind() kept my script from firing twice $('.checkbox__input label').unbind(); $('.checkbox__input label').on('click', function(event) { // add a class when the label is clicked so that we can style it $(this).toggleClass('checked'); event.preventDefault(); // because we’re clicking the label for a boolean checkbox, we need to execute the handler as if the event were triggered on the natural checkbox $('input[type=checkbox]').trigger('click'); }); } }; })(jQuery);
Add the CSS that makes the magic happen:
.webform-component-boolean {
margin-bottom: 1em;
width: 100%;
position: relative;
float: left;
line-height: 100%;
}
.webform-component-boolean label {
// so that the user knows there is interactivity
cursor: pointer;
background: #425058;
// places the background on top of the natural checkbox
position: absolute;
// prevents Label text from showing outside the background
overflow: hidden;
top: 0;
left: 4px;
width: 30px;
height: 30px;
}
.webform-component-boolean label:after {
opacity: 0;
content: '';
position: absolute;
width: 16px;
height: 10px;
background: transparent;
top: 4px;
left: 5px;
}
// this makes the checkmark appear on hover to let the user know that this is a checkbox
.webform-component-boolean label:hover::after {
content: '';
position: absolute;
width: 16px;
height: 10px;
background: transparent;
top: 4px;
left: 5px;
// border and transform form the checkmark
border: 4px solid #fcfff4;
border-top: none;
border-right: none;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
// light opacity gives the indication that clicking will create a checked box
opacity: 0.3;
}
.webform-component-boolean label.checked:after {
// full opacity of the checkmark when the checked class is applied
opacity: 1;
}
- Log in to post comments