Kontaktformular mit HTML ...aber irgendwo ist noch der Wurm drin.

Himmelhund · 23. Oktober 2011

<html>


<head>


<title>Kontaktformular</title>


<script type="text/javascript">

function chkFormular () {

  if (document.Formular.Name.value == "") {

    alert("Bitte Ihren Namen eingeben!");

    document.Formular.Name.focus();

    return false;

  }

  if (document.Formular.Nachname.value == "") {

    alert("Bitte Ihren Nachnamen eingeben!");

    document.Formular.Nachname.focus();

    return false;

  }

  if (document.Formular.Straße.value == "") {

    alert("Bitte Ihre Straße eingeben!");

    document.Formular.Straße.focus();

    return false;

  }

  if (document.Formular.Postleizahl.value == "") {

    alert("Bitte Ihre Postleitzahl eingebn!");

    document.Formular.Postleitzahl.focus();

    return false;

  }

  if (document.Formular.Ort.value == "") {

    alert("Bitte Ihren Wohnort eingeben!");

    document.Formular.Ort.focus();

    return false;

  }

  if (document.Formular.Telefonnummer.value == "") {

    alert("Bitte Ihre Telefonnummer eingeben!");

    document.Formular.Telefonnummer.focus();

    return false;

  }

  var chkZ = 1;

  for (i = 0; i < document.Formular.Telefonnummer.value.length; ++i)

    if (document.Formular.Telefonnummer.value.charAt(i) < "0" ||

        document.Formular.Telefonnummer.value.charAt(i) > "9")

      chkZ = -1;

  if (chkZ == -1) {

    alert("Telefonnummer ist keine Zahl!");

    document.Formular.Telefonnummer.focus();

    return false;

  }

  if (document.Formular.Email.value.indexOf("@") == -1) {

    alert("Keine gültige E-Mail-Adresse!");

    document.Formular.Email.focus();

    return false;

  }

  if (document.Formular.Nachricht.value == "") {

    alert("Bitte persönliche Nachricht eingeben!");

    document.Formular.Nachricht.focus();

    return false;

  }

}

</script>


</head>


<body>


<table width="50%" border="1" cellpadding="0" cellspacing="2">

<form action="mailto:MEINE@EMAIL.de" method="post" name="Formular" enctype="text/plain">

<p><input type="submit" value="Abschicken"><input type="reset" value="Eingaben löschen">

 <tr>

  <td>Anrede:</td>

  <td><select name="Anrede"><option value="Frau">Frau</option><option value="Herr">Herr</option></selcet></td>

 </tr>

 <tr>

  <td>Name:</td>

  <td><input type="text" name="Name" size=15><br></td>

 </tr>

 <tr>

  <td>Nachname:</td>

  <td><input type="text" name="Nachname" size=15><br></td>

 </tr>

 <tr>

  <td>Straße:</td>

  <td><input type="text" name="Straße" size=15><br></td>

 </tr>

 <tr>

  <td>Postleitzahl:</td>

  <td><input type="text" name="Postleitzahl" size=15> Ort: <input type="text" name="Ort" size=15><br></td>

 </tr>

  <tr>

  <td>Telefonnummer:</td>

  <td><input type="text" name="Telefonnummer" size=15><br></td>

 </tr>

  <tr>

  <td>Email Adresse:</td>

  <td><input type="text" name="Email" size=15><br></td>

 </tr>

  <tr>

  <td>Nachricht:</td>

  <td><textarea name="Nachricht" rows="10" cols="50"></textarea><br></td>

 </tr>


</table>


Bitte füllen Sie alle Felder korrekt aus. Lückenhaft ausgefüllte

Anfragen werden nicht bearbeitet.


</body>


</html>

Hallo mal wieder

Ich brauche für meine HP ein Kontakt-Formular, meine Programmierkenntnisse sind eher schlecht als recht, was ich zustande gebracht habe, sieht man oben.

Getestet habe ich das Formular mit dem IE 8 und dem Firefox 3.6.2

Auf dem Rechner läuft ein Outlook 2007.

Zum IE 8: Ich kann alle Eingaben machen, man kann alles mit dem Löschen-Button verwerfen - funktioniert. Klickt man auf den Absenden-Button, findet keine Überprüfung der Eingaben statt - aber die Mail wird dann verschickt - im Testfall über Outlook 2007.

Zum Firefox: Selbe Problem wie beim IE 8 - jedoch macht der Firefox auch Mist bei den Umlauten Ä, Ö und Ü sowie Sonderzeichen. Sie werden nicht korrekt in der gesendeten Mail dargestellt. (bzw auch in der zu versendenden Mail werden die Zeichen nicht korrekt dargestellt)

Kann mir wer bei dem Problem helfen? Einmal bei der Abfrage, dass alles ausgefüllt ist und einmal wegen der Umlaute. Wäre da sehr dankbar - und ggfs auch für Erklärungen, wie etwas besser funktioniert, ggfs mit Beispielen, damit ich es nachvollziehen kann.

Mit feundlichen Grüßen

Himmelhund

Bearbeitet 23. Oktober 2011 von Himmelhund

Sacaldur · 24. Oktober 2011

anscheinend hast du dir ein wenig inspiration bei SelfHTML besorgt ^^

wenn du den Code dort mit deinem vergleichst, dann dürfte dir auffallen, dass deinem form-Element das Attribut onsubmit fehlt

onsubmit="return chkFormular()">

damit dürfte die Prüfung (denke ich mal) funktionieren

ich denke das Problem bei der Kodierung hat die Ursache darin, dass der IE die Zeichenkodierung deines Systems verwendet, während FF wohl UTF-8 oder einen anderen Unicode verwendet

auf die schnelle wüsste ich zwar nicht, wie man diesen Fehler beheben könnte, allerdings dürfte das ein Ansatz für weitere Recherchen sein

du müsstest für die Mail wohl festlegen, wie der Inhalt kodiert sein soll

vielleicht erreichst du das indirekt, indem du für die HTML-Seite die Zeichenkodierung bestimmst

Bearbeitet 24. Oktober 2011 von Sacaldur

Himmelhund · 24. Oktober 2011

Edit: Fehler eben selber gefunden

Bearbeitet 24. Oktober 2011 von Himmelhund

Himmelhund · 24. Oktober 2011

So...Fehler behoben, alle Felder werden nun abgefragt...war nur ein kleiner Schreibfehler - und eine große Wirkung.

Hier der neue, funktionierende Code:


<html>


<head>


<title>Kontaktformular</title>


<script type="text/javascript">

function chkFormular () {

  if (document.Formular.Name.value == "") {

    alert("Bitte Ihren Namen eingeben!");

    document.Formular.Name.focus();

    return false;

  }

  if (document.Formular.Nachname.value == "") {

    alert("Bitte Ihren Nachnamen eingeben!");

    document.Formular.Nachname.focus();

    return false;

  }

  if (document.Formular.Straße.value == "") {

    alert("Bitte Ihre Straße eingeben!");

    document.Formular.Straße.focus();

    return false;

  }

  if (document.Formular.Postleitzahl.value == "") {

    alert("Bitte Ihre Postleitzahl eingebn!");

    document.Formular.Postleitzahl.focus();

    return false;

  }

  if (document.Formular.Ort.value == "") {

    alert("Bitte Ihren Wohnort eingeben!");

    document.Formular.Ort.focus();

    return false;

  }

  if (document.Formular.Telefonnummer.value == "") {

    alert("Bitte Ihre Telefonnummer eingeben!");

    document.Formular.Telefonnummer.focus();

    return false;

  }

  var chkZ = 1;

  for (i = 0; i < document.Formular.Telefonnummer.value.length; ++i)

    if (document.Formular.Telefonnummer.value.charAt(i) < "0" ||

        document.Formular.Telefonnummer.value.charAt(i) > "9")

      chkZ = -1;

  if (chkZ == -1) {

    alert("Telefonnummer ist keine Zahl!");

    document.Formular.Telefonnummer.focus();

    return false;

  }

  if (document.Formular.Email.value.indexOf("@") == -1) {

    alert("Keine gültige E-Mail-Adresse!");

    document.Formular.Email.focus();

    return false;

  }

  if (document.Formular.Nachricht.value == "") {

    alert("Bitte persönliche Nachricht eingeben!");

    document.Formular.Nachricht.focus();

    return false;

  }

}

</script>


</head>


<body>


<table width="50%" border="1" cellpadding="0" cellspacing="2">

<form action="mailto:MEINE@MAIL.de" onsubmit="return chkFormular()" method="post" name="Formular" enctype="text/plain">

<p><input type="submit" value="Abschicken"><input type="reset" value="Eingaben löschen">

 <tr>

  <td>Anrede:</td>

  <td><select name="Anrede"><option value="Frau">Frau</option><option value="Herr">Herr</option></selcet></td>

 </tr>

 <tr>

  <td>Name:</td>

  <td><input type="text" name="Name" size=15><br></td>

 </tr>

 <tr>

  <td>Nachname:</td>

  <td><input type="text" name="Nachname" size=15><br></td>

 </tr>

 <tr>

  <td>Straße:</td>

  <td><input type="text" name="Straße" size=15><br></td>

 </tr>

 <tr>

  <td>Postleitzahl:</td>

  <td><input type="text" name="Postleitzahl" size=15><br></td>

 </tr>

 <tr>

  <td>Ort:</td>

  <td><input type="text" name="Ort" size=15><br></td>

 </tr> 

 <tr>

  <td>Telefonnummer:</td>

  <td><input type="text" name="Telefonnummer" size=15><br></td>

 </tr>

  <tr>

  <td>Email Adresse:</td>

  <td><input type="text" name="Email" size=15><br></td>

 </tr>

  <tr>

  <td>Nachricht:</td>

  <td><textarea name="Nachricht" rows="10" cols="50"></textarea><br></td>

 </tr>


</table>


Bitte füllen Sie alle Felder korrekt aus. Lückenhaft ausgefüllte

Anfragen werden nicht bearbeitet.


</body>


</html>

Bezüglich der Text-Codierung bin ich aber noch nicht weiter..also Ä,Ö und Ü und diverse Sonderzeichen bereiten noch Probleme.

@Scaladur: Danke für die Hilfe, hab an das onsubmit nicht gedacht :/ ...und hab das ohne SelfHtml gemacht, weil ich da nicht das gefunden hatte, was ich auf die schnelle brauchte *g*

EDIT - WICHTIG: Hab soeben das Formular mal mit WINDOWS LIVE MAIL versendet...zu meinem Entsetzen werden die Eingaben aus dem Formular NICHT übernommen =( Hat dazu wer eine Idee?

Bearbeitet 24. Oktober 2011 von Himmelhund

Sacaldur · 24. Oktober 2011

ich gehe davon aus, dass die Eingabefelder wie bei normalen http:// referenzen auch einfach an die (mailto-)URL angehangen werden

sprich: an das ende der URL wird ein Fragezeichen angehangen, gefolgt vom 1. Eingabefeld-Namen, Gleichheitszeichen, Wert, gefolgt von einem kaufmännischem Und (&) vom nächsten Eingabefeld-Namen, Gleichheitszeichen, Wert usw. bis alle Eingaben in den Eingabefeldern angehangen wurden

damit Betreff, Text usw. richtig verwendet werden können, musst du offenbar die richtigen Namen für die Eingabefelder verwenden, die auf SelfHTML nachzulesen sind

das sind u.a. "subject" für den Betreff oder "body" für den Nachrichtentext

da deine Eingabefelder sich aber nicht ohne weiteres in die URL integrieren lassen (da es kein eindeutiges Feld für den Betreff und kein eindeutiges Feld für den Inhalt gibt), musst du dir versteckte Eingabefelder anlegen, in die dann der zu verschickende Text eingetraten wird

dies geschieht über JavaScript und sollte am Ende der Überprüfungsfunktion implementiert werden

dort muss lediglich der Text der entsprechenden verstecken Eingabefelds gesetzt werden

zur Zeichenkodierung

wie schon geschrieben: probiere es, den verwendeten Zeichencode zu definieren

Himmelhund · 24. Oktober 2011

Ich bin irgendwie zu doof dafür o.o

Das mit den versteckten Eingabe-Feldern sind irgendwie böhmische Dörfer für mich, ich verstehe zwar den Sinn, der dahinter steht, aber anhand des Beispieles kann ich es nicht in die Tat umsetzen.

Ich probiere gerad, den Zeichencode zu definieren, aber auch dort sind leider keine Fortschritte zu verzeichnen ...Firefox mag weiterhin keine Sonderzeichen.

Apropos Firefox, das überträgt die Eingaben des Kontaktformulares ins Windows Live Mail...sieht nur bescheiden aus, wegen dem ß bei Straße und wenn man Umlaute nutzt..aber da tüftel ich nun dran

Himmelhund · 24. Oktober 2011

Ich habe nun die Codierung spezifiziert:

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

Aber dem FireFox scheint es egal zu sein =(

Für weitere Tipps/Tricks und Hilfen wäre ich dankbar =)

Anmelden

Kontaktformular mit HTML ...aber irgendwo ist noch der Wurm drin.

Empfohlene Beiträge

Himmelhund

Link zu diesem Kommentar

Auf anderen Seiten teilen

Sacaldur

Link zu diesem Kommentar

Auf anderen Seiten teilen

Himmelhund

Link zu diesem Kommentar

Auf anderen Seiten teilen

Himmelhund

Link zu diesem Kommentar

Auf anderen Seiten teilen

Sacaldur

Link zu diesem Kommentar

Auf anderen Seiten teilen

Himmelhund

Link zu diesem Kommentar

Auf anderen Seiten teilen

Himmelhund

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

Umsehen

Aktivitäten

Stellenanzeigen

Blog

Über Fachinformatiker.de