it-swarm.com.de

Kontaktformular 7 - Mehrere Textfelder in derselben Zeile

Ich verwende Kontaktformular 7, um ein Buchungsformular für ein Hotel zu erstellen.

http://istanabalian.com/book/

Ich kann nicht herausfinden, wie ich das Layout anpassen kann. Ich möchte, dass einige der Textfelder in derselben Zeile angezeigt werden, aber ich finde nicht die richtige Identifikation der Elemente und/oder das CSS-Styling, um dieses sehr einfache Ziel zu erreichen.

Hier ist der 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>

Ich möchte die p-Elemente der Formularzeilenelemente in einer einzelnen Zeile anzeigen. Ich habe diese CSS-Zeile ausprobiert:

.form_row p{
display: inline-block
}

Aber es tut nichts. Ich habe das Gefühl, dass mir etwas fehlt, kann jemand helfen?

Vielen Dank im Voraus,

Benjamin

3
Benjamin

Sie haben wahrscheinlich eine CSS-Regel, die das <p>-Element in voller Breite macht.

Warum nicht <div> und die Klassen des Themas verwenden?

<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

Ich war ziemlich frustriert, weil es an Design-Lösungen für Kontaktformular 7 fehlte ..__ Vor einem Jahr hatte ich die Aufgabe, in cf7 mehrere Formulare mit komplexen Layoutanforderungen zu erstellen. Um dieses Problem zu lösen, habe ich mich zum Ziel gesetzt, ein Plugin zu erstellen, das responsive Grid-Layout-Designs sowie die Möglichkeit bietet, einen modularen Ansatz für das Erstellen von Formularen zu verwenden, dh vorhandene Formulare in größeren Formularkonstrukten wiederverwenden können Das Smart-Grid-Layout-Design für CF7 gibt einen Raster-UI-Editor im Dashboard an, mit dem Sie ein 3-Spalten-Layout in einer einzigen Zeile erstellen können. Sie müssen sich nicht mit css herumspielen, das Layout wird auf Ihrer Seite dargestellt. Es reagiert auch darauf, es werden standardmäßig 3 Zeilen auf einem Mobiltelefon angezeigt.

Probieren Sie es aus und lassen Sie mich wissen, was Sie denken.

2
Aurovrata

Ihr Code funktioniert gut für mich, Sie haben nur einen Syntaxfehler in Ihrem CSS. Der Name Ihrer Definition im HTML-Code lautet "form-row", aber in CSS haben Sie "form_row" geschrieben. Die Regel wurde einfach in "Formularzeile" geändert und alles funktioniert wie erwartet.

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

Sie können Ihr Design-Raster verwenden, um es in zwei Spalten zu erstellen. siehe unten

<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

Sie können eine HTML-Tabelle wie folgt verwenden:

<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

Sie können einfach eine HTML-Tabellenstruktur verwenden !!!

<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

Hoffe, diese Videoanweisung wird dir helfen

Hier ist der CSS-Code für mein Kontaktformular 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