Contact 7 mit 3 Spalten

Heinz/ Rüdiger

Liebe Wissenden,
ich möchte ein Formular (Contact 7) mit 3 Spalten erstellen,
gibt es dafür eine Quelle, aus der ich den Code kopieren kann und den Text (Beschriftung der Felder) nur auszutauschen brauche?
Vielen Dank für Eure Hilfe!
der Heinz- Rüdiger

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

helix

Du musst unterscheiden zwischen Ausgabe und Darstellung.

Ausgabe der gewünschten Felder mit gewünschter Beschriftung => Einrichtung deines Formulars im Admin-Bereich
Styling => CSS

Drei Spalten gehören normalerweise zum Styling. Und sollten auch nirgends anders als in der CSS-Datei vorgenommen werden. Und auch da nur (über Media Queries) für Bildschirmbreiten, die drei Spalten sinnigerweise zulassen.

Gruß
helix

360pano

Hier wird es erklärt wie man 2 Spalten macht: http://www.webtimiser.de/contact-form-7-einrichten/

Heinz/ Rüdiger

Danke Helix,
nun hab ich gerade einen Aufsatz verfasst- Antworten und weg war er....meine Frage war wohl etwas knapp gehalten.
Ich habe es bisher so gemacht: 3 Kontaktformulare erstellt (im Admin- Bereich?), dann ihre Codes als Layer (Text/ HTML) in einem Slide im Revolution Slider nebeneinander platziert und dort bearbeitet (Größe, Farbe usw), das sah dann auch genau so aus, wie es sein sollte, nur konnte man es logischerweise nicht als 1 Formular ausfüllen und abschicken, sondern 3 einzelne (3x Senden), wenn man diese nun verknüpfen könnte, damit sie als 1 Formular behandelt werden, geht wahrscheinlich nicht, also muß es wohl in einem Formular passieren, das hab ich auch schon versucht, nur eben keine Anordnung als 3 Spalten. Damit ist doch die CSS- Datei gemeint oder?

Heinz/ Rüdiger

Vielen Dank 360pano!
ich hab auch schon versucht <div class und /div> einzusetzen und aus dem Tutorial "contact 7 2 columns" Text in ein neues Kontaktformular zu kopieren, hatte da keinen Erfolg, darum die Idee, daß es doch eine komplette Vorlage für 3 Spalten zum einfachen Übernehmen geben müsste....

mkronenfeld

Versuch's mal damit. Einspaltig, zweispaltig, dreispaltig... total egal, solange der Bildschirm breit genug ist. Für Mobilgeräte könnte man noch einen Mediaquery einbauen.

HTML

<style>
.wps-form {
    width: 100%;
    margin: 0 auto;
}
.wps-form .form-row {
    display: flex;
    width: 100%;
}
.wps-form .column {
    flex: 1;
    width: 100%;
    padding: .5rem 1rem;
}
.wps-form .wpcf7-form-control {
    width: 100%;
}
</style>
<div class="wps-form">
    
    <div class="form-row">
        <div class="column">
            <label>Name</label>
            [text* your-name]
        </div>
        <div class="column">
            <label>E-Mail-Adresse</label>
            [email* your-email]
        </div>
        <div class="column">
            <label>Betreff</label>
            [text your-subject]
        </div>
    </div>
    
    <div class="form-row">
        <div class="column">
            <label>Nachricht</label>
            [textarea your-message]
        </div>
    </div>
    
    <div class="form-row">
        <div class="column">
            [submit "Senden"]
        </div>
    </div>
    
</div>

Alles anzeigen

Heinz/ Rüdiger

Vielen Dank Mkronfeld!
Ich habs jetzt hinbekommen!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Contact 7 mit 3 Spalten

Jetzt mitmachen!