Как отображать поля Contact Form 7 в 2 или более колонок

Хотите отображать поля формы обратной связи сделанной при помощи плагина Contact Form 7 в несколько колонок? Это простое руководство позволит вам сделать это за пару минут.

https://www.youtube.com/watch?v=hyc9MDTK5g4

Вставьте этот CSS код любым удобным способом. Как вариант, это может быть: файл style.css вашей темы, дополнительные стили в настройщике активной темы или дополнительный плагин для вставки CSS.

1. .one-half,
2. .one-third,
3. .two-third,
4. .one-fourth {
5. position: relative;
6. margin-right: 4%;
7. float: left;
8. margin-bottom: 10px;
9. }
11. .two-third {
12. margin-right: 2.5%;
13. }
15. .one-half { width: 48%; }
16. .one-third { width: 30.66%; }
17. .two-third { width: 66%; }
18. .one-fourth {width: 22%;}
20. .last {
21. margin-right: 0 !important;
22. clear: right;
23. }
25. @media only screen and (max-width: 1024px) {
26. .one-fourth {
27. width: 100%;
28. margin-right: 0;
29. }
30. }
32. @media only screen and (max-width: 767px) {
33. .one-half, .one-third, .two-third {
34. width: 100%;
35. margin-right: 0;
36. }
37. }
39. .wpcf-wrap {
40. min-height: 90px;
41. }
43. div.wpcf7-response-output {
44. width: 100%;
45. clear: both;
46. margin: 0;
47. }
49. .wpcf-accept {
50. clear: both;
51. }
53. .wpcf7-acceptance > .wpcf7-list-item {
54. margin: 0;
55. }
57. .wpcf-accept > .wpcf7-form-control-wrap {
58. display: inline-block !important;
59. }

Содержание

• Поля Contact Form 7 в 2 колонки
• Поля Contact Form 7 в 3 колонки с подтверждением
• Поля Contact Form 7 в 3 колонки без подтверждения
• Поля Contact Form 7 в 4 колонки
• Как убрать автоматическую вставку тега P в Contact form 7

Поля Contact Form 7 в 2 колонки

Чтобы сделать поля формы в 2 колонки, необходимо использовать подобную конструкцию, которую нужно вставить в основное поле создания формы Contact Form 7:

1. <div class="one-half">
2. <label> Ваше имя (обязательно)
3. [text* your-name] </label>
4. </div>
6. <div class="one-half last">
7. <label> Ваш e-mail (обязательно)
8. [email* your-email] </label>
9. </div>
11. <label> Сообщение
12. [textarea your-message] </label>
14. [submit "Отправить"]

Поля имя и email выстроятся в две колонки, а текстовая область для сообщения будет под ними.

Поля Contact Form 7 в 3 колонки с подтверждением

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

1. <div class="wpcf-wrap">
2. <div class="two-third">
3. <div class="one-half">
4. [text* your-name placeholder "Ваше имя"]
5. </div>
7. <div class="one-half last">
8. [tel* your-phone placeholder "Ваш телефон"]
9. </div>
11. <div class="wpcf-accept">
12. [acceptance acceptance-487] Заполняя форму <a href="/">соглашаюсь</a> на обработку персональных данных [/acceptance]
13. </div>
14. </div><!-- .two-third -->
16. <div class="one-third last">
17. [submit "Получить консультацию"]
18. </div>
19. </div>
20. <div style="clear: both"></div>
21. [response]

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

Если же вы считаете, что подтверждение о согласии на обработку персональных данных для слабаков, то вот вариант без него:

1. <div class="wpcf-wrap">
2. <div class="one-third">
3. [text* your-name placeholder "Ваше имя"]
4. </div>
6. <div class="one-third">
7. [tel* your-phone placeholder "Ваш телефон"]
8. </div>
10. <div class="one-third last">
11. [submit "Получить консультацию"]
12. </div>
13. </div>
14. <div style="clear: both"></div>
15. [response]

Поля Contact Form 7 в 4 колонки

Ну и на дорожку, поля и кнопка Contact Form7 в 4 колонки. С подтверждением:

1. <div class="wpcf-wrap">
2. <div class="two-third">
3. <div class="one-third">
4. [text* your-name placeholder "Ваше имя"]
5. </div>
7. <div class="one-third">
8. [email* your-email placeholder "Ваш email"]
9. </div>
11. <div class="one-third last">
12. [tel* your-phone placeholder "Ваш телефон"]
13. </div>
15. <div class="wpcf-accept">
16. [acceptance acceptance-487] Заполняя форму <a href="/">соглашаюсь</a> на обработку персональных данных [/acceptance]
17. </div>
18. </div><!-- .two-third -->
20. <div class="one-third last">
21. [submit "Получить консультацию"]
22. </div>
23. </div>
24. <div style="clear: both"></div>
25. [response]

И без подтверждения:

1. <div class="wpcf-wrap">
2. <div class="one-fourth">
3. [text* your-name placeholder "Ваше имя"]
4. </div>
6. <div class="one-fourth">
7. [email* your-email placeholder "Ваш email"]
8. </div>
10. <div class="one-fourth">
11. [tel* your-phone placeholder "Ваш телефон"]
12. </div>
14. <div class="one-fourth last">
15. [submit "Получить консультацию"]
16. </div>
17. </div>
18. <div style="clear: both"></div>
19. [response]

Как убрать автоматическую вставку тега P в Contact form 7

По умолчанию Contact Form 7 вставляет тег <p> когда создаёт свою разметку. Это частенько приводит к неприятным сюрпризам и если вы столкнулись с таковым, то нужно сделать следующее.

1. Найдите в корневой папке вашего сайта файл wp-config.php;
2. Прокрутите файл до конца и отыщите комментарий /* Это всё, дальше не редактируем. Успехов! */ или /* That's all, stop editing! Happy blogging. */;
3. Вставьте этот код define( 'WPCF7_AUTOP', false ); НАД надписью из пункта 2;
4. Сохраните файл.

Вот таким образом мы очень просто можем отображать форму Contact Form 7 в 2, 3 и даже 4 колонки. Разумеется, невозможно разобрать 1000 и 1 ситуацию всего в одной статье. Пишите в комментариях свои ситуации! Будем разбирать и дополнять статью вместе. Только указывайте какой вариант кода используете.