contact form 7 - text neben checkbox anordnen

iPappe

Hallo!

Ich habe ein Formular mit dem o.g. Plugin erstellt. Leider wird der Text der Checkboxen unter den Checkboxen angezeigt. Ich würde den Text gerne neben den Checkboxen haben, damit das Ganze übersichtlicher wird. Kann mir jemand sagen wie das geht?

Danke!

Martin

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

stk

Moin,

Zitat von iPappe

Kann mir jemand sagen wie das geht?

etwa so:

HTML

Code

<div class="contactleft">Ihr Name:</div>
<div class="contactright"><span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-text wpcf7-validates-as-required" size="40" /></span> (Pflichtangabe)</div>
<div class="contactleft">Ihre Email:</div>
<div class="contactright"><span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-text wpcf7-validates-as-email wpcf7-validates-as-required" size="40" /></span> (Pflichtangabe)</div>

CSS

Code

.contactright {
width: 70%;
text-align: left;
float: right;
display: inline;
padding: 4px;
margin: 5px 0;
}


.contactleft {
width: 25%;
white-space: pre;
text-align: right;
clear: both;
float: left;
display: inline;
padding: 4px;
margin: 5px 0;
}

Alles anzeigen

wichtig sind die float-Anweisungen, die die beiden Container anweisen hintereinandern, statt untereinander zu erscheinen und auch (für das Block-Element »div«) das display:inline; damit die Umbrüche, die ein Blocklevel Element hat aufgelöst werden.

Gruß Stefan

iPappe

Zuerst mal Danke für die Antwort. Ich versuche gerade zu verstehen wie das funktioniert. Das mit den floats leuchtet mir ein. Allerdings sehe ich nicht, wo du die checkboxen vom Text trennst. Das Einfügen des Codes in der webseite bringt jedenfalls nicht das gewünschte Ergebnis?!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

contact form 7 - text neben checkbox anordnen

Jetzt mitmachen!