Kontaktformular fertig, aber wie abschicken?

Xelo · #1 (**permalink**) 04.02.2014, 15:00

ich habe mir ein kleines eigenes Kontaktformular mit CSS gebaut, nun muss ich das ganze noch verlinken, damit eine Mail in meinem Briefkasten landet.

Der explizierte Code für das Kontaktformular:

HTML-Code:

<p><h2>Kontaktformular:</h2></p>
   <form>
   <p class="schrift">Vorname: <INPUT NAME="Name"> Nachname: <INPUT NAME="Name"></p><p class="schrift">eMail: <INPUT NAME="Name"> Telefon: <INPUT NAME="Name"></p>
    <p class="apple">
     <option disabled selected>Bitte ausw&auml;hlen:</option>
    <SELECT NAME="Modell">
<optgroup label="iPhone"><OPTION>iPhone 4 - Wei&beta;</OPTION><OPTION>iPhone 4 - Schwarz</OPTION><OPTION>iPhone 4s - Wei&beta;</OPTION><OPTION>iPhone 4s - Schwarz</OPTION><OPTION>iPhone 5 - Wei&beta;</OPTION><OPTION>iPhone 5 - Schwarz</OPTION><OPTION>iPhone 5s - Wei&beta;</OPTION><OPTION>iPhone 5s - Schwarz</OPTION></optgroup><optgroup label="iPad"></optgroup><OPTION>iPad 2</OPTION><OPTION>iPad 3</OPTION><OPTION>iPad 4</OPTION><OPTION>Sonstige</OPTION></SELECT>  
<SELECT NAME="defekt">
<OPTION>Schaden:</OPTION><OPTION> - Displaybruch</OPTION><OPTION> - Homebutton</OPTION><OPTION> - Power/Lockbutton</OPTION><OPTION> - Mikrofon</OPTION><OPTION> - H&ouml;muschel</OPTION><OPTION> - Backcover</OPTION><OPTION> - Akku</OPTION><OPTION> - Mute/Lautst&auml;rke</OPTION><OPTION> - Sonstige</OPTION>
</SELECT>
    <SELECT NAME="abwicklung">
<OPTION>Versand DE</OPTION><OPTION>Abgabe in Werkstatt</OPTION><OPTION>Versand EU</OPTION><OPTION>Versand nicht-EU</OPTION><OPTION></SELECT>
</p>
<p><TEXTAREA class="feldname">Bemerkung:</TEXTAREA></p>
<p><span class="senden"><a href="sendto:info@xphone-munic.de">Absenden!</a></span>

und hier CSS:

Code:

#textbereich_innen  .schrift    {  
    font-size: 15px;
    background-image: -moz-linear-gradient(top left, #c0c0c0 25%, #dcdcdc 75%);
    background-image: -webkit-linear-gradient(top left, #c0c0c0 25%, #dcdcdc 75%);
    background-image: -ms-linear-gradient(top left, #c0c0c0 25%, #dcdcdc 75%);
    background-image: -o-linear-gradient(top left, #c0c0c0 25%, #dcdcdc 75%);
    border-radius: 20px;
    border: 1px solid black;
    padding: 20px 8px 20px 8px;
    width: 400px
    height: 190px;
    display: block;
}
#textbereich_innen  .apple    {  
    font-size: 15px;
    background-image: -moz-linear-gradient(top left, #c0c0c0 25%, #dcdcdc 75%);
    background-image: -webkit-linear-gradient(top left, #c0c0c0 25%, #dcdcdc 75%);
    background-image: -ms-linear-gradient(top left, #c0c0c0 25%, #dcdcdc 75%);
    background-image: -o-linear-gradient(top left, #c0c0c0 25%, #dcdcdc 75%);
    border-radius: 20px;
    border: 1px solid black;
    padding: 20px 8px 20px 8px;
    width: 400px
    height: 190px;
    display: block;
}
#textbereich_innen  .feldname    {  
    width: 400px;
    height: 200px;
    border-radius: 20px;
    padding: 10px;
}
#textbereich_innen  .senden {
    text-align: center;
    font-size: 15px;
    background-image: -moz-linear-gradient(top left, #c0c0c0 25%, #dcdcdc 75%);
    background-image: -webkit-linear-gradient(top left, #c0c0c0 25%, #dcdcdc 75%);
    background-image: -ms-linear-gradient(top left, #c0c0c0 25%, #dcdcdc 75%);
    background-image: -o-linear-gradient(top left, #c0c0c0 25%, #dcdcdc 75%);
    border-radius: 20px;
    border: 1px solid black;
    padding: 20px 8px 20px 8px;
    width: 400px;
    height: 20px;
    margin-left: 14%;
    display: block;
}
#textbereich_innen  .senden a   {
    font-size: 20px;
    color: black;

cloned · #2 (**permalink**) 04.02.2014, 15:20

Dafür brauchst du PHP.
Hier ein kleiner Denkanstoß, zu diesem Thema findet man aber auch 1000e andere Beispiele, welche man seinen Bedürfnissen anpassen kann.
Btw. warum verwendest du keine <label> in deinem Formular?
Und wieso verwendest du zwar die linear-gradient Eigenschaften mit den Browserpräfixen, lässt aber die Standardversion, welche schon von den meisten Browsern unterstützt wird, unter den Tisch fallen?

Xelo · #3 (**permalink**) 05.02.2014, 13:17

Was meinst du mit Standartversionen?
Ich hab gelesen, dass jeder Browser seine eigene codierung braucht, um damit was anfangen zu können.

cloned · #4 (**permalink**) 05.02.2014, 13:33

Es gibt eine Standardversion für jede CSS Eigenschaft, ich nehme hier linear-gradient als Beispiel:
linear-gradient war vor (ich sag jetzt einfach mal) 3 Jahren noch kein offizieller Standard vom W3C Konsortium, jedoch haben die Browserhersteller diese Eigenschaften schon eingebaut. Um keine Probleme mit dem Standard zu bekommen haben sie die Eigenschaften mit einem Browser-Präfix versehen. So entstand -moz-linear-gradient und -o-linear-gradient, etc. wobei unterschiedliche Versionen auchunterschiedliche Syntax hatten. Nachdem das W3C die endgültige Syntax und Funktionsweise abgesegnet hatte, haben auch die Browserhersteller die "richtige" Syntax unterstützt.
Irgendwann werden sie die Präfix-Varianten wohl nicht mehr unterstützen, also immer die Präfixfreie Version einbauen, und zwar als letzte Anweisung, damit sie die vorherigen, bei Bedarf überschreiben kann.

explanator · #5 (**permalink**) 05.02.2014, 13:35

Zitat:

Zitat von Xelo

Ich hab gelesen, dass jeder Browser seine eigene codierung braucht, um damit was anfangen zu können.

Du musst immer auch schauen, wann etwas geschrieben wurde. Die Entwicklung bleibt nun mal nicht stehen.
siehe --> Can I use CSS Gradients

Xelo · #6 (**permalink**) 05.02.2014, 14:10

Das soll jetzt heissen ich kann mir die hälfte des css codes sparen?

cloned · #7 (**permalink**) 05.02.2014, 14:21

Nein, nicht zwingend. Es ist nicht verkehrt, alte Browser zu unterstützen. Du hast nur vergessen, auch den "richtigen" Code zu schreiben.
Btw. für gradients gibt es auch den gradient-generator, da wird dir der CSS Code automatisch generiert (auch für ältere IE-Versionen) und du schreibst nicht zu viel.

Xelo · #8 (**permalink**) 05.02.2014, 15:27

Also ich muss sagen, dass mein Code kürzer ist als der vom Generator.
Wo soll der spar effekt sein?

Ich hab mir dein Tip mit php angeschaut, aber ich versteh nicht wie das einbinden soll. Ich hab eine HTML seite die mit css gestaltet wurde.
Wie soll da ein php element einfügen? Da wird immer davon gesprochen eine php seite zu erstellen.

Sorry für die blöde Frage, aber ich blick da nicht durch. Ich hab mir ein paar tuts angeschaut, aber versteh nur bahnhof. echo,if und else anweisung hab ich verstanden, aber der rest nicht.
Jetzt hab ich nach einem fertigen gesucht und versucht es für mich anzupassen, aber wenn ich in dem Code was ändere zb. eine Auswahl wo anders einfügen, dann bleibt der Bildschirm weiß.

cloned · #9 (**permalink**) 05.02.2014, 15:55

Zitat:

Zitat von Xelo

Also ich muss sagen, dass mein Code kürzer ist als der vom Generator.
Wo soll der spar effekt sein?

Wo habe ich etwas von weniger Text geschrieben? Du musst lediglich selber weniger tippen, da du nur Strg + V drücken musst.
Der Text, den der Generator ausspuckt, ist ein vollständiger, auf möglichst viele Browser angepasster Code.

Zitat:

Zitat von Xelo

Ich hab mir dein Tip mit php angeschaut, aber ich versteh nicht wie das einbinden soll.

PHP ist eine Serversprache, du musst das also am Server ausführen lassen. Dafür brauchst du zuerst einen Server, auf dem auch PHP installiert ist.
HTML alleine kann keine Mails verschicken. Du kannst lediglich einen

Code:

<a href="mailto:meineMail@adress.com">Mail</a>

Link einfügen, welcher das Standard Mailprogramm des Benutzers öffnet.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS falsche Hover Fläche für Kontaktformular	Trigant	CSS	6	14.10.2013 18:06
Kontaktformular Eingabefelder linksbündig	ewaldo	CSS	4	22.05.2012 22:37
Kontaktformular Fehler ...	root-2k	(X)HTML	3	22.11.2010 20:05
PHP Kontaktformular und verschiedene Browser	HTMLLernender	(X)HTML	1	22.01.2010 11:08
Kontaktformular Hilfe nötig :)	sunny55	CSS	2	05.08.2008 19:29