Як зробити поля Contact Form 7 у дві або більше колонок

Хочете відображати поля форми зворотного зв’язку, створеної за допомогою плагіна Contact Form 7, у дві чи три колонки? Цей простий посібник допоможе налаштувати поля за декілька хвилин.

Вставте цей CSS код будь-яким зручним способом. Це може бути файл style.css вашої дочірньої теми, додаткові стилі в налаштуваннях активної теми або додатковий плагін для вставки CSS. Ви також можете додати цей код прямо в style.css плагіна (шлях: public_html/wp-content/plugins/contact-form-7/includes/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 "Відправити"]

Поля Contact Form 7 у три колонки з підтвердженням

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

<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]

Поля Contact Form 7 у три колонки без підтвердження

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

<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]

Як прибрати автоматичну вставку тегу <p> у Contact Form 7

За замовчуванням Contact Form 7 вставляє тег <p> при створенні розмітки, що може викликати деякі незручності. Щоб цього уникнути:

  1. Знайдіть файл wp-config.php у кореневій папці вашого сайту.
  2. Прокрутіть файл до кінця і знайдіть коментар /* Це все, далі не редагуємо. Успіхів! */.
  3. Вставте наступний код перед цим коментарем:
define( 'WPCF7_AUTOP', false );
  1. Збережіть файл.

Таким чином, ви легко зможете налаштувати форму Contact Form 7 на відображення у 2, 3 та навіть 4 колонки.