Как путь по звездам отыскать
Легко
  • Главная
  • SEO
  • WORDPRESS
    • О сайте
    • WP Плагины
    • WP Темы
    • WP E-Commerce
    • html разметка
  • В ОБЩЕМ = НЕ ПО ТЕМЕ
  • Карта сайта
  • Гаджеты
    • Гаджеты
    • Компьютеры и планшеты
    • Телефоны и смартфоны
    • Практикум
    • Программы
    • Сравним
Настройка плагина обратной связи Contact Form 7 так, чтобы поля красиво отображались на всех типах мобильных гаджетов.

Настройка плагина обратной связи Contact Form 7 так, чтобы поля красиво отображались на всех типах мобильных гаджетов.

Настройка плагина обратной связи 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 >
2

 

Это код 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

  • ЭФФЕКТЫ НАВЕДЕНИЯ с помощью CSS, переходы и анимацияЭФФЕКТЫ НАВЕДЕНИЯ с помощью CSS, переходы и анимация
  • Стильные таблицыСтильные таблицы
  • КАК ВЕРНУТЬ СТАРЫЙ РЕДАКТОР В WORDPRESS 5.0КАК ВЕРНУТЬ СТАРЫЙ РЕДАКТОР В WORDPRESS 5.0
  • Удаление записей рубрики с главной страницы WordPressУдаление записей рубрики с главной страницы WordPress
  • Как сделать красивую страницу «ошибка 404»  в WordPress?Как сделать красивую страницу «ошибка 404» в WordPress?

Июль 15, 2015 poklonskaya

Написать ответ Cancel reply

Your email address will not be published. Required fields are marked *

Популярные сообщения

  • Установка и Настройка WordPress E-Commerce
    Установка и Настройка WordPress E-Commerce Август 14, 2012
  • ЭФФЕКТЫ НАВЕДЕНИЯ с помощью CSS, переходы и анимация
    ЭФФЕКТЫ НАВЕДЕНИЯ с помощью CSS, переходы и анимация Июль 15, 2015
  • Панель вебмастера
    Панель вебмастера Декабрь 5, 2013
  • Удаление записей рубрики с главной страницы WordPress
    Удаление записей рубрики с главной страницы WordPress Март 28, 2012
  • Требования к сайту с точки зрения SEO продвижения.
    Требования к сайту с точки зрения SEO продвижения. Декабрь 10, 2013

Метки

SEO стратегии WP-тема от ColorLabs Вирусы Сайт-клон доменное имя семантика ссылки
Copyright © 2010-2018 facilite.ru All Rights Reserved
Мы используем куки для наилучшего представления нашего сайта. Если Вы продолжите использовать сайт, мы будем считать что Вас это устраивает.Ok