Настройка плагина обратной связи 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>
<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 66x3 placeholder "Идеи, которые обязательно должны быть воплощены"]</p > <p class="ch1" >[submit "ОТПРАВИТЬ ЗАЯВКУ"]</p >
Это код CSS
.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; }
Буду рада любым комментариям, делитесь опытом или задавайте вопросы. Вместе мы сила!
Related Posts