Contact Form 7, one more styling problem

DanielKirsten

Hallo Leute,

ich habe begonnen, mit Contact Form 7 ein Kontakformular zu erstellen und anzupassen:

http://www.drphotgraph.de/?page_id=1155
(Das Formular sendet im Moment an eine trash-mail Adresse.)

Ich habe unter Custom CSS u.a. folgendes angegeben:

Code

#my-special-field
{      margin-left: 5%;
       width: 90%;
       opacity: 0.8;
}

Die einzelnen Einträge im Formular sehen dann z.B. so aus:

Code

<label> Ihre Telefonnummer (freiwillige Angabe)
    [tel tel-931 id:my-special-field] </label>

Wie kann ich erreichen, dass der Text "Ihre Telefonnummer ..." genausoweit eingerückt ist, wie die Eingabefelder?

Daniel

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

Sailor56

Zunächst mal darf eine ID nur genau einem Element zugewiesen werden und nicht, wie du es gemacht hast, allen Input Elementen.
Das solltest du dringend ändern, in dem du im CSS aus #my-special-field ein .my-special-field machst und dann im CF7 das natürlich auch bei den Inputs auf 'class' statt 'id' änderst.
Dem Input für die Telefonnummer gibst du dann einen anderen Klassennamen (zB my-special-telefon).
Diese Klasse schreibst du auch in dein CSS .my-special-telefon und gibst dieser Klasse identische Formatierung, wie .my-special-field, setzt aber das margin-left auf 0.
Damit sollte der Text 'Ihre Telefonnummer...' und das Inputfeld linksbündig am Rand stehen.
Jetzt musst dem Label den linken Rand geben, damit das genau so eingerückt ist, wie die anderen Inputs
.wpcf7-form > p:nth-child(4) > label:nth-child(1){
margin-left: 5%;
}

DanielKirsten

Danke.
Den ersten Teil (aus id eine class machen) habe ich verstanden und umgesetzt.

Den Rest habe ich nicht ganz verstanden. Da sich das Einrücken auf alle
Einträge, und nicht nur auf die Telefonnummer beziehen soll, habe ich auf die
Einführung der Klasse my-special-telefon verzichtet, und für alle Einträge
my-special-field verwendet. Darin habe ich margin-left auf 0 gesetzt.

Die letzten drei Zeilen von Sailor56 habe ich zu Custom CSS hinzugefügt,
beim Abspeichern wurden die > in %gt; geändert. Custom CSS sieht jetzt
so aus:

Code

.wpcf7
{
   background-image: url('http://www.drphotgraph.de/wp-content/uploads/2018/04/1205-gal-151109-184136-D2639-r02.jpg');
   background-position: center;
}


.wpcf7-form &gt; p:nth-child(4) &gt; label:nth-child(1){
margin-left: 5%;
}


.my-special-field
{      margin-left: 0;
       width: 90%;
       opacity: 0.8;
}

Alles anzeigen

Die Labels und Inputfelder stehen jetzt am linken Rand.

Daniel

Sailor56

Ok... hatte ich dann falsch verstanden. Nach deiner Beschreibung dachte ich, es geht 'nur' um die Telefonnummer.
Das macht die Sache jetzt aber auch deutlich einfacher... hast du auch schon richtig gemacht, dann bekommen natürlich alle Inputs die selbe Klasse.
Diesen 'Sonderfall'
.wpcf7-form > p:nth-child(4) > label:nth-child(1){
margin-left: 5%;
}
kannst du dann auch gleich wieder löschen... der sollte nur das erste <label> im vierten <p> im Formular beeinflussen.
Ich gehe allerdings davon aus, dass du es eh irgendwie nicht richtig gemacht hast, denn an der richtigen Stelle eingetragen hätte sich die spitze Klammer (>) nicht in das Entity (%gt;) umwandeln dürfen.
Richtige Stelle für solche CSS - Änderungen/ Einträge ist das zusätzliche CSS im Custumizer (vom Dashboard -> Design -> Customizer -> zusätzliches CSS)

Externer Inhalt www.youtube.com

Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

Muss denn jetzt noch etwas verändert werden, oder bist du jetzt mit der durchgängigen Linksbündigkeit zufrieden?

DanielKirsten

Im Untermenü zu meinem Theme (Mantra) gab es einen Bereich Namens "Custom CSS",
dort habe ich die Dinge hingschrieben. Ich habe die Dinge jetzt dahin verlagert, wo Du
geschrieben hast. Den 'Sonderfall' habe ich herausgelöscht.

Es ist jetzt durchgehend linksbündig, aber ich wollte es durchgehend eingerückt.

Daniel

Sailor56

Da gibt es hunderte Wege das hinzubekommen... der Einfachste ist aber wohl

HTML

.wpcf7-form {
  padding-left: 5%;
}

Wobei die 5% natürlich auch jeder andere Wert sein kann.
Und wenn das nicht so funktionieren sollte, wie du es dir vorstellst, dann nehmen wir einen der 99 anderen Wege ;)!

DanielKirsten

Danke, es sieht jetzt sehr gut aus.

Code

.wpcf7-form {
  padding-left: 5%;
   padding-right: 5%;
}


.my-special-field
{      margin-left: 0%;
       width: 100%;
       opacity: 0.7;
}


.my-special-sendfield
{      margin-left: 80%;
       width: 2%;
       opacity: 0.7;
}

Alles anzeigen

Den Send-Button muss ich bei Gelegenheit verschönern, aber ich weiß noch nicht,
wie er aussehen soll.

Daniel

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Contact Form 7, one more styling problem

Jetzt mitmachen!

Benutzer online in diesem Thema