Контактная форма 7 - Несколько текстовых полей в одной строке

Я использую контактную форму 7 для разработки формы бронирования отеля.

http://istanabalian.com/book/

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

Вот код:

<div id="responsive-form" class="clearfix">

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

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

<label> Arrival date
[date date-79 id:Arrivaldate date-format:mm/dd/yy] </label>

<label> Departure date
[date date-80 id:Departuredate date-format:mm/dd/yy] </label>

<label> How many guests?
    [text your-guests] </label>

<div class="form-row">
       <p>Number of adults [text your-adults]</p>
       <p>Number of children under 6 years old [text your-little-children]</p>
       <p>Number of children under 12 years old [text your-big-children]</p>
</div>

Select your preferred accomodation
    [checkbox your-accomodation use_label_element "Wayan (Two-story villa)" "Kadek (Two-story villa)" "Nyoman (Garden bungalow)" "Kehut (Garden bungalow)" "Pasca (Garden bungalow)"]

Do you need transportation to the hotel ? 
[radio your-pickup default:1 use_label_element exclusive "No transport needed" "Transport from Denpasar airport" "Transsport from Gilimanuk Ferry"]

<label> Do you want us to arrange motorbike rental for you ? 
    [text your-motorbikes] </label>

<label> Tell us more about what brings you to Balian
    [textarea your-message] </label>

[submit "Send"]

</div>

Я хочу, чтобы элементы p элементов формы-строки отображались в одной строке. Я пробовал эту строку CSS:

.form_row p{
display: inline-block
}

Но это ничего не делает. Я чувствую, что что-то упустил, кто-нибудь может помочь?

Спасибо заранее,

Вениамин

Источник

7 ответов

Решение

У вас, вероятно, есть правило CSS, которое делает <p> элемент во всю ширину.

Почему бы не использовать <div> и использовать классы темы?

<div class="form-row">
   <div class="grid-33">Number of adults [text your-adults]</div>
   <div class="grid-33">Number of children under 6 years old [text your-little-children]</div >
   <div class="grid-33">Number of children under 12 years old [text your-big-children]</div>
</div>
Источник

Вы можете просто использовать структуру таблицы HTML!!!

<table>
  <tr>
    <td colspan="2">[text* Name placeholder "Your Name"]</td>
  </tr>
  <tr>
    <td>[text* Class placeholder "Enter Class"]
    </td>
    <td>
      [text* Medium placeholder "Enter Medium"]
    </td>
  </tr>
</table>
[submit "Submit"]
Источник

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

<div id="responsive-form" class="clearfix">
<div class="vc_row ">
  <div class="vc_col-sm-6">
    <label> Your Name (required)
        [text* your-name] </label>
  </div>
  
  <div class="vc_col-sm-6">
    <label> Your Email (required)
        [email* your-email] </label>
  </div>
</div>
<label> Arrival date
[date date-79 id:Arrivaldate date-format:mm/dd/yy] </label>

<label> Departure date
[date date-80 id:Departuredate date-format:mm/dd/yy] </label>

<label> How many guests?
    [text your-guests] </label>

<div class="form-row">
       <p>Number of adults [text your-adults]</p>
       <p>Number of children under 6 years old [text your-little-children]</p>
       <p>Number of children under 12 years old [text your-big-children]</p>
</div>

Select your preferred accomodation
    [checkbox your-accomodation use_label_element "Wayan (Two-story villa)" "Kadek (Two-story villa)" "Nyoman (Garden bungalow)" "Kehut (Garden bungalow)" "Pasca (Garden bungalow)"]

Do you need transportation to the hotel ? 
[radio your-pickup default:1 use_label_element exclusive "No transport needed" "Transport from Denpasar airport" "Transsport from Gilimanuk Ferry"]

<label> Do you want us to arrange motorbike rental for you ? 
    [text your-motorbikes] </label>

<label> Tell us more about what brings you to Balian
    [textarea your-message] </label>

[submit "Send"]

</div>

Источник

Вы можете использовать таблицу HTML следующим образом:

<table>
    <tr>
        <td>Number of adults [text your-adults]</td>
        <td>Number of children under 6 years old [text your-little-children]</td>
        <td>Number of children under 12 years old [text your-big-children]</td>
    </tr>
</table>
Источник

Я был очень разочарован отсутствием дизайнерских решений для контактной формы 7. Год назад мне было поручено создание нескольких форм в cf7 со сложными требованиями к макету. Чтобы решить эту проблему, я приступил к созданию плагина, который позволяет адаптивно проектировать макеты сетки, а также дает возможность использовать модульный подход к построению форм, то есть возможность повторно использовать существующие формы в более крупных конструкциях форм. Я только что выпустил дизайн макета Smart Grid для CF7, он предоставляет редактор пользовательского интерфейса сетки на приборной панели, который позволяет вам построить макет из 3 столбцов в одной строке. Вам не нужно возиться с CSS, макет будет отображаться на вашей странице. Он также отзывчив, к нему по умолчанию будет 3 строки на мобильном телефоне.

Попробуйте и дайте мне знать, что вы думаете.

Источник

Ваш код работает хорошо для меня, у вас просто есть синтаксическая ошибка в вашем CSS. Название вашего определения в HTML - это "form-row", но в CSS вы написали "form_row". Просто изменили правило на "form-row" и все работает как положено.

.form_row p{
  display: inline-block
}
Источник

Надеюсь, эта видео инструкция поможет вам

Вот код CSS для моей контактной формы 7:

/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 10px;
}
/* Clear floats after the columns */
.row:after {
    display: table;
    clear: both;
}

#knopka
{
    color: #fffff;
    background: #8F8CA0;
    width: 90%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
Источник
Другие вопросы по тегам