Настройка ширины Contact Form 7

Настройка ширины Contact Form 7

В этом посте продолжу рассказывать о хитростях и настройках движка вордпресс и его плагинов. Ранее уже писал о том как оптимизировать h-теги в WordPress, как редактировать облако тегов вручную, как убрать хлебные крошки (от плагина Breadcrumb NavXT) на главной и т.д.

Здесь речь пойдет о том, как настроить ширину полей в плагине Contact Form 7. Это пригодится для того чтобы подобрать оптимальный вид формы связи, чтобы ничего не вылазило и смотрелось гармонично.

Заходим в настройки плагина и видим код, в котором определяется как будет выглядеть форма связи. По умолчанию он выглядит так:

1
2
3
4
5
6
7
8
9
10
11
12
13
<p>Ваше имя (обязательно)<br />
    [text* your-name] </p>
 
<p>Ваш E-Mail (обязательно)<br />
    [email* your-email] </p>
 
<p>Тема<br />
    [text your-subject] </p>
 
<p>Сообщение<br />
    [textarea your-message] </p>
 
<p>[submit "Отправить"]</p>

Оказывается настроить ширину полей можно прямо в этом коде, в очень удобной форме:

1
2
3
4
5
6
7
8
9
10
11
12
13
<p>Ваше имя (обязательно)<br />
    [text* your-name 50/100] </p>
 
<p>Ваш E-Mail (обязательно)<br />
    [email* your-email 50/100] </p>
 
<p>Тема<br />
    [text your-subject 50/100] </p>
 
<p>Сообщение<br />
    [textarea your-message 100x30] </p>
 
<p>[submit "Отправить"]</p>

где 50/100 - это ширина поля и максимальное количество символов в нем. Можно поэкспериментировать и подобрать оптимальные значения. 100x30 - это ширина поля и высота.

Настраивать поля таким способом весьма удобно и просто :)

15 комментариев на тему: “Настройка ширины Contact Form 7”
  1. Павел
    19.02.2013 в 21:07 #1

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

    Спасибо.

    • 19.02.2013 в 22:29 #2

      Для этого нужно задать стили, по типу этого:

      <p style="padding-bottom:15px;">Ваше имя (обязательно)<br />
      [text* your-name 50/100] </p>

  2. Макс
    27.05.2013 в 01:52 #3

    Добрый день
    Подскажите пожалуйста как сделать обратную связь горизонтальной? в два столбика

    • 27.05.2013 в 11:23 #4

      Можно с помощью таблицы сделать, примерно так:

      <table><tr><td>1 столбец</td>
      <td>2 столбец</td></tr></table>

  3. Макс
    03.06.2013 в 13:23 #5

    Спасибо помогло)))
    а еще подскажите как между столбцами сделать пробел, расстояние

  4. Алексей
    16.12.2013 в 23:47 #7

    Здравствуйте! Скажите, где вообще находится CSS-файл для созданной формы для редактирования ее внешнего вида? Или редактировать внешний вид тоже можно в настройках плагина? Заранее спасибо.

    • 17.12.2013 в 21:25 #8

      В настройках плагина можно прописывать свои стили, и добавлять используемые стили в style.css

      • Алексей
        20.12.2013 в 03:10 #9

        Спасибо, с css разобрался. Еще один момент: подскажите, плиз, как с помощью этого плагина реализовать следующее:
        по нажатию кнопки “отправить” человек должен переходить на новую страницу “спасибо за покупку” (пока что сообщение “ваше сообщение отправлено успешно” появляется на той же странице, внизу под формой).
        Заранее спасибо.
        p.s on_sent_ok: “location.replace(‘http://www.YOURSITE.com’);” не работает…

        • 24.12.2013 в 20:53 #10

          Так сразу не скажу, сильно не разбирался с ним, мне хватало стандартного функционала.

  5. Вася
    05.03.2014 в 16:14 #11

    А как сделать что бы после заполнения полей,служебные сообщения полей уменьшить? (к примеру «Ваше сообщение успешно отправлено»)
    А то у меня прыгает контактная форма,не стоит на месте(

    • 10.03.2014 в 22:27 #12

      Настройте соответствующие стили, этих самых служебных полей. Для того чтобы определить какие у элементов стили пользуюсь плагином для браузера Firebug, и вам советую.

  6. Юрий
    21.04.2014 в 20:09 #13

    День добрый ! Подскажите ,как для конкретной созданной формы сделать цвет кнопки «отправить» , чтобы распространялось только на эту форму? СПАСИБО !

  7. 04.10.2016 в 21:44 #15

    Спасибо! сработало ;)

Добавить комментарий