Javascript Kontaktformular!

nfinity · 05.01.2011

Hey Leute,

Ich brauche mal eure Hilfe.. wo genau muss ich jetzt meine email Adresse eintragen, damit man mich auch über das Kontaktformular meines Templates erreichen kann?

Das ist die contact.js

HTML:

jQuery(function() {
  jQuery('.error').hide();
  jQuery(".button").click(function() {
                // validate and process form
                // first hide any error messages
    jQuery('.error').hide();

          var name = jQuery("input#name").val();
                if (name == "") {
      jQuery("span#name_error").show();
      jQuery("input#name").focus();
      return false;
    }
          var email = jQuery("input#email").val();
          if (email == "") {
      jQuery("span#email_error").show();
      jQuery("input#email").focus();
      return false;
    }

        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        if(!emailReg.test(email)) {
        jQuery("span#email_error2").show();
    jQuery("input#email").focus();
      return false;
        }

          var msg = jQuery("textarea#msg").val();
          if (msg == "") {
          jQuery("span#msg_error").show();
          jQuery("textarea#msg").focus();
          return false;
    }

                var dataString = 'name='+ name + '&email=' + email + '&msg=' + msg;
                //alert (dataString);return false;

          jQuery.ajax({
      type: "POST",
      url: "process.php",
      data: dataString,
      success: function() {
        jQuery('#contact_form').html("<div id='message'></div>");
        jQuery('#message').html("<strong>Contact Form Submitted!</strong>")
        .append("<p>We will be in touch soon.</p>")
        .hide()
        .fadeIn(1500, function() {
          jQuery('#message');
        });
      }
     });
    return false;
        });
});

Hoffe ihr könnt mir helfen

Ich danke im voraus.

nfinity

stroyer · 05.01.2011

AW: Javascript Kontaktformular!

Das Script ist nur zum Validieren der eigegenenen Daten, die dann an den Server geschickt werden (Angaben im form-Tag).
Mail verschicken musst Du dann über PHP oder cgi.
Falls Du kein PHP verwenden kannst, gibt es Anbieter, die Formulardaten per Mail verschicken (zB kostenlos, solange nicht kommerziell).
Ansonsten wird es auf die PHP-Funktion mail hinauslaufen (http://php.net/manual/de/function.mail.php), es gibt auch vorgefertigte Lösungen.

saila · 05.01.2011

AW: Javascript Kontaktformular!

Hi,

weis nicht ob das so geschickt ist, wie du es vor hast. Allerdings gibt es bei jQuery ein Plugin form oder formValidate. Dieses hat auch eine Doku, wie man was wo wie einzu-binden/-bauen hat.

Das ganze validiert (also prüft) ob die entsprechenden Felder ausgefüllt sind. Wenn nicht erscheint eine Meldung im Browserfenster oder an/nach dem input-tag.

Wichtig zu wissen für dich ist allerdings, ist JS im Browser nicht aktiv, sollte entweder das Kontaktformular nicht erscheinen oder auf üblichem Wege geprüft werden - also ohne JS.
Die normale Vorgehensweise ist eigentl. jene, dass man ein K-Formular fertigstellt inkl. Prüfung und Fehlermeldung per php/cgi/.net/was auch immer und danach erst mit der JS-Erweiterung das K-Formular pimpt oder WEB2.0 fähig macht.

nfinity · 05.01.2011

AW: Javascript Kontaktformular!

Okay...und was heißt das jetzt genau? Entschuldige das ich so doof frage aber ich kenne mich leider nicht so wirklich aus.

Was wäre jetzt der nächste Schritt den ich machen muss?

Und ich muss wirklich nichts in die contact.js schreiben?

Lg nifnity

EDIT: Danke saila für deine Antwort.

stroyer · 05.01.2011

AW: Javascript Kontaktformular!

Im Script heißt es url: "process.php", daher werden die Daten an die process.php weitergeben und zwar 'name='+ name + '&email=' + email + '&msg=' + msg;
dh. Name, Email und Msg

im Minimalfall schaut process.php wie folgt aus:

PHP:

<?php
$name=$_POST['name'];
$email=$_POST['email'];
$msg=$_POST['msg'];
mail('deine@email.adresse',"Neue Nachricht von $email","$name ($email) schreibt:\r\n\r\n$msg","Mime-Version: 1.0 Content-Type: text/plain; charset=ISO-8859-1 Content-Transfer-Encoding: quoted-printable");
?>

nfinity · 05.01.2011

AW: Javascript Kontaktformular!

Ich habe mal die contact.html hochgeladen.

Jetzt muss ich die process.php mit dem von dir angegebenen Code selber machen oder wie soll ich das verstehen?

stroyer · 05.01.2011

AW: Javascript Kontaktformular!

genau, das sollte reichen.
Versuche
<form id="contact" action="">
auf
<form id="contact" action="process.php" method="post">
zu ändern und hinter
<button class="button"><span class="double-arrow">Submit</span></button>
noch
<input type="submit" value="Submit" class="tohide">
einzufügen.
in die contact.js füge vor
jQuery('.error').hide();
noch
jQuery('.tohide').hide();
ein, dann sollte es auch ohne Javascript gehen, dann halt ohne Validierung der eingegebenen Daten, wobei aber so gut wie alle User heutzutage Javascript verwenden.

nfinity · 05.01.2011

AW: Javascript Kontaktformular!

Hab ich gemacht aber es geht leider immer noch nicht...

HTML:

<?php
$name=$_POST['name'];
$email=$_POST['email'];
$msg=$_POST['msg'];
mail('meine@mail.de',"Neue Nachricht von $email","$name ($email) schreibt:\r\n\r\n$msg","Mime-Version: 1.0 Content-Type: text/plain; charset=ISO-8859-1 Content-Transfer-Encoding: quoted-printable");
?>

Bei meine@mail.de hab ich meine Email Adresse in der process.php eingegeben.

Die Contact.html habe ich genauso geändert wie du es sagtest.

Und der Anfang von der contact.js sieht jetzt so aus:

HTML:

jQuery(function() {
jQuery('.tohide').hide();  jQuery('.error').hide();
  jQuery(".button").click(function() {
                // validate and process form
                // first hide any error messages
    jQuery('.error').hide();

Lg

stroyer · 05.01.2011

AW: Javascript Kontaktformular!

Sind die zwei Dateien online (habe sie nicht gefunden) oder auf einem lokalen Server oder einfach nur die html-Datei im Browser offen?

nfinity · 05.01.2011

AW: Javascript Kontaktformular!

Ja ich habe es jetzt nochmal hochgeladen.

stroyer · 05.01.2011

AW: Javascript Kontaktformular!

process.php ist aber immer noch nicht online.

PHP:

<?php
if(!(isset($_POST['name'])&&isset($_POST['email'])&&isset($_POST['msg'])))die();
$name=$_POST['name'];
$email=$_POST['email'];
$msg=$_POST['msg'];
mail('deine@email.adresse',"Neue Nachricht von $email","$name ($email) schreibt:\r\n\r\n$msg","Mime-Version: 1.0 Content-Type: text/plain; charset=ISO-8859-1 Content-Transfer-Encoding: quoted-printable");
?>

ist besser.

nfinity · 05.01.2011

AW: Javascript Kontaktformular!

Jetzt klappt es

Vielen Dank stroyer, auch das du so geduldig geblieben bist^^

lg nfinity

nfinity · 18.01.2011

AW: Javascript Kontaktformular!

Hey Leute,

Ich habe nochmal ein Problem und wollte keinen neuen Thread eröffnen.

Ich hätte gerne noch eine "Betreff" Zeile in meinem Kontaktformular und weis nicht so recht wie ich dies anstellen soll. Ich habe schon einiges probiert, doch jetzt kommt wieder keine Mail mehr an.

Hier das "original" wo es noch alles geht:

Und das ist mein Versuch:

Ich habe die Process.php so umgeändert.

HTML:

<?php
if(!(isset($_POST['name'])&&isset($_POST['subject'])&&isset($_POST['email'])&&isset($_POST['msg'])))die();
$name=$_POST['name'];
$subject=$_POST['subject'];
$email=$_POST['email'];
$msg=$_POST['msg'];
mail('meine@mail.de',"Neue Nachricht von $email","$name ($email)($subject) schreibt:\r\n\r\n$msg","Mime-Version: 1.0 Content-Type: text/plain; charset=ISO-8859-1 Content-Transfer-Encoding: quoted-printable");
?>

Ich hoffe ihr könnt mir helfen.

stroyer · 18.01.2011

AW: Javascript Kontaktformular!

Code:

<label for="subject" id="subject_label">betreff</label> <input type="text" name="name" id="subject" size="50" value="" class="text-input" /> <span class="error" id="name_error">Please enter name !</span> <br style="clear:both" />

name musst du auch noch ändern!

Das Javascript musst du auch ergänzen, im Minimalfall um
var subject=jQuery("textarea#subject").val();
und
var dataString = 'name='+ name + '&email=' + email + '&msg=' + msg + '&subject=' + subject;

nfinity · 20.01.2011

AW: Javascript Kontaktformular!

Dankeschön