Support » Plugins » Schriftgrößen bei Contact form 7 ändern?

  • Gelöst wildner2010

    (@wildner2010)


    Hallo,

    ich verwende das Plugin Contact form 7 in Kombination mit dem Theme „Movedo“.
    Nachdem ich mein Kontaktformular erstellt habe, muss ich feststellen, dass die Schriftgrößen (Feld-Titel wie Name, Telefonnummer etc.) und vor allem der Text, den man dann in die jeweiligen Felder eintippt winzig klein sind.

    Da die Website noch nicht fertig und im Wartungsmodus ist, kann ich den link nicht direkt zeigen. Aber vielleicht kann mir jemand ganz allgemein einen Weg beschreiben, wie die Schriftgrößen bei diesem Plug-in zu ändern sind.

    Innerhalb der Theme-Optionen kann man unter „Typography“ leider diese Schriftgrößen NICHT modifizieren.

    Würde mich sehr über den ein oder anderen Kommentar freuen.

    Besten Dank und viele Grüße
    Wildner

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 18)
  • Moderator Bego Mario Garde

    (@pixolin)

    Die Schriftgröße des Formulars wird durch dein Theme vorgegeben. Erlaubt dir das Theme keine Anpassungen über eine Einstellungsoption im Customizer, kannst du dir mit eigenen CSS-Regeln behelfen, die du im Customizer unter Zusätzliches CSS einträgst. Ich hätte dir auch gerne ein Beispiel genannt, aber du hast keine URL zur Website eingetrage. – Schade, Chance vertan.

    bscu

    (@bscu)

    Du kannst über Customer-CSS die Schriftgrößen ändern. Beispiel:

    .wpcf7-form input, .wpcf7-form textarea { font-size: 18px; }

    Thread-Ersteller wildner2010

    (@wildner2010)

    Hallo.

    Vielen Dank für die schnelle Rückmeldung.

    @pixolin
    Sobald der Wartungsmodus deaktiviert ist, sende ich gerne eine URL.

    @bscu
    Danke für den Code.
    Ich habe diesen den Theme-Optionen bei „CSS / JS Options
    Configure your custom css and javascript in the areas below“ eingetragen.

    Leider hatte dies keine Auswirkungen auf die Textgröße innerhalb der Formularblöcke.

    Mittlerweile habe ich zumindest herausgefunden, wie die Schriftgröße der Formularüberschriften (Name, E-Mail-Adresse etc.) beeinflusst.

    Aber der Text, den der Besucher in die Felder schreibt ist nach wie vor winzig.

    Innerhalb der Einstellungen bei contact form 7 gibt es dazu keine Optionen, oder?

    Gruß

    bscu

    (@bscu)

    Guck mal unter

    Design/Customer/Zusätzliches CSS

    Thread-Ersteller wildner2010

    (@wildner2010)

    Ich bin auf diesen Code im Web gestoßen:
    .wpcf7 {
    background-color: #2590c5 ;
    border: 2px solid #2590c5 ;
    border-radius: 5px;
    padding:20px;
    color:#ffffff;
    font-size:25px;
    }

    Wenn ich ihn zum custom css hinzufüge wird tatsächlich alles so übernommen – außer die besagte Schriftgröße.

    Thread-Ersteller wildner2010

    (@wildner2010)

    Guck mal unter

    Design/Customer/Zusätzliches CSS

    Ändert leider auch keine Schriftgröße.

    Thread-Ersteller wildner2010

    (@wildner2010)

    Bei mir bewirkt „font-size:…px;“ tatsächlich ausschließlich eine Änderung der Schriftgröße für die Beschriftung der Felder (Name, E-Mail-Adresse etc.).

    Gibt es evtl. noch einen Code, der sich auf die Schriftgröße innerhalb der Felder bezieht?

    bscu

    (@bscu)

    Normalerweise sollte mein Beispiel funktionieren. Dann brauchen wir wohl doch einen Link zur Seite.

    Thread-Ersteller wildner2010

    (@wildner2010)

    Alles klar. Ich würde diesen hier hinzufügen, sobald der WM deaktiviert werden kann.

    Besten Dank für die bisherigen Tipps!

    Thread-Ersteller wildner2010

    (@wildner2010)

    Hallo zusammen,

    hier wäre nun der direkte link zu dem besagten Kontaktformular.
    https://premium-hochzeitsbilder.de/kontakt/

    Hoffe, der Beitrag wird noch von jemanden gelesen.

    Beste Grüße
    Wildner

    Moderator Bego Mario Garde

    (@pixolin)

    Nee, tut mir leid, das liest jetzt keiner mehr. 🙈

    Neckischen Spaß beiseite … füg mal das im Customizer unter Zusätzliches CSS ein:

    .wpcf7 .wpcf7-form input, 
    .wpcf7 .wpcf7-form label {
        font-size: 64px !important;
    }

    Anschließend willst du den Wert 64px auf eine vernünftige Größe ändern.

    Moderator Hans-Gerd Gerhards

    (@hage)

    Hallo,
    die Schriftgröße kannst du z. B. größer bekommen, wenn du über Design > Customizer > Zusätzliches CSS folgende Regel eingibst:

    form.wpcf7-form {
        font-size: 1.4em;
    }

    Die Größe kannst du natürlich individuell ändern.

    Nachtrag: da war Bego mal wieder flotter 🙂

    Viele Grüße
    Hans-Gerd

    Thread-Ersteller wildner2010

    (@wildner2010)

    🙂
    Vielen Dank für die superschnelle Hilfe pixolin!

    Zwei Fragen hätte ich zu dem CSS-Code.
    1. Es wird mir ein Warnhinweis wegen der Verwendung von „!important“ angezeigt.
    Könnte ich das in diesem Fall getrost ignorieren oder muss ich u.U. mit Problemen deswegen rechnen?

    2. Alle Felder sind nun optimal von der Größe – bis auf das Feld „Eure Nachricht“?! Wenn man da etwas hineinschreibt, ist die Schriftgröße so klein wie zuvor?! Aber nur in diesem Feld.

    Thread-Ersteller wildner2010

    (@wildner2010)

    Hallo hage!
    Auch vielen Dank für deine Hilfe. Ich habe deine Nachricht jetzt erst gelesen.

    Wenn ich deinen Code eingebe, sind nur alle Titel der jeweiligen Felder von der Schriftart her größer. Alle Eingabefelder bleiben leider unverändert.

    Moderator Bego Mario Garde

    (@pixolin)

    Der Warnhinweis kommt, weil ich zu faul war, die Selektoren richtig abzustimmen. Aber ich denke, mit der Lösung kann man leben.

    Für das Eingabefeld musst du die CSS-Regel noch etwas erweitern:

    .wpcf7 .wpcf7-form input, 
    .wpcf7 .wpcf7-form textarea, 
    .wpcf7 .wpcf7-form label {
        font-size: 64px !important;
    }

    … wobei wir hier eigentlich nicht auf Zuruf CSS-Regeln für individuelle Änderungen liefern. Uneigentlich … zu spät. 😉

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 18)
  • Das Thema „Schriftgrößen bei Contact form 7 ändern?“ ist für neue Antworten geschlossen.