WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru Новые WordPress шаблоны

Стилизация элементов contact form 7

Как сделать так чтоб у чекбоксов/ратио кнопок в contact form 7 вообще убрать флажок превратив их в кнопку без использования сторонних плагинов cf7? Кнопка на подобии submit.

Как стилизовать ратио кнопоки/чекбоксы в стиле тумблера/переключателя в contact form 7 (iOS стиль), без использования сторонних плагинов cf7?

Как сделать так, что бы в любое созданное нами текстовое поле, подставлялись заранее прописанные варианты. к примеру есть поле, а ниже поля идут варианты в строку, значение 1, значение 2 и тд., кликая курсором мыши на определенное значение, оно подставлялось в поле которое расположено сверху.

Как добавить в cf7 вывод определенного значения в поле формы, которое мы предварительно задали, без возможности для пользователя его как-то изменить?

Как добавить возможность копировать информацию из поля в буфер обмена, без манипуляций для пользователя с выделением фрагмента текста и помощи мыши, а также ctr+c? Пример мы вывели в поле код, а сразу ниже поля кнопку виды ссылки "скопировать" (пример: скопировать) пользователь кликая на "скопировать", копирует наш код или любую другую информацию в буфер обмена.

Заранее спасибо, те кто напишут ответы могут указать свои кошельки для благодарности (если это не запрещено правилами).

0
Алексей
месяц назад
  • 1
    grl24

    Я чекбоксы сделал так, иконка FontAwesom внутри.

    <input type="checkbox" name="cb1" class="checkbox" id="cb1" checked="checked">
    <label for="cb1">1 этаж</label>
    <style>
    .checkbox + label {
    	cursor: pointer;
    	display: flex;
    	align-items: center;
    }
    .checkbox:not(checked) {
    	position: absolute;
    	opacity: 0;
    }
    .checkbox:not(checked) + label:before {
    	content: '';
    	display: block;
    	width: 15px;
    	height: 15px;
    	border-radius: 2px;
    	background: #008f2b;
    	border: 4px solid #008f2b;
    	margin-right: 10px;
    }
    .checkbox:not(checked) + label:after {
    	content: '\f00c';
    	font-family: FontAwesome;
    	font-style: normal;
    	font-weight: normal;
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	opacity: 0;
    	width: 15px;
    	height: 100%;
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
    	color: #fff;
    	transition: all .2s;
    }
    .checkbox:checked + label:after {
    	opacity: 1;
    }
    </style>

    а по поводу всего остального, cf7 просто делает шордкод который на странице заменится на код, который в этом же cf7 и прописывается, с этим кодом можно делать все что угодно, css javascript куда тебя фантазия заведет.
    ну или решения уже есть на просторах интернета, не думаю что
    jquery функция клика по элементу и копированием текста в буфер
    не заставит себя долго искать

    Glomberg месяц назад

    А кошелек забыли указать smile

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация