web-dev-qa-db-fra.com

Formulaire de contact 7 - Plusieurs champs de texte sur la même ligne

J'utilise le formulaire de contact 7 pour concevoir un formulaire de réservation d'hôtel.

http://istanabalian.com/book/

Je n'arrive pas à comprendre comment personnaliser la mise en page. J'aimerais que certains champs de texte soient affichés sur la même ligne, mais je ne trouve pas l'identification correcte pour les éléments et/ou le style CSS à utiliser pour atteindre cet objectif très simple.

Voici le code:

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

Je souhaite afficher les éléments p des éléments de ligne de formulaire sur une seule ligne. J'ai essayé cette ligne CSS:

.form_row p{
display: inline-block
}

Mais ça ne fait rien. Je sens que je manque quelque chose, quelqu'un peut-il aider?

Merci d'avance,

Benjoin

csswordpresscontact-form-7form-layout
3
Benjamin

Vous avez probablement une règle CSS qui agrandit l'élément <p>.

Pourquoi ne pas utiliser <div> et utiliser les classes du thème?

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

Le manque de solutions de conception pour Contact Form 7 ..__ m'a frustré. Il y a un an, j'avais pour tâche de créer plusieurs formulaires dans cf7, avec des exigences de mise en page complexes. Pour résoudre ce problème, je me suis mis à créer un plug-in qui permette des conceptions de disposition de grille réactives, ainsi que la possibilité d'adopter une approche modulaire pour la création de formulaires, c'est-à-dire la possibilité de réutiliser des formulaires existants dans des constructions de formulaire plus grandes. Le schéma de mise en page Smart Grid pour CF7 , fournit un éditeur d’interface utilisateur de grille dans le tableau de bord qui vous permet de créer une mise en page à 3 colonnes sur une seule ligne. Vous n'avez pas besoin de jouer avec css, la mise en page sera rendue sur votre page. Il est également réactif, il sera par défaut à 3 lignes sur un téléphone mobile.

Essayez et laissez-moi savoir ce que vous pensez.

2
Aurovrata

Votre code fonctionne bien pour moi, vous avez juste une erreur de syntaxe dans votre CSS. Le nom de votre définition dans le code HTML est "formulaire-ligne" mais en CSS, vous avez écrit "formulaire_row". Il suffit de changer la règle pour "form-row" et tout fonctionne comme prévu.

.form_row p{
  display: inline-block
}
1
Kemal Umut

Vous pouvez utiliser votre grille de thèmes pour la diviser en deux colonnes. voir l'extrait ci-dessous

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

1
aje

Vous pouvez utiliser un tableau HTML comme suit:

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

Vous pouvez simplement utiliser la structure du tableau 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"]
0
sandeep autade

J'espère que cette vidéo vous aidera

Voici le code CSS de mon formulaire de contact 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;
}
0
Juri Fab