Контактная форма 7 - изменить стиль

Question

Привет, ребята. Мне нужна помощь с контактной формой 7, теперь все области ввода расположены вертикально в одном столбце. Можно ли сделать одну область ввода справа, я прикрепил ссылки на скриншоты?Как я мог бы сделать это в Wordpress?

Как это выглядит сейчас: https://ibb.co/MMKnf6L

Как это должно выглядеть (справа одна область ввода): https://ibb.co/vJxJ7kk

WPкод

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject
    [text your-subject] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

Answer 1

Да! С помощью CSS-магии вы можете получить любой макет, какой захотите. Так что даже этот макет может быть достигнут с помощью некоторого кода. Я использовал код flexbox для создания структуры.

Подробнее о flexbox можно узнать здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Демо

Я заменил шорткоды HTML, чтобы сделать демонстрацию более заметной. Пожалуйста, замените входные данные вашими собственными короткими кодами CF7.

.prefix-form-container {
 display: flex;
}

.prefix-column {
 display: flex;
 flex-direction: column;
 padding: 10px;
}

.prefix-label {
  display: block;
}

/* demo code */
input, textarea {
 width: 100%;
}

<div class="prefix-form-container">
  <div class="prefix-column">
    <label class="prefix-label"> Your Name (required)
      <input type="text"> </label>

    <label class="prefix-label"> Your Email (required)
      <input type="text"> </label>

    <label class="prefix-label"> Subject
      <input type="text"> </label>
  </div>
  <div class="prefix-column">
    <label class="prefix-label"> Your Message
      <textarea></textarea> </label>
  </div>
</div>
  <div>
    <button type="submit">Send form</button>
  </div>