Anpassen des Email-Kontaktformulars

[rizn]

Hi,

ich möchte das Email-Kontaktformular anpassen.
Wo finde ich das notwendige CSS, bzw. die entsprechenden Classes?
Wie ermittle ich dies generell (im "Quelltext ansehen" finde ich nur frontend.css / class=FormLabel oder class=FormLabelRequired), doch diese Einträge finde ich nicht in der wahren frontend.css?

[nekket]

Wenn du sie in der frontend.css nicht findest, musst du sie einfach selber anlegen. Die frontend.css beinhaltet standardmässig nicht alle klassen.

Beim Formular kannst du ja eine classe für das Formular selber definieren und den Feldern manuell Style-Angaben wie z.B. "border: 1px solid #F30;" geben.

Oder du fasst sie zusammen mit

Code: Select all

.<formularklassenname> input {border: 1px solid #F30;}
.<formularklassenname> button {...;}

[flip-flop]

Hier ein kleiner Auszug:

Formular class: contact_form
Label wrap: |  

- Den ganzen Kram anlegen
- Dann unten in Vorlage eintragen wie die Mail ausgegeben werden soll.

Vorlage: Text

Code: Select all

Hallo {name}, 

die Nachricht wurde übermittelt an info@example.com und wird bearbeitet.
------------------------------------------------------------------------ 
eMail-Adresse: {email}

Firma:         {firma}
Name:          {name}

Adresse:       {strasse} - {ort}

Tel.:          {tel} - Fax: {fax}

Kontakt-Art:   {kontaktart}
Info-Material: {infomaterial}

Mitteilung:
{nachricht}

------------------------------------------------------------------------ 

Gesendet von: info@example.com

- Und nu die CSS dazu:

Code: Select all

/* -------- Contact form --------- */
.contact_form {
	border: 1px solid #c8c8c8;
	background-color: #f5f5f5; 
	padding: 10px 0 10px 10px;
	margin: 0 0 10px 0;
}

input,textarea,select {
	font-family: Arial, Verdana, Helvetica;
	font-size: 10pt;
	color : #99999;
	border : 1px solid #c8c8c8;
	background-color : #fbfbfb;
}

.formLabel {
	font-family: Arial, Verdana, Helvetica;
	font-size: 10pt;
	font-weight: bold;
	}

.formLabelRequired {
	font-family: Arial, Verdana, Helvetica;
	font-size: 10pt;
	color: #7F003B;
	font-weight: bold;
	vertical-align: middle;
	padding-top: 2px;
}

.formField {
	font-family: Arial, Verdana, Helvetica;
	font-size: 10pt;
	font-weight: normal;
	color: #000000;
	vertical-align: middle;
	padding-top: 2px;
}

/* Als name im Formular angelegt */
#kontaktart0, #kontaktart1, #infomaterial0, #infomaterial1 {
	border: 0px none #000000;
	background-color: #f2f2f2;
}

#checkbox0 { color: #7F003B; }

#submitIt {
	font-size: 9pt;
	font-weight: bold;
	color: #000000;
	border: 1px solid #000000;
	background-color : #D0DAE3; 
}

#resetIt {
	font-size: 9pt;
	font-weight: bold;
	color: #000000;
	border: 1px solid #000000;
	background-color : #FFEDDF;
}

Gruß Knut

[Klappstuhl28]

Or you can add some css directly to the fields
by using the css-option in contentpart contact-form

[rizn]

danke sehr

[phalancs]

finally i got it right.

Well i was confused, cause I thought that i should enter a class directly to the fields, but you are only allowed to enter some css directly.

Anyways I got the feeling that this restricts the thing a little bit, cause the sourcecode shows that it is done like this:

Code: Select all

<td class="formField"><span id="breaktext7" style="line-height: 200%; font-size: 12pt; font-weight: bold;"><br />Your Custom field

Well, if I use "margin" there it has no effect. I guess it is because of the prior assigning of "form field" to the table data tag.

Not sure...

:O

At least I now fully understand this option

[Klappstuhl28]

Hi phalancs,

"margin-left: 2px; margin-top: 7px;" for example directly wrote
into CSS: doesn´t work in CP "E-Mail-Kontakt-Formular"?

It works perfect to me. 1.2.6

[nekket]

I used

Code: Select all

margin: 5px 0;

for I think it's too much work to enter the styles into these little boxes

So i give a class to the form itself and write all styles in my frontend.css... much less work and more easy to change.

[Klappstuhl28]

too much work to enter the styles into these little boxes.

Thank god for copy and paste

[phalancs]

So i give a class to the form itself and write all styles in my frontend.css

Yes this is of course the first step. But this does not offer the opportunity to distinguish for instance between normalke labels and head labels. Or spacer texts.
It would be great if there was the possibility not only to enter style definitions but classes for fields/ labels

[nekket]

It would be great if there was the possibility not only to enter style definitions but classes for fields/ labels

You can change the "style:" to "class" in the corresponding file...

[phalancs]

well nekket, this sounds liek a really good idea thanx man

[david2]

Ich bin fast am verzweifeln: Eigentlich sollte es ja einfach sein die Schriftgröße des Feldes vor dem Eingabefeld (class="formLabel") zu ändern.
Bei der Stärke ("bold") und Farbe klappt's auch einwandfrei. Nur die Schriftgröße ist winzig (vergleichbar wie beim <p>-Tag); ebenfalls kann ich die Schriftart nicht ändern (-wäre aber nicht so wichtig).

Hat jemand eine Idee? Ich habe nicht gesehen dass die Schriftgröße von irgendwo vererbt wird und beim "formLabelRequired" kann ich auch alles ändern, wie ich's will.

Hier der Code aus der frontend.css:

Code: Select all

.formLabel { 
    font-family: Verdana;
    font-size: 14pt;
    vertical-align: middle;
    color: #0000dd;
    font-weight: bold;    
}

Und der ausgegebene Quellcode:

Code: Select all

<td class="formLabel"><strong>Vorname:</strong></td>
<td class="formField"><input type="text" name="Vorname" id="Vorname" value="" size="12" style="width: 250px; margin: 2px 0px 2px 0px; padding-left: 3px;" /></td>
</tr>
<tr>
<td class="formLabelRequired">Name:*</td>
<td class="formField"><input type="text" name="Name" id="Name" value="" size="12" style="width: 250px; margin: 2px 0px 2px 0px; padding-left: 3px;" /></td>

[Oliver Georgi]

achte darauf, dass Dir nicht eventuell ein späterer CSS-Wert diese Schriftgröße überschreibt, weil "höherwertig". Das bekommst Du heraus mit den gängigen Entwicklerwerkzeugen des Browsers (Firebug unter Firefox z.B., bei Chrome/Safari eingebaut)

[Cipolla]

Zur not machste ein

Code: Select all

font-size: 14pt ! important;

rein.

Aber wie OG schon sagte, eine sauber strukturierte CSS ist Gold Wert.