Contact Form 7 в 2 стовбчики чи більше

Всі, хто створює сайти на CMS WordPress, добре знають плагін, що має назву Contact Form 7. Його призначення в створені контактних форм зворотнього зв’язку. Проте він суттєво відрізняється від тих плагінів, до яких більшість звикли. Налаштування плагіну не візуальне. Створити поля для форми можна лише через код.

При встановленні автоматично створюється стандартна форма с максимально простим інтерфейсом:

В цьому є перевага і недолік плагіну. Завдяки коду зовнішній вигляд контактної форми можна вивернути як завгодно, але це тільки в тому випадку, якщо ви його добре знаєте.

Тому я знаю, що ця стаття буде цікава і корисна тим, хто не дуже “дружить” з кодом і кому вкрай потрібно змінити зовнішній вигляд контактної форми, створеної за допомогою плагіну Contact Form 7.

Одразу скажу, що код був вільно розміщений в мережі.

Спочатку займіться стилями

Перше, що вам потрібно зробити, це завантажити стилі. Зробити це можна через редактор теми, завантаживши код в кінець файлу CSS. А можна піти найлегшим шляхом і запхнути код безпосередньо в тему під час її візуальної редакції.

.one-half,
.one-third,
.two-third,
.one-fourth {
    position: relative;
    margin-right: 4%;
    float: left;
    margin-bottom: 10px;
}

.two-third {
  margin-right: 2.5%;
}

.one-half { width: 48%; }
.one-third { width: 30.66%; }
.two-third { width: 66%; }
.one-fourth {width: 22%;}

.last {
    margin-right: 0 !important;
    clear: right;
}

@media only screen and (max-width: 1024px) {
.one-fourth {
        width: 100%;
        margin-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .one-half, .one-third, .two-third {
        width: 100%;
        margin-right: 0;
    }
}

.wpcf-wrap {
    min-height: 90px;
}

div.wpcf7-response-output {
    width: 100%;
    clear: both;
    margin: 0;
}

.wpcf-accept {
  clear: both;
}

.wpcf7-acceptance > .wpcf7-list-item {
  margin: 0;
}

.wpcf-accept > .wpcf7-form-control-wrap {
    display: inline-block !important;
}

Просто копіюйте код і вставляйте його на свій сайт. А далі переходимо до самого плагіну.

Код для публікації Contact Form 7 в 2 стовбчики

Тепер найцікавіше! Щоб змінити зовнішній вигляд форми, перейдіть в режим редакції форми плагіну Contact Form 7 і вставте у віконце код, що представлений нижче, замість стандартних тегів:

<div class="one-half">
<label> Ваше имя (обязательно)
    [text* your-name] </label>
</div>
 
<div class="one-half last">
<label> Ваш e-mail (обязательно)
    [email* your-email] </label>
</div>
 
<label> Сообщение
    [textarea your-message] </label>
 
[submit "Отправить"]

В цьому випадку поля ім’я та email вишикуються у два стовбчики, а віконце для повідомлення буде під ними.

Код для публікації Contact Form 7 в 3 стовбчики з підтвердженням і без

У випадку, коли є необхідність зробити горизонтальну форму, в якій всі віконця і кнопка відправки будуть розташовані в одну лінію, а віконце підтвердження згоди на обробку даних під ними, то вам стане в нагоді код, наведений нижче:

<div class="wpcf-wrap">
  <div class="two-third">
    <div class="one-half">
          [text* your-name placeholder "Ваше имя"]
    </div>
    <div class="one-half last">
          [tel* your-phone placeholder "Ваш телефон"]
    </div>
    <div class="wpcf-accept">
      [acceptance acceptance-487] Заполняя форму <a href="/">соглашаюсь</a> на обработку персональных данных [/acceptance]
    </div>
  </div><!-- .two-third -->
  <div class="one-third last">
    [submit "Получить консультацию"]
  </div>
</div>
<div style="clear: both"></div>
[response]

Візуально результат отримаєте приблизно такий. Звісно все залежить від того, який шаблон теми встановлений на вашому сайті.

У випадку, коли підтвердження не потрібне, можна скористатися іншим кодом:

<div class="wpcf-wrap">
    <div class="one-third">
          [text* your-name placeholder "Ваше имя"]
    </div>
    <div class="one-third">
          [tel* your-phone placeholder "Ваш телефон"]
    </div>
  <div class="one-third last">
    [submit "Получить консультацию"]
  </div>
</div>
<div style="clear: both"></div>
[response]

Візуально результат буде таким, як на зображенні. Як бачите нічого складного!

Код для Contact Form 7 в 4 стовбчики з підтвердженням і без

Якщо у вас особливо складний випадок, коли потрібно створити контактну форму в 4 стовбчики, то в нагоді вам стане код такого типу:

<div class="wpcf-wrap">
  <div class="two-third">
    <div class="one-third">
          [text* your-name placeholder "Ваше имя"]
    </div>
  <div class="one-third">
          [email* your-email placeholder "Ваш email"]
    </div>
    <div class="one-third last">
          [tel* your-phone placeholder "Ваш телефон"]
    </div>
    <div class="wpcf-accept">
      [acceptance acceptance-487] Заполняя форму <a href="/">соглашаюсь</a> на обработку персональных данных [/acceptance]
    </div>
  </div><!-- .two-third -->
  <div class="one-third last">
    [submit "Получить консультацию"]
  </div>
</div>
<div style="clear: both"></div>
[response]

Це код для Contact Form 7 з підтвердженням. І візуально він виглядає приблизно так:

Якщо ж вам не потрібна згода на обробку персональних даних, то тоді ви може скористатися кодом такого формату:

<div class="wpcf-wrap">
    <div class="one-fourth">
          [text* your-name placeholder "Ваше имя"]
    </div>
  <div class="one-fourth">
          [email* your-email placeholder "Ваш email"]
    </div>
    <div class="one-fourth">
          [tel* your-phone placeholder "Ваш телефон"]
    </div>
  <div class="one-fourth last">
    [submit "Получить консультацию"]
  </div>
</div>
<div style="clear: both"></div>
[response]

У візуальному форматі готова форма матиме такий вигляд:

Отже! Сподіваюсь, що ця стаття буде вам корисною. принаймні, ви тепер знаєте, як можна змінювати візуальний вигляд контактної форму, створеної за допомогою плагіну Contact Form 7. Нагадую, що для того, щоб у вас все вийшло, вам спочатку потрібно завантажити код стилю, а вже потім переходити до редагування самої форми і подальшого її налаштування.

До речі, про налаштування! Є кілька опцій, які необхідно враховувати в обов’язковому порядку. Інакше листи просто не будуть летіти вам на пошту! Про ці налаштування я детально розповіла у своєму відео:

На завершення

Наостанок, варто нагадати про ще один нюанс. По замовчуванню плагін Contact Form 7 вставляє тег <p>, коли створює розмітку. Бувають випадки, коли це призводить до неприємних сюрпризів. Раптом ви стикнулися з подібною ситуацією, то спробуйте зробити наступне.

1. Зазирніть в корневу папку вашого сайту і відшукайте там файл, що має назву wp-config.php.
2. Відкрийте файл і прокрутіть його до слів “Все далі не редактуємо, успіхів!” або їм подібних.
3. Над цим надписом вставте код – define( ‘WPCF7_AUTOP’, false ).
4. Натисніть “Зберегти файл”.

Все, тепер ваша контактна форма повинна відображатися правильно! Дуже сподіваюсь, що наданий матеріал буде для вас корисним.