Contact Form 7 Design anpassen

M.0.O. · April 24, 2012 at 11:54 PM

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:

Quote

Hier könnt ihr euch zu den 5. OWS anmelden:
[contact-form-7 id="951" title="Meldeformular Turnier"]

und der des Formulares so:

Quote

Ihr Name (Pflichtfeld) 
[text* your-name]
Ihr Verein (Pflichtfeld) 
[text* verein] 
Ihre E-Mail-Adresse (Pflichtfeld) 
[email* your-email] 
Ihr TTR-Wert (per 11.02.2012) (Pflichtfeld) 
[text* ttr] 

Wahl der Klassen (Pflichtfeld) 
[checkbox Klassenwahl "Herren A" "Herren B" "Herren C" "Herren D" "Herren E" "Brettchen"] 
 [checkbox KlassenwahlTeam "Herren Team 1" "Herren Team 2" "Herren Team 3" "Mixed"] 
 [checkbox KlassenwahlJugend "Junioren U22" "Mädchen" "Jungen A" "Jungen B" "Jungen A Team" "Jungen B Team"] 
 [checkbox KlassenwahlSchüler "Schüler A" "Schüler B" "Schüler C" "Schülerinnen A" "Schülerinnen B" "Schülerinnen C"] 

Teampartner/Doppelpartner (optional) 
[text* partner] 

Ihre Nachricht 
[textarea your-message] 
[submit "Senden"]

Display More

Thorsten Weber · April 25, 2012 at 2:48 AM

Hallo ?,
hab zum contact form 7 ein Video tutorial auf youtube gefunden. http://m.youtube.com/results?q=word…h?v=fnINdCe1Y6o link ist vom handy eingefügt.

Hoffe es hilft.

Gruss
Thorsten

M.0.O. · April 25, 2012 at 12:19 PM

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

Hille · April 25, 2012 at 12:40 PM

Anpassungen werden im stylesheet vorgenommen, also in deiner style.css. Hier mal eine Auswahl von möglichen Parametern:

Code

wpcf7 textarea, wpcf7-text, wpcf7-submit usw.

Hier auch ein Beispiel zu Veranschaulichung:

Code

.wpcf7-text,
.wpcf7 textarea {
    width: 75%;
    height: 12px;
    padding: 9px 10px;    
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    color: #47101a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-style: italic;
}

Display More

Besorge dir für den Firefox das Addon Firebug, das ist für solche Arbeiten sehr hilfreich.

bgeissler · April 25, 2012 at 1:04 PM

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

Marc Behrend · April 30, 2012 at 4:55 PM

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?

M.0.O. · May 1, 2012 at 10:52 PM

Quote from bgeissler

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

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

M.0.O. · May 1, 2012 at 10:58 PM

p.s. wenn ich ein textfeld mit firebug analysiere steht da:
 <input id="acpro_inp4" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-text" type="text" size="40" value="" name="name1">

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

bgeissler · May 2, 2012 at 10:20 AM

Habe gerade mal getestet:
Die Textfarbe lässt sich per class nicht für einzelne Felder nicht zuweisen.

M.0.O. · May 2, 2012 at 11:19 AM

Quote from bgeissler

Habe gerade mal getestet:
Die Textfarbe lässt sich per class nicht für einzelne Felder nicht zuweisen.

gibt es denn noch andere möglichkeiten?

bgeissler · May 2, 2012 at 12:28 PM

In der style.css anlegen:

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

für Nachrichtenfeld:[FONT=monospace]
.wpcf7-textarea {color:red;}
[/FONT]

M.0.O. · May 3, 2012 at 12:20 AM

Quote from bgeissler

In der style.css anlegen:
für alle Textfelder
.wpcf7-text {color:red;}
für Nachrichtenfeld:[FONT=monospace]
.wpcf7-textarea {color:red;}
[/FONT]

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

bgeissler · May 3, 2012 at 9:32 AM

Zitat von bgeissler [Blocked Image: http://forum.wpde.org/images/buttons/viewpost.gif]
In der[COLOR=Red] style.css[/COLOR] anlegen:

M.0.O. · May 3, 2012 at 11:27 AM

Quote from bgeissler

Zitat von bgeissler [Blocked Image: http://forum.wpde.org/images/buttons/viewpost.gif]
In der[COLOR=Red] style.css[/COLOR] anlegen:

?
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)?

bgeissler · May 3, 2012 at 7:26 PM

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.

Jamaika1986 · May 3, 2014 at 2:45 PM

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ß

Patrizia · July 29, 2014 at 11:27 PM

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

Patrizia · August 1, 2014 at 9:04 PM

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

Hille · August 1, 2014 at 9:12 PM

Poste mal den Link zu deiner Seite.

Monika · August 1, 2014 at 11:20 PM

Quote from Hille

Poste mal den Link zu deiner Seite.

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 :-)

Dear visitor, welcome! Create an account or sign in to comment

Contact Form 7 Design anpassen

Participate now!