CODEWITHSUNDEEP
wordpressformscheckbox
Pete Norris
Pete Norris

Reputation: 1054

Styling checkboxes in Contact form 7

When customising the look of a checkbox using CSS, to be able to work the magic we first need to link an element (eg. label) to the checkbox.

<label for="toggle-1">Do Something</label>
<input type="checkbox" id="toggle-1">

However I am using Contact form 7 (wordpress plugin) and I cannot find where to add the id within the checkbox. If you specify an id in CF7 it adds it to the containing div (.wpcf7-form-control), and not the checkbox itself.

Therefore I can't get it working.

Am I missing something? is there another way to link the label and the checkbox?

Many thanks

Upvotes: 0

Views: 9307

Answers (1)

Orun
Orun

Reputation: 4603

The format used by Contact Form 7 is a little different from your HTML, but there are some targeting options that should be sufficient to grab any element you need.

When creating your form, you'll generate a checkbox shortcode that looks something like this.

[checkbox my-checkbox id:my-checkboxes use_label_element "foo" "bar"]

This code will generate:

  • A set of two checkboxes
  • Each of the two is wrapped in a <label> element (the text itself is in a <span>)
  • A parent element with the id="my-checkboxes"`

So the output markup will look something like this (along with some wpcf7 and Wordpress classes).

<span id="my-checkboxes">
    <label>
      <input type="checkbox" value="foo" /><span>foo</span>
    </label>
    <label>
      <input type="checkbox" value="bar" /><span>bar</span>
    </label>
</span>

Since you have an ID on the parent element, you can target this specific part of the form and elements within it using selectors in CSS or JQuery.

For example #mycheckboxes > label > input and #mycheckboxes > label > input + span.

For better targeting options, you can also create one checkbox per shortcode and assign an ID to each <span> checkbox container.

[checkbox my-checkbox id:a-checkbox use_label_element "foo"]
[checkbox my-checkbox2 id:another-checkbox use_label_element "bar"]

Since you're ultimate goal is to feed the information into Contact Form 7 (presumably to email it somewhere), it doesn't matter if you create each checkbox with a separate shortcode.

Upvotes: 2

Related Questions