Настройка плагина обратной связи Contact Form 7
Плагин Contact Form 7 отвечает всем моим задачам по оформлению обратной связи на сайте.
Не буду описывать как установить его на сайт, и не буду описывать стандартные настройки — смотрите здесь: https://wpcafe.org/tutorials/contact-form-7-wordpress-plagin-dlya-kontaktnoy-formyi/
Я взяла за правила все нестандартные решения описывать для себя на будущее, возможно и Вам поможет:
Решение задачи по настройке размера полей так, чтобы красиво отображалось на всех вариантах web-гаджетов.
Я пользуюсь стандартными темами вордпресс, которые поддерживают размеры под комп, планшет и мобильник. Темы покупаю на themeforest.net
Это текст ФОРМЫ Contact Form 7
Обратите внимание в коде нужно писать text, а не textt, у мне по другому код не вставлялся, конфликтует с тегом <code>
[html]<ul class="ch-grid2" ><li>[email* your-email 19/50 placeholder "Ваш e-mail" ]</li>
<li>[textt text-645 19/50 placeholder "Ваш телефон"]</li>
<li>[textt* format 19/90 placeholder "Формат мероприятия"]</li></ul >
<p class="ch1" >[textarea textarea-342 66×3 placeholder "Идеи, которые обязательно должны быть воплощены"]</p >
<p class="ch1" >[submit "ОТПРАВИТЬ ЗАЯВКУ"]</p >[/html]
Это код CSS
[html] .ch-grid2 {/* для БРИФА */margin: 5px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%;}
.ch-grid2:after,.ch-item:before { content: »; display: table;}
.ch-grid2:after { clear: both;}
.ch-grid2 li { width: 170px; height: 25px; display: inline-block; margin: 5px 0px 10px 0px;}
/* кнопка отправить в форме БРИФ */
.ch1 { float: none;display: inline-block; padding-left: 38px; margin-top: -38px;}
input[type="email"], input[type="tel"], input[type="password"], input[type="text"], select, textarea {
font-size: 14px;
background: #FFF none repeat scroll 0% 0%;
border: 1px solid #eee;
box-shadow: 0.2em 0.2em 5px rgba(0,0,0,0.5);
}
input[type="submit"] {
background: #66adc6;
color: #fff;
font-size: 14px;
border-radius: 3px;
padding: 8px 16px 5px 16px;
}
input[type="submit"]:hover{
background: #9fc516;
}[/html]
Буду рада любым комментариям, делитесь опытом или задавайте вопросы. Вместе мы сила!
