Contact form 7 css checkbox

Checkboxes, radio buttons, and menus

Contact Form 7 provides several types of form-tags for representing checkboxes, radio buttons, and drop-down menus. This article explains about the usage and semantics of these form-tags.

Checkboxes and radio buttons

Both checkbox and checkbox* represent a group of checkboxes ( in HTML). checkbox* requires the user to select at least one of the boxes.

radio represents a group of radio buttons ( in HTML). Because a group of radio buttons is naturally required, a radio form-tag works as a required field. It is advised to preselect an option in a radio button group using the default:1 option.

Option	Examples	Description
id: (id)	id:foo	id attribute value of the wrapper element.
class: (class)	class:bar	class attribute value of the wrapper element. To set two or more classes, you can use multiple class: option.
default: (num)	default:2 default:1_2_3	Preselected options. The integer following default: is the position in the order of items. 1 is the first one. If you want to make two or more items selected, joint integers with underbar (_), as default:1_2_3 .
label_first	By default, a checkbox or a radio button are put first, and a label last. By adding label_first option, you can reverse them.
use_label_element	Wrap each checkbox and radio button with tag.
exclusive	Make checkboxes exclusive. This means, when you select a checkbox in a group, others will be cleared, so the group accepts the zero-selected or one-selected state only. This is a JavaScript gimmick so doesn’t work without JavaScript. radio form-tags don’t support this option.
free_text	Append a free input text field to the last item.
data: (name)	data:countries	Get the values from Listo.

These types of tags have one or more values, and the values will be used as the values and labels of the checkboxes or radio buttons.

[checkbox your-country "China" "India" "San Marino"]

Drop-down menus

Both select and select* represent a drop-down menu ( in HTML). select* requires the user to select at least one option from the menu.

Option	Examples	Description
id: (id)	id:foo	id attribute value of the select element.
class: (class)	class:bar	class attribute value of the select element. To set two or more classes, you can use multiple class: option.
default: (num)	default:2 default:1_2_3	Preselected options. The integer following default: is the position in the order of items. 1 is the first one. If you want to make two or more items selected, joint integers with underbar (_), as default:1_2_3 .
multiple	Make the drop-down menu multi-selectable.
include_blank	Insert a blank item into the top of options of this drop-down menu.
first_as_label	Use the first value as a label.
data: (name)	data:countries	Get the values from Listo.
autocomplete: (value)	autocomplete:country-name	Options for form autocompletion.

These types of tags have one or more values, and the values will be used as options in the drop-down menu.

[select your-country "China" "India" "San Marino"]

See also

Demo

Note: This is a demo form and it doesn’t send an email practically.

View source of the preceding form:

Select Country (required) [checkbox* your-country use_label_element "China" "India" "San Marino"] Select Sports [radio your-sports label_first default:2 "Football" "Tennis" "Pole-vault"] Select Fruit (required) [checkbox* your-fruit exclusive "Apple" "Banana" "Grape"] Select Browser (required) [select* your-browser include_blank "Firefox" "Safari" "Opera" "Lynx"] Select Ghkdsjdf [select your-ghkdsjdf multiple "fsdfs" "klgjfk" "vdrie"] [submit "Send"]

Источник

Custom styles for Contact Form 7 Checkboxes

While it’s quite commons to be sent over designs for website bespoke builds, it’s quite common for forms to have custom styles to help integrate into the branding. For text boxes, selects, textareas, etc this is quite standard, but checkbox fields aren’t so easy to style as the design is native to different browsers. This means that different browsers have their own unique styles when it comes to checkboxes.

While there are numerous sites showing how to style checkboxes, this can be problematic as they usually have different HTML output than what Contact Form 7 output HTML for checkboxes. Luckily, here’s some CSS you can use to style checkboxes using the CF7 plugin.

NB – When creating your forms checkbox field, ensure you check the option ‘Wrap each item with label element’. This will add the ‘use_label_element’ into your tag and this is needed for the following CSS to work.

/* custom checkbox styling for contact form 7 checkbox */ span.wpcf7-list-item < display: inline-block; margin: 0; >.wpcf7 .wpcf7-list-item < display: block; margin-bottom: 10px; >.wpcf7-checkbox label < position: relative; cursor: pointer; >.wpcf7-checkbox input[type=checkbox] < /*position: relative;*/ position: absolute; visibility: hidden; width: 30px; height: 30px; top: 0; left: 0; >.wpcf7-checkbox input[type=checkbox] + span < /* border: 3px solid red; */ >.wpcf7-checkbox input[type=checkbox] + span:before < display: block; position: absolute; content: ''; border-radius: 0; height: 30px; width: 30px; top: 0px; left: 0px; border: 1px solid #ee6a09; >.wpcf7-checkbox input[type=checkbox] + span:after < display: block; position: absolute; content: "\2713"; height: 30px; width: 30px; top: 0; left: 0; visibility: hidden; font-size: 18px; text-align: center; line-height: 30px; >.wpcf7-checkbox input[type=checkbox]:checked + span:before < background: transparent; >.wpcf7-checkbox input[type=checkbox]:checked + span:after < visibility: visible; >.wpcf7-list-item-label

BEFORE:

AFTER:

BEFORE:

AFTER:

About Phil

I’m a freelance creative WordPress developer based in the UK and I work with clients to help them achieve the most out of their websites. As a certified WordPress expert, I develop responsive websites that look amazing on any device, for businesses and agencies.

Useful post? Share it

Looking for a creative developer?

With over 9 years experience, I can help you with your WordPress project. I am available for hire on a digital consultancy basis and I can be your WordPress and front-end specialist. Contact me for more information.

Источник

Стили для чекбоксов и радиокнопок ContactForm 7

Без лишних разглагольствований. Ссылка на архив с иконками ниже.

input[type="checkbox"], input[type="radio"] < display: none !important; >input[type="checkbox"] + span:before, input[type="checkbox"] + label:before, input[type="radio"] + span:before, input[type="radio"] + label:before < content: ""; display: inline-block; vertical-align: middle; margin-right: 0.5em; width: 1.6em; /*Можно увеличить или уменьшить ширину*/ height: 1.6em; /*и высоту*/ background-size: cover >input[type="checkbox"] + span:before, input[type="checkbox"] + label:before < background-image: url("/wp-content/uploads/checkbox-unchecked.svg") >input[type="radio"] + span:before, input[type="radio"] + label:before < background-image: url("/wp-content/uploads/radio-unchecked.svg") >input[type="checkbox"]:checked + span:before, input[type="checkbox"]:checked + label:before < background-image: url("/wp-content/uploads/checkbox-checked.svg") >input[type="radio"]:checked + span:before, input[type="radio"]:checked + label:before < background-image: url("/wp-content/uploads/radio-checked.svg") >

Вставляем в стили темы, загружаем изображения чекбоксов и радио-кнопок, меняем пути к файлам и всё сразу работает.

Кстати, эти стили будут работать и для формы комментариев WordPress, и в форме оформления заказа Woocommerce. Хотя, конечно же, могут быть варианты в зависимости от используемой темы.

C галочкой принятия (acceptance) эти стили без небольшого танца не сработают. Чтобы и там чекбокс был красивый, идём в редактор плагинов. Нас интересует файл modules/acceptance.php . Находим в нём 93 строку и добавляем пустой тег после input’а. Вот так:

Это нужно для того, чтобы стилям было за что зацепиться. В противном случае чекбокс будет скрыт. Единственный минус, что после обновления плагина этот тег придётся добавлять снова.

Ссылка на архив с чекбоксами и радиокнопками как на картинке в начале статьи.

Я стараюсь для подобных мелких элементов использовать векторный svg. Он легче, быстрее грузится и, что самое удобное — не подвержен искажениям, как растровые изображения.

Если ваш WordPress ругается на формат, добавьте в wp-config.php строку:

define( 'ALLOW_UNFILTERED_UPLOADS', true );

Либо можете использовать один из плагинов, позволяющий загружать svg в библиотеку. Или вовсе положить файлы в удобную папку на сервере и указать путь к ней.

Изменить цвет иконок вы можете в Adobe Illustrator. Либо можете скачать любые другие. Например, на Flaticon или Icon8. Там, кстати, и цвет можно сразу задать такой, какой вам нужен.

Источник

Как правильно отредактировать внешний вид чек-боксов в Contact Form 7?

Добрый день! Столкнулась с очень неприятно ситуацией, никак не могу отредактировать чек-боксы, точнее уже отредактировала, вроде выглядят как мне надо, но не работают. Никак не могу найти правильное решение, ничего не помогает, код следующий:

span.wpcf7-list-item < display: block !important; >input[type="submit"] < border: none; -webkit-border-radius: 47px; -moz-border-radius: 47px; border-radius: 47px; font: 20px bebas-neue-by-fontfabric, sans-serif; font-weight: 400; padding: 10px 30px; text-align: center; font-size: 30px; color: #fff !important; background: #ffbd38; >.wpcf7-checkbox, .radio < display: inline; margin: 10px 0 0; >.wpcf7-list-item < display: inline-block; >input[type=checkbox], input[type=radio] < display: none; >.wpcf7-list-item::checked + .wpcf7-list-item-label::before < content: "\f0c8"; color: rgb(151, 55, 199); line-height: 14px; text-decoration: inherit; text-align: center; >.wpcf7-list-item-label < display: inline-block; left: 15px; line-height: 14px; margin: 0 0 15px; position: relative; >.wpcf7-list-item-label::before < background: white; border: 1px solid rgb(151, 55, 199); border-radius: 3px; content: ""; height: 15px; left: -22px; position: absolute; width: 15px; >.wpcf7-list-item-label:hover < cursor: pointer; >span.wpcf7-list-item-label:checked < content: "\2714"; >input[type="checkbox"]:checked + label:before

как бы оно поменяло, НО при нажатии на любой из чек-боксов ничего не происходит, я сначала подумала что может просто стилми закрыло галочку, но по нажатию и сабмиту ничего не пашет и пишет ошибку. Помогите пожалуйста, очень надо!

Помогло это решение:
Через label или input(без приставок), либо span и псевдо-классы after, before не помогло
Если у вас такая же проблема как была у меня, то есть у вас в теме/шаблоне стили для чек-боксов не прописаны и вы пользуетесь CF7 то вам это точно поможет. Просто подставите свои значения. input[type=checkbox] — стандартный класс для всех чекбоксов стандартных 🙂

input[type=checkbox] < padding-left:5px; padding-right:5px; -webkit-appearance:button; border: double 2px rgb(151, 55, 199); background-color:transparent; color:#FFF; white-space: nowrap; overflow:hidden; width:15px; height:15px; >input[type=checkbox]:checked < background-color: rgb(151, 55, 199); border-radius: 45px; >input[type=checkbox]:hover

Источник

How to Style Contact Form 7 Forms in WordPress

Even though contact forms are an essential method for engaging with visitors, most WordPress webmasters struggle to properly style them. In most cases, forms have a default styling, which is provided by the browser. Those forms tend to be sparsely stylized and can differ a lot from your site design. On the other hand, the WordPress theme you’re using could contain CSS code that stylizes the forms, which can help with your stylization problem. But, even a theme-specific style might clash with your website’s brand.

Therefore, it is up to you to properly style Contact Form 7 and make yours stand out from the crowd. And this article is here to help you do that. Within it, we will cover various aspects of creating the code necessary for form stylization. We focused on using a contact form created by the Contact Form 7 plugin as the showcase, but most of what we discuss can be applied to any form. Also, depending on your existing knowledge of CSS, you might need to do some additional reading to understand the code fully.

However, before we show you the CSS way of doing it, we would like to talk about two newbie-friendlier ways of styling a Contact Form 7 form using a plugin: our own Qi Addons for Elementor, and Qi Blocks for Gutenberg plugins.

Источник