Contact Form 7 / CSS / Form an Comment Form anpassen

TinaR

Hallo,

ich schon wieder :neutral:.

Ich versuche die Kontakt-Formen zu vereinheitlichen.

Deshalb kopierte ich irgendwelche #comment-CSS-Formatierungen und ergänzte welche für die Kontaktform [ganz am Ende der CSS-Datei].

Nun habe ich aber leider das Problem, dass die [COLOR=DarkRed]Textarea[/COLOR] total schmal ist, statt so breit wie die der Kommentar-Form. Außerdem sieht der [COLOR=DarkRed]Submit[/COLOR]-Button so gewöhnlich aus.

(Dass der Hintergrund der input-Felder anders ist, das ist zum Testen gewollt.)

Leider schnalle ich so außergewöhnliche class und id Sachen noch nicht wirklich und in der CSS-Datei ist irgendwas falsch.

Kontaktseite:

CSS:

Frage No. 1:

Wie formatiere ich den "Ab damit"-[COLOR=DarkRed]Submit[/COLOR]-Button der Kontakt-Form, damit er so aussieht wie der [COLOR=DarkRed]Submit[/COLOR]-Button der Standard-Kommentar-Form unten drunter?

Frage No. 2:

Wie bekomme ich es via CSS hin, dass die Textboxen der Kontakt-Form so formatiert/aussehen wie die der Standard-Kommentar-Form unten drunter, auch die [COLOR=DarkRed]Textarea[/COLOR]?

HTML-Quelltext der Kontakt-Form:

HTML

<div class="wpcf7" id="wpcf7-f1-p310-o1"><form action="/?p=310#wpcf7-f1-p310-o1" method="post" class="wpcf7-form"><div style="display: none;"><input type="hidden" name="_wpcf7" value="1" /><input type="hidden" name="_wpcf7_version" value="2.0.1" /><input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1-p310-o1" /></div><p><span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" id="cauthor" class="wpcf7-validates-as-required" size="22" maxlength="30" /></span> &nbsp; Name (muss)</p>
<p><span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" id="cemail" class="wpcf7-validates-as-email wpcf7-validates-as-required" size="22" maxlength="30" /></span> &nbsp; E-Mail (muss)</p>


<p><span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" id="csubject" size="22" maxlength="30" /></span> &nbsp; Betreff</p>
<p><span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" id="cbox" cols="10" rows="10"></textarea></span></p>
<p><small>Alternativ sende eine E-Mail an test &--- test --- de</small></p>
<p><input type="submit" value="Ab damit" id="csubmit" /> <img class="ajax-loader" style="visibility: hidden;" alt="ajax loader" src="http://www.meinehomepage.de/wp-content/plugins/contact-form-7/images/ajax-loader.gif" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>

So, für heute gebe ich auf.

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

koslowski

Moin,

du hast für deine textarea keine Breite in der CSS hinterlegt (style.css Zeile 59).

Sowas kannst du mit Firebug herausfinden. Tutorial Firebug.

Dein Einfluß auf den Submitbutton ist begrenzt. Schau dir den Button mal im FF, IE, Opera und Safari an. Sieht überall anders aus.

Versuch mal vorsichtige Änderungen und prüf das in den Browsern.
Das Aussehen der Buttons wird teilweise von den Browsern vorgegeben. ;-)

Gruß
koslowski

hero-master

Moin :)
Du hast ja das Aussehen für die Kommentar-Funktion bereits definiert. Somit kannst du auch damit arbeiten musst das Ganze nur ein wenig umschreiben.
Das ist dein CSS für dein Kommentar-Formular:

Code

#commentform {
	width: 508px;
}
#commentform a {
	color: #ffa20f;
}
#commentform input, #commentform textarea {
	background: #252525;
	border: 1px solid #303030;
	color: #ffffff;
	padding: 3px;
}
#commentform #commentbox {
	height: 100px;
	width: 500px;
}
#commentform #submit {
	color: #ffffff;
	margin-top: 20px;
}
#commentform small {
	text-transform: normal;
}

Alles anzeigen

Wenn du möchtest, dass jegliche Formularfelder auf deinen Seiten gleich aussehen sollen, dann kannst du das alles veralgeminert definieren:

Code

/* Da du oben noch eine Suchfunktion hast, würde ich das einzeln definieren und nicht generell für alle form-Tags. Es würde zwar theoretisch überschrieben werden, so sind wir aber auf der sicheren Seite */
#commentform,
.wpcf7-form {
	width: 508px;
}
form a {
	color: #ffa20f;
}
input,
textarea {
	background: #252525;
	border: 1px solid #303030;
	color: #ffffff;
	padding: 3px;
}
textarea {
	height: 100px;
	width: 500px;
}


/* Absendebuttons */
#submit,
#csubmit {
	color: #ffffff;
	margin-top: 20px;
}
form small {
	text-transform: normal;
}

Alles anzeigen

Dein großer Fehler im CSS war, dass du alles zwar richtig definiert hast, aber für das falsche Objekt:

Code

#wpcf7 {...}

Nun hast du aber "wpcf7" nicht als ID, sondern wurde als Klasse (class) definiert. Also musst du aus der Raute (#) einen Punkt (.) machen ;)

Und: Submit-Buttons kannst du für alle fast alle Browser so definieren, dass sie genau gleich aussehen! Hintergrundfarbe, Rahmen, Schriftgröße, Breite, Abstände, alles kein Problem, es sieht in allen neueren Browsern dann genau gleich aus!

TinaR

:D Toll, vielen Dank!!!

Das mit dem Unterschied bei class "." und id "#" wusste ich noch garnicht. Ich habe mich immer nur gewundert, warum da 'mal ein Punkt und dann wieder 'ne Raute steht.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Contact Form 7 / CSS / Form an Comment Form anpassen

Jetzt mitmachen!