Formulario de contacto 7 – Múltiples campos de texto en la misma línea

Estoy usando el formulario de contacto 7 para diseñar un formulario de reserva para un hotel.

http://istanabalian.com/book/

No puedo entender cómo personalizar el diseño. Me gustaría que algunos de los campos de texto se muestren en la misma línea, pero no encuentro la identificación correcta de los elementos y/o qué estilo CSS usar para lograr este objetivo tan simple.

Aquí está el código:

<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
2023 </label>

<label> Departure date
2023 </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>

Quiero mostrar los elementos p de los elementos de la fila del formulario en una sola línea. He probado esta línea CSS:

.form_row p{
display: inline-block
}

Pero no hace nada. Siento que me estoy perdiendo algo, ¿alguien puede ayudarme?

Muchas gracias de antemano,

Benjamín

Probablemente tenga una regla CSS que haga que el <p> elemento de ancho completo.

¿Por qué no usar? <div> y usar las clases del tema?

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

¡Simplemente puede usar la estructura de la tabla 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"]

Puede usar su cuadrícula temática para hacerlo en dos columnas. ver fragmento a continuación

<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
2023 </label>

<label> Departure date
2023 </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>

Puede usar una tabla HTML de la siguiente manera:

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

Me ha frustrado bastante la falta de soluciones de diseño para Contact Form 7. Hace un año, me encargaron crear varios formularios en cf7, con requisitos de diseño complejos. Para resolver este problema, me puse a crear un complemento que permita diseños de diseño de cuadrícula receptivos, así como la capacidad de tener un enfoque modular para la creación de formularios, es decir, poder reutilizar formularios existentes en construcciones de formularios más grandes. acabo de lanzar el Diseño de diseño de red inteligente para CF7, proporciona un editor de interfaz de usuario de cuadrícula en el tablero que le permite crear un diseño de 3 columnas en una sola fila. No necesita perder el tiempo con css, el diseño se representará en su página. También responde, por defecto tendrá 3 filas en un teléfono móvil.

Pruébalo y déjame saber lo que piensas.

Su código funciona bien para mí, solo tiene un error de sintaxis en su CSS. El nombre de su elemento en el HTML es form-row pero en CSS has escrito form_row. Acabo de cambiar el selector de CSS a form-row y todo funciona como se esperaba.

.form-row p {
  display: inline-block;
}

Espero que esta instrucción en video te ayude.

Aquí está el código CSS para mi formulario de contacto 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;
}