Page 1 of 2
Anpassen des Email-Kontaktformulars
Posted: Mon 29. May 2006, 19:12
by 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?
Posted: Tue 30. May 2006, 16:18
by 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 {...;}
Posted: Tue 30. May 2006, 18:45
by 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
Posted: Tue 30. May 2006, 22:33
by Klappstuhl28
Or you can add some css directly to the fields
by using the css-option in contentpart contact-form
Posted: Sun 9. Jul 2006, 21:05
by rizn
danke sehr
Posted: Tue 25. Jul 2006, 19:40
by 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
Posted: Tue 25. Jul 2006, 23:13
by 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
Posted: Tue 25. Jul 2006, 23:29
by nekket
I used
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.
Posted: Wed 26. Jul 2006, 01:31
by Klappstuhl28
nekket wrote: too much work to enter the styles into these little boxes.
Thank god for copy and paste
Posted: Wed 26. Jul 2006, 02:01
by 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
Posted: Wed 26. Jul 2006, 08:06
by nekket
phalancs wrote: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...
well
Posted: Wed 26. Jul 2006, 10:44
by phalancs
well nekket, this sounds liek a really good idea
thanx man
Re: Anpassen des Email-Kontaktformulars
Posted: Wed 4. Aug 2010, 19:47
by 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>
Re: Anpassen des Email-Kontaktformulars
Posted: Thu 5. Aug 2010, 20:00
by 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)
Re: Anpassen des Email-Kontaktformulars
Posted: Thu 5. Aug 2010, 21:04
by Cipolla
Zur not machste ein
rein.
Aber wie OG schon sagte, eine sauber strukturierte CSS ist Gold Wert.