CSS für WPForms

AnFa

Hallo zusammen,
ich habe eine Frage an die CSS Experten. Habe alles mögliche schon ausprobiert aber irgendwie sieht es nicht so aus wie ich möchte. Ich bin dabei ein Formular mit WPForms zu erstellen auf dieser Seite: http://lebenslanges-wohnrecht.de

Ganz unten auf der Seite gibt es zwei Formulare. Das erste ist so wie es aussehen soll (bekomme ich aber leider nicht zum laufen). Das zweite habe ich quasi nachgebaut allerdings fehlt da etwas Formatierung:

1) Felder mit Name, E-Mail, Telefon. Die Schrift sollte wie auch bei den Feldern oben mit etwas Abstand vom Rand anfangen.
2) Das Feld "Ihre Anfrage" ist vom Hintergrund transparent und man kann die Schrift nicht drauf lesen. Weiss wäre super.
3) Etwas kompaktere Darstellung wie oben auch die Felder etwas näher beieinander und abgerundete Ecken wäre ein nice to have und optisch denke ich ansprechender.

Punkt 2 ist mir am wichtigsten, dafür habe ich unter anderem so was probiert
.wpforms-form textarea {background-color: #fff;}

Funktioniert aber leider nicht. Wäre für jede Hilfe dankbar!

Viele Grüße
Anna

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

Marcus[IS]

Hi,

Zitat von AnFa

Punkt 2 ist mir am wichtigsten, dafür habe ich unter anderem so was probiert
.wpforms-form textarea {background-color: #fff;}

Im Entwicklertool vom Browser habe ich dies eingegeben und der Hintergrund wurde weiß.

Code

div.wpforms-container-full .wpforms-form textarea.wpforms-field-medium {
    height: 120px;
    background-color: #fff;
}

Im CSS ist die Hintergrund Farbe als Transparent angegeben.

Allerdings macht mich das etwas stutzig, denn es wird bei dem Punkt ein Pfad zur Style CSS vom Theme Hestia angegeben.
lebenslanges-wohnrecht.de/wp-content/themes/hestia/style.min.css?ver=2.4.5

Das selbe gilt auch für die Texte oben in den Feldern. Das erste Einrücken (Padding) ist mit 7px in der CSS angegeben, der Zweite Wert aber mit 0, daher sind die Texte so an den Rand geklatscht.

Könnte es sein, dass du im Theme noch Optionen zum Layout hast und das dann darüber regeln müsstest?

Sailor56

Wenn du in den Einstellungen nichts findest, könnte dir vielleicht dieser CSS Code weiter helfen:

HTML

div.wpforms-container .wpforms-form input[type="text"].form-control,
div.wpforms-container .wpforms-form input[type="email"].form-control {
  padding: 10px 10px; /* Abstand Schrift zum Rand - runde Ecken (input test/ email)*/
  border-radius: 7px;
}
.home div.wpforms-container .wpforms-form textarea {
  background-image: none;
  background-color: #fff; /* Hintergrundfarbe textarea */
  padding: 10px 10px; /* Abstand Schrift zum Rand - runde Ecken (textarea)*/
  border-radius: 7px;
}
.home div.wpforms-container-full .wpforms-form {
  margin-left: 0px;
  margin-right: 0px;
  padding: 0 60px; /* Breite des Formularfeldes */
}
div.wpforms-container-full .wpforms-form .wpforms-field {
  margin-bottom: 0px; /*^Abstand zwischen Input 'text' und 'textarea' */
}

Alles anzeigen

Bitte in das 'zusätzliche CSS' im Customizer (ganz am Ende) einfügen und auf unerwünschte Nebeneffekte prüfen.

AnFa

Vielen lieben Dank! Die Lösung von @Sailor56 hat funktioniert und sieht top aus!!!!! Ich hätte das nie hinbekommen...
Tausend dank nochmal. Ich prüfe das noch auf unerwünschte Nebeneffekte habe aber bislang nichts feststellen können.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

CSS für WPForms

Jetzt mitmachen!