Как поменять внешний вид Contact form 7?

Question

[zakalindor]

Добрый вечер.
Я только познаю веб-разработку и столкнулся с проблемой.
Хочу поменять внешний вид Contact form 7.
Есть 2 кода:

<form name="wpcf7" id="c26" novalidate="novalidate">
              <div class="control-group">
                <div class="form-group floating-label-form-group controls mb-0 pb-2">
                  <label>Name</label>
                  <input class="form-control" id="name" type="text" placeholder="Name" required="required" data-validation-required-message="Please enter your name.">
                  <p class="help-block text-danger"></p>
                </div>
              </div>
              <div class="control-group">
                <div class="form-group floating-label-form-group controls mb-0 pb-2">
                  <label>Email Address</label>
                  <input class="form-control" id="email" type="email" placeholder="Email Address" required="required" data-validation-required-message="Please enter your email address.">
                  <p class="help-block text-danger"></p>
                </div>
              </div>
              <div class="control-group">
                <div class="form-group floating-label-form-group controls mb-0 pb-2">
                  <label>Phone Number</label>
                  <input class="form-control" id="phone" type="tel" placeholder="Phone Number" required="required" data-validation-required-message="Please enter your phone number.">
                  <p class="help-block text-danger"></p>
                </div>
              </div>
              <div class="control-group">
                <div class="form-group floating-label-form-group controls mb-0 pb-2">
                  <label>Message</label>
                  <textarea class="form-control" id="message" rows="5" placeholder="Message" required="required" data-validation-required-message="Please enter a message."></textarea>
                  <p class="help-block text-danger"></p>
                </div>
              </div>
              <br>
              <div id="success"></div>
              <div class="form-group">
                <button type="submit" class="btn btn-primary btn-xl" id="sendMessageButton">Send</button>
              </div>
            </form>
          </div>
        </div>
      </div>

Это внешний вид контактной формы, которую я хочу.

А это исходный код работающей контакт формы 7:

<section id="contact">
      <div class="container">
        <h2 class="text-center text-uppercase text-secondary mb-0">Contact Me</h2>
        <hr class="star-dark mb-5">
        <div class="row">
          <div class="col-lg-8 mx-auto">
			  <div role="form" class="wpcf7" id="wpcf7-f23-o1" lang="ru-RU" dir="ltr">
<div class="screen-reader-response" <="" div="">
<form action="/#wpcf7-f23-o1" method="post" class="wpcf7-form sent" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="23">
<input type="hidden" name="_wpcf7_version" value="5.0.4">
<input type="hidden" name="_wpcf7_locale" value="ru_RU">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f23-o1">
<input type="hidden" name="_wpcf7_container_post" value="0">
</div>
<p><label> Ваше имя (обязательно)<br>
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label> Ваш e-mail (обязательно)<br>
    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false"></span> </label></p>
<p><label> Телефон<br>
    <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false"></span> </label></p>
<p><label> Сообщение<br>
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><input type="submit" value="Отправить" class="wpcf7-form-control wpcf7-submit"></p>
<div class="wpcf7-response-output wpcf7-mail-sent-ok" <="" div="">
	</div></form></div></div></div></div></div></section>

Что сделать чтобы внешний вид первого кода перешел в мою контактную форму?
Помогите пожалуйста :)

Comments

[Алексей]

Использовать css к классам :)

Answer 1

[archelon]

2 варианта:
1. Оставьте тэги и классы, которые генерирует плагин, но переопределите их стили в своем css.
Этот вариант хорош тем, что не надо ломать голову, как заставить cf7 выдавать нужную разметку.
Но плох тем, что приходится мириться с лишними тэгами — куча ненужных span'ов и параграфов, где уместнее div'ы.
Кроме того, у вас есть нестандартные атрибуты, типа data-validation-required-message (их, как я понимаю, обрабатывает какой-то js).
Тогда нужно от них отказываться и валидировать форму как-то по другому. Да, в cf7 есть своя валидация.
2. правильнее всего задать свою разметку.
Документация: https://contactform7.com/docs/
На базовом уровне ничего сложного: просто вставьте код своей формы, заменив инпуты на плейсхолдеры
[text* id:name class:required placeholder "Name"]
См. также:
Как убрать все лишние тэги генерируемые Contact Form 7?
Остается вопрос, что делать с нестандартными атрибутами (data-validation).
В документации прямого ответа нет, результаты поиска по гуглу предлагают редактировать functions.php
Вот, например:
https://wordpress.org/support/topic/adding-data-at...
https://stackoverflow.com/questions/46274317/how-t...

Answer 2

[Орхан Гасанлы]

Вы можете при помощи

class:myClass
id:myId

добавлять нужные классы и идентификаторы к полям CF7. А дальше остается взять нужные стили и добавить в вашу форму. Для удобства используйте консоль браузера и инспектор

Answer 3

[Александр Грач]

Все легко и просто, открываешь CSS и делаешь как надо тебе)