1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Contact Form 7 Design anpassen

Dieses Thema im Forum "Design" wurde erstellt von M.0.O., 24. April 2012.

  1. M.0.O.

    M.0.O. Member

    Registriert seit:
    24. April 2012
    Beiträge:
    7
    Zustimmungen:
    0
    Hallo zusammen,

    ich bin sehr unversiert im Umgang mit den Sachen hier aber wollte auf meiner Seite ein Kontaktformular einbinden. Das Problem ist, dass sowohl die Hintergrundfarbe der Textfelder, als auch die Schriftfarbe in diesem Bereich weiß sind.

    Die Seite als ganze ist schwarz mit weißer Schrift und es wäre mir egal ob nun in diesem Bereich die Schrift schwarz/blau wird oder die Kästchen eine andere Hintergrundfarbe bekämen.



    mein code der seite sieht so aus:

    und der des Formulares so:


     
  2. Thorsten Weber

    Thorsten Weber New Member

    Registriert seit:
    6. April 2012
    Beiträge:
    3
    Zustimmungen:
    0
  3. M.0.O.

    M.0.O. Member

    Registriert seit:
    24. April 2012
    Beiträge:
    7
    Zustimmungen:
    0
    Leider hat mir das Tut nicht geholfen (habe schon so ca 5 angeguckt) aber da wird immer nur grundlegend beschrieben wie ich es installiere und einbaue, abe nie wie ich es im Design ändere. Das ist aber gerade meine Frage
     
  4. Hille

    Hille Well-Known Member

    Registriert seit:
    22. Januar 2012
    Beiträge:
    7.965
    Zustimmungen:
    8
    Anpassungen werden im stylesheet vorgenommen, also in deiner style.css. Hier mal eine Auswahl von möglichen Parametern:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Hier auch ein Beispiel zu Veranschaulichung:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Besorge dir für den Firefox das Addon Firebug, das ist für solche Arbeiten sehr hilfreich.
     
  5. bgeissler

    bgeissler Well-Known Member

    Registriert seit:
    6. August 2006
    Beiträge:
    4.404
    Zustimmungen:
    0
    http://contactform7.com/docs/
    Hier findest du die Dokumentation.
    Schau z.B. unter "Textfields" dort kannst du "class:" Atribute für die Felder angeben, das geht auch für alle anderen Formelemente. Die Klassen definierst du in deiner style.css
     
  6. Marc Behrend

    Marc Behrend Member

    Registriert seit:
    14. Dezember 2010
    Beiträge:
    16
    Zustimmungen:
    0
    Hallo,
    verwende auch das Contact Form7 in meiner WP Seite.

    Frage: wie kann ich "neben" sprich Rechts von dem Formular Contact Form7 ein Textfeld zusätzlich einbauen um z.b Allgemeinen Text anzuzeigen und einzugeben?
     
  7. M.0.O.

    M.0.O. Member

    Registriert seit:
    24. April 2012
    Beiträge:
    7
    Zustimmungen:
    0
    danke erstmal für eure mühen es mir zu erklären.
    wenn ich in der style.css den code von Hille einfüge ändert das an dem aussehen der seite leider garnix. müsste ich da noch was ändern?

    und zum thema klassen eine sehr allgemeine frage: reicht eine klasse für alle objekte in dem formular anzulegen? kann ich in einer klasse einfach nur eine textfarbe definieren und diese klasse dann für textfelder, submit-button, checkbox etc. benutzen?

    und wenn ich diese klasse definiere, braucht es einfach nur ein
    .farbe {
    color: #ff0000;
    }

    besipielsweise?

    gruß Stephan
     
  8. M.0.O.

    M.0.O. Member

    Registriert seit:
    24. April 2012
    Beiträge:
    7
    Zustimmungen:
    0
    p.s. wenn ich ein textfeld mit firebug analysiere steht da:
    <span class="wpcf7-form-control-wrap name1"> <input id="acpro_inp4" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-text" type="text" size="40" value="" name="name1">


    </span>

    wobei wpcf7-text die manuell im formular zugewiesene klasse ist. (mit dem code von hille in der style.css)

    und die colour-sachen aus der wpcf7-text klasse sind durchgestrichen, als ob sie überschrieben würden
     
    #8 M.0.O., 1. Mai 2012
    Zuletzt bearbeitet: 1. Mai 2012
  9. bgeissler

    bgeissler Well-Known Member

    Registriert seit:
    6. August 2006
    Beiträge:
    4.404
    Zustimmungen:
    0
    Habe gerade mal getestet:
    Die Textfarbe lässt sich per class nicht für einzelne Felder nicht zuweisen.
     
  10. M.0.O.

    M.0.O. Member

    Registriert seit:
    24. April 2012
    Beiträge:
    7
    Zustimmungen:
    0
    gibt es denn noch andere möglichkeiten?
     
  11. bgeissler

    bgeissler Well-Known Member

    Registriert seit:
    6. August 2006
    Beiträge:
    4.404
    Zustimmungen:
    0
    In der style.css anlegen:

    für alle Textfelder
    .wpcf7-text {color:red;}

    für Nachrichtenfeld:
    .wpcf7-textarea {color:red;}
     
  12. M.0.O.

    M.0.O. Member

    Registriert seit:
    24. April 2012
    Beiträge:
    7
    Zustimmungen:
    0
    genau das habe ich in die contact-form-7/style.css geschrieben aber leider ist die farbe in den feldern immernoch weiß.
    wenn ich eines der felder mit firebug untersuche ist die entsprechende zeile:
    .wpcf7-text {
    color: red;


    }
    zwar vorhanden aber durchgestrichen.

    also es sieht so aus als ob es von einer übergeordneten instanz überschrieben würde. ich bin ehrlich gesagt über dieses scheinbar "simple" problem völlig ratlos
     
  13. bgeissler

    bgeissler Well-Known Member

    Registriert seit:
    6. August 2006
    Beiträge:
    4.404
    Zustimmungen:
    0
    Zitat von bgeissler [​IMG]
    In der style.css anlegen:
     
  14. M.0.O.

    M.0.O. Member

    Registriert seit:
    24. April 2012
    Beiträge:
    7
    Zustimmungen:
    0
    ?
    was hat die grafik mit der frage zu tun?
    und gibt es eine übergeordnete style.css oder ist das da wo ich es definieren wollte richtig (also in der contact-form-7/style.css)?
     
  15. bgeissler

    bgeissler Well-Known Member

    Registriert seit:
    6. August 2006
    Beiträge:
    4.404
    Zustimmungen:
    0
    Ich habe das mal testweise in die style.css meines Themes gepackt, dort funktionierte es.
    Die contact-form-7/style.css empfiehlt sich nicht, da sie mit dem nächsten cf7-Update überschrieben wird.
     
  16. Jamaika1986

    Jamaika1986 Member

    Registriert seit:
    21. März 2014
    Beiträge:
    13
    Zustimmungen:
    0
    In meinem Kontaktformular sich die Felder für E-Mail und Telefonnummer schmäler und kürzer als die anderen Textfelder.

    http://www.jf-chiptuning.at/kontakt/

    In der style.css kontte ich nichtes finden, wie kann ich das anpassen???

    Gruß
     
  17. Patrizia

    Patrizia Active Member

    Registriert seit:
    25. Juni 2014
    Beiträge:
    38
    Zustimmungen:
    0
    Guten Abend,

    ich habe auch ein Problem mit dem Formatieren meines Formulars. Ich verwende das Plugin Contact Form 7. Mit dem Code von Hille (vielen Dank dafür :) ) habe ich es sehr gut hinbekommen, ein Textfeld mit dem Attribut "textarea" so zu formatieren, wie ich es gerne hätte. Bei dem Attribut "text" (also ein einzeiliges Textfeld) kriege ich das ums Verrecken nicht hin. Ich habe es mit ".wpcf7 text {....}" und mit ".wpcf7-text {....}" versucht, aber es klappt einfach nicht. Er weigert sich, die angegebenen Formatierungen zu übernehmen. Ich habe jetzt einfach aus allen einzeiligen Textfeldern mehrzeilige gemacht mit dem Attribut "textarea". Aber das kann ja auch nicht die Lösung sein.....

    Vielen Dank schon mal für Eure Hilfe

    Patrizia
     
  18. Patrizia

    Patrizia Active Member

    Registriert seit:
    25. Juni 2014
    Beiträge:
    38
    Zustimmungen:
    0
    So, meine Frage wieder nach vorne hol. Vielleicht tut sich ja etwas? Immerhin habe ich fast ganze 3 Tage gewartet ;), bis ich hier wieder gepostet habe.
    LG
    Patrizia
     
  19. Hille

    Hille Well-Known Member

    Registriert seit:
    22. Januar 2012
    Beiträge:
    7.965
    Zustimmungen:
    8
    Poste mal den Link zu deiner Seite.
     
  20. Monika

    Monika Well-Known Member
    Ehrenmitglied

    Registriert seit:
    4. Juni 2005
    Beiträge:
    14.126
    Zustimmungen:
    1

    ja ohne Link ist CSS Hilfe immer ein Stochern im Nebel


    und zukünftig kannst du @Patrizia ruhig einen neuen Thread eröffnen,
    das hilft Dir, weil du schneller Antwort bekommst
    und uns, weil wir nicht glauben, da haben "eh schon hunderte "geholfen :)
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden