Multiple Choice (Radio Buttons) and Checkbox option images

Quform WordPressGuidesCustomizationMultiple Choice (Radio Buttons) and Checkbox option images

This documentation page is for Quform version 1 and may not be applicable for Quform 2 click here to visit the documentation for Quform 2.

In this guide we will show you how to create Options with background images like our example. We will adding CSS styles to the page to do this, see this page for how to add CSS.

Step 1 – Add your element in the form builder

Add either Checkbox element or Multiple Choice element to your form. Now in the Element Settings – Optional tab select the Inline option from the Options layout dropdown.

Step 2 – Add this CSS to the page (get help here)

/*Add styles for all option labels*/
.iphorm-inner .iphorm_5_1-input-li label {
    position: relative;
    padding: 64px 10px 10px 10px;
    min-width: 77px;
    border: 1px solid #000;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
/*Add styles hovering all labels*/
.iphorm-inner .iphorm_5_1-input-li label:hover {
    border: 1px solid #E3CE1C;
    background-color: #111;
}
/*Optional - Have the CheckBox or Multiple Choice box positioned top right. */
.iphorm-inner .iphorm_5_1-input-li div.radio, .iphorm-inner .iphorm_5_1-input-li div.checker, .iphorm-inner .iphorm_5_1-input-li input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
}
/*Optional - Extra space between Options */
.iphorm-inner .iphorm_5_1-input-li {
    padding-right: 15px;
}
/*SEQUENCE*/
/*First option label - add Background image here*/
.iphorm-inner label.iphorm_5_1_1_label {
    background: #222 url(https://www.quform.com/wp-content/themes/quform/images/facebook-logo.png) no-repeat center 5px;
}
/*Second option label - add Background image here*/
.iphorm-inner label.iphorm_5_1_2_label {
    background: #222 url(https://www.quform.com/wp-content/themes/quform/images/twitter-logo.png) no-repeat center 5px;
}
/*Third option label - add Background image here*/
.iphorm-inner label.iphorm_5_1_3_label {
    background: #222 url(https://www.quform.com/wp-content/themes/quform/images/envato-logo.png) no-repeat center 5px;
}

/*Add styles for all option labels*/
.iphorm-inner .iphorm_5_1-input-li label {
    position: relative;
    padding: 64px 10px 10px 10px;
    min-width: 77px;
    border: 1px solid #000;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
/*Add styles hovering all labels*/
.iphorm-inner .iphorm_5_1-input-li label:hover {
    border: 1px solid #E3CE1C;
    background-color: #111;
}
/*Optional - Have the CheckBox or Multiple Choice box positioned top right. */
.iphorm-inner .iphorm_5_1-input-li div.radio, .iphorm-inner .iphorm_5_1-input-li div.checker, .iphorm-inner .iphorm_5_1-input-li input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
}
/*Optional - Extra space between Options */
.iphorm-inner .iphorm_5_1-input-li {
    padding-right: 15px;
}
/*SEQUENCE*/
/*First option label - add Background image here*/
.iphorm-inner label.iphorm_5_1_1_label {
    background: #222 url(https://www.quform.com/wp-content/themes/quform/images/facebook-logo.png) no-repeat center 5px;
}
/*Second option label - add Background image here*/
.iphorm-inner label.iphorm_5_1_2_label {
    background: #222 url(https://www.quform.com/wp-content/themes/quform/images/twitter-logo.png) no-repeat center 5px;
}
/*Third option label - add Background image here*/
.iphorm-inner label.iphorm_5_1_3_label {
    background: #222 url(https://www.quform.com/wp-content/themes/quform/images/envato-logo.png) no-repeat center 5px;
}

Step 3 – Get the Unique element ID

In the form builder go to Advanced – Unique ID, find out the unique ID for your element. Copy this ID which should look like this but with different numbers:

iphorm_3_4

In the CSS you will need to replace my example Unique ID (iphorm_5_1) to your own. Copy your ID and use the find and replace function find iphorm_5_1 and replace with your ID.

Preview the form to make sure the styles are now applied to your Options.

Step 4 – Customizing

More than 3 Options?

Where you see this comment; /*SEQUENCE*/ in the CSS is the start of each Options unique selector. This is made up of the element selector (Eg, iphorm_5_1) plus its sequence number _1, _2, _3, _4 etc. In the example I have added CSS for three Options. To add more simply copy one of the Options and change the Sequence number to the next number. For example this would be four:

/*Fourth option label - add Background image here*/
.iphorm-inner label.iphorm_5_1_4_label {
    background: #222 url(https://www.quform.com/wp-content/themes/quform/images/envato-logo.png) no-repeat center 5px;
}

/*Fourth option label - add Background image here*/
.iphorm-inner label.iphorm_5_1_4_label {
    background: #222 url(https://www.quform.com/wp-content/themes/quform/images/envato-logo.png) no-repeat center 5px;
}

Add background images

Simply change the background image URL in the unique element label selector within the Sequence to your own image.

1
2
3

.iphorm-inner label.iphorm_5_1_1_label {
    background: #222 url(http://www.mydomain.com/images/my-option_1-image.png) no-repeat center 5px;
}

.iphorm-inner label.iphorm_5_1_1_label {
    background: #222 url(http://www.mydomain.com/images/my-option_1-image.png) no-repeat center 5px;
}