Anzeige

Javascript Kontaktformular!

Javascript Kontaktformular! | PSD-Tutorials.de

Erstellt von nfinity, 05.01.2011.

  1. nfinity

    nfinity Noch nicht viel geschrieben

    Dabei seit:
    18.08.2010
    Beiträge:
    19
    Geschlecht:
    männlich
    Ort:
    Hamburg
    Software:
    PS CS4, DW CS4
    Javascript Kontaktformular!
    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:
    1. jQuery(function() {
    2.   jQuery('.error').hide();
    3.   jQuery(".button").click(function() {
    4.                 // validate and process form
    5.                 // first hide any error messages
    6.     jQuery('.error').hide();
    7.  
    8.           var name = jQuery("input#name").val();
    9.                 if (name == "") {
    10.       jQuery("span#name_error").show();
    11.       jQuery("input#name").focus();
    12.       return false;
    13.     }
    14.           var email = jQuery("input#email").val();
    15.           if (email == "") {
    16.       jQuery("span#email_error").show();
    17.       jQuery("input#email").focus();
    18.       return false;
    19.     }
    20.  
    21.         var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    22.         if(!emailReg.test(email)) {
    23.         jQuery("span#email_error2").show();
    24.     jQuery("input#email").focus();
    25.       return false;
    26.         }
    27.  
    28.           var msg = jQuery("textarea#msg").val();
    29.           if (msg == "") {
    30.           jQuery("span#msg_error").show();
    31.           jQuery("textarea#msg").focus();
    32.           return false;
    33.     }
    34.  
    35.                 var dataString = 'name='+ name + '&email=' + email + '&msg=' + msg;
    36.                 //alert (dataString);return false;
    37.  
    38.           jQuery.ajax({
    39.       type: "POST",
    40.       url: "process.php",
    41.       data: dataString,
    42.       success: function() {
    43.         jQuery('#contact_form').html("<div id='message'></div>");
    44.         jQuery('#message').html("<strong>Contact Form Submitted!</strong>")
    45.         .append("<p>We will be in touch soon.</p>")
    46.         .hide()
    47.         .fadeIn(1500, function() {
    48.           jQuery('#message');
    49.         });
    50.       }
    51.      });
    52.     return false;
    53.         });
    54. });
    55.  
    56.  
    Hoffe ihr könnt mir helfen :) Ich danke im voraus.

    nfinity
     
    #1      
  2. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    Javascript Kontaktformular!
    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 http://www.formmailer.com/ 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.
     
    Zuletzt bearbeitet: 05.01.2011
    #2      
  3. saila

    saila Moderatorle

    Dabei seit:
    21.06.2006
    Beiträge:
    2.239
    Geschlecht:
    männlich
    Ort:
    50°48'23.69" N 7°14'22.19" O
    Software:
    Eclipse, PHP5 OO, MySQL5, CSS(auch Barrierefrei), JS, Symfony
    Javascript Kontaktformular!
    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.
     
    #3      
  4. nfinity

    nfinity Noch nicht viel geschrieben

    Dabei seit:
    18.08.2010
    Beiträge:
    19
    Geschlecht:
    männlich
    Ort:
    Hamburg
    Software:
    PS CS4, DW CS4
    Javascript Kontaktformular!
    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.
     
    #4      
  5. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    Javascript Kontaktformular!
    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:
    1.  
    2. <?php
    3. $name=$_POST['name'];
    4. $email=$_POST['email'];
    5. $msg=$_POST['msg'];
    6. 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");
    7. ?>
    8.  
     
    #5      
  6. nfinity

    nfinity Noch nicht viel geschrieben

    Dabei seit:
    18.08.2010
    Beiträge:
    19
    Geschlecht:
    männlich
    Ort:
    Hamburg
    Software:
    PS CS4, DW CS4
    Javascript Kontaktformular!
    AW: Javascript Kontaktformular!

    Ich habe mal die contact.html hochgeladen.

    test

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

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    Javascript Kontaktformular!
    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.
     
    #7      
  8. nfinity

    nfinity Noch nicht viel geschrieben

    Dabei seit:
    18.08.2010
    Beiträge:
    19
    Geschlecht:
    männlich
    Ort:
    Hamburg
    Software:
    PS CS4, DW CS4
    Javascript Kontaktformular!
    AW: Javascript Kontaktformular!

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

    HTML:
    1. <?php
    2. $name=$_POST['name'];
    3. $email=$_POST['email'];
    4. $msg=$_POST['msg'];
    5. 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");
    6. ?>
    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:
    1. jQuery(function() {
    2. jQuery('.tohide').hide();  jQuery('.error').hide();
    3.   jQuery(".button").click(function() {
    4.                 // validate and process form
    5.                 // first hide any error messages
    6.     jQuery('.error').hide();

    Lg
     
    #8      
  9. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    Javascript Kontaktformular!
    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?
     
    #9      
  10. nfinity

    nfinity Noch nicht viel geschrieben

    Dabei seit:
    18.08.2010
    Beiträge:
    19
    Geschlecht:
    männlich
    Ort:
    Hamburg
    Software:
    PS CS4, DW CS4
    Javascript Kontaktformular!
    AW: Javascript Kontaktformular!

    Ja ich habe es jetzt nochmal hochgeladen.
     
    #10      
  11. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    Javascript Kontaktformular!
    AW: Javascript Kontaktformular!

    process.php ist aber immer noch nicht online.

    PHP:
    1.  
    2. <?php
    3. if(!(isset($_POST['name'])&&isset($_POST['email'])&&isset($_POST['msg'])))die();
    4. $name=$_POST['name'];
    5. $email=$_POST['email'];
    6. $msg=$_POST['msg'];
    7. 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");
    8. ?>  
    9.  
    ist besser.
     
    #11      
  12. nfinity

    nfinity Noch nicht viel geschrieben

    Dabei seit:
    18.08.2010
    Beiträge:
    19
    Geschlecht:
    männlich
    Ort:
    Hamburg
    Software:
    PS CS4, DW CS4
    Javascript Kontaktformular!
    AW: Javascript Kontaktformular!

    Jetzt klappt es :) Vielen Dank stroyer, auch das du so geduldig geblieben bist^^

    lg nfinity
     
    #12      
  13. nfinity

    nfinity Noch nicht viel geschrieben

    Dabei seit:
    18.08.2010
    Beiträge:
    19
    Geschlecht:
    männlich
    Ort:
    Hamburg
    Software:
    PS CS4, DW CS4
    Javascript Kontaktformular!
    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: test

    Und das ist mein Versuch: test

    Ich habe die Process.php so umgeändert.

    HTML:
    1. <?php
    2. if(!(isset($_POST['name'])&&isset($_POST['subject'])&&isset($_POST['email'])&&isset($_POST['msg'])))die();
    3. $name=$_POST['name'];
    4. $subject=$_POST['subject'];
    5. $email=$_POST['email'];
    6. $msg=$_POST['msg'];
    7. 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");
    8. ?>
    Ich hoffe ihr könnt mir helfen.
     
    #13      
  14. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    Javascript Kontaktformular!
    AW: Javascript Kontaktformular!

    Code (Text):
    1.  
    2. <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;
     
    #14      
  15. nfinity

    nfinity Noch nicht viel geschrieben

    Dabei seit:
    18.08.2010
    Beiträge:
    19
    Geschlecht:
    männlich
    Ort:
    Hamburg
    Software:
    PS CS4, DW CS4
    Javascript Kontaktformular!
    AW: Javascript Kontaktformular!

    Dankeschön :)
     
    #15      
x
×
×