Kontaktformular: nach "senden" auf der selben Seite bleiben

  • Hallo zusammen,


    ich hab mal wieder eine Frage.


    Ich habe eine .php Datei mit Hilfe von einem Tutorial erstellt. Als echo ist dort entweder "Vielen Dank für Ihre Anfrage" oder "Bitte füllen Sie alle Felder aus!" angegeben.

    Sobald das Formular abgeschickt ist, öffnet sich eine neue Seite auf der dann "Vielen Dank für Ihre Anfrage" oder "Bitte füllen Sie alle Felder aus!" steht.


    PHP Datei:


    <!doctype html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>Kontaktformular</title>

    </head>

    <body>

    <?php

    if($_POST['von'] !="" and $_POST['mail'] != "" and $_POST['nachricht'] !="") {

    $empf = "info@blickpunkt-grafikdesign.de";

    $betreff ="Kontaktanfrage";

    $from = "From: ";

    $from .= $_POST['von'];

    $from .= " <";

    $from .= $_POST['mail'];

    $from .= ">\n";

    $from .= "E-Mail: ";

    $from .= $_POST['mail'];

    $from .= "\n";

    $text = $_POST['nachricht'];

    mail($empf, $betreff, $text, $from);

    echo "Vielen Dank für Ihre Anfrage";

    } else {

    echo "Bitte füllen Sie alle Felder aus!";

    }

    ?>

    </body>

    </html>



    HTML Datei:


    <section class="contact" id="contact">

    <h3>KONTAKT</h3>

    <form method="post" action="kontaktformular.php">

    <input type="text" name="von" placeholder="Name" class="name"/><br />

    <br />

    <input type="text" name="mail" placeholder="E-Mail" class="mail"/><br />

    <br />

    <textarea name="nachricht" placeholder="Nachricht"></textarea>

    <br />

    <button type="submit" id="button"></button>


    Ich möchte allerdings, dass diese zwei Sätze direkt auf meiner Hauptseite am liebsten über dem Kontaktformular stehen da ich eine One-Page erstellen möchte.


    Wie muss ich das anstellen. Im Internet komme ich leider nicht weiter.


    Hier der Link zu meiner Webseite: http://www.blickpunkt-grafikdesign.de


    Vielen Dank schonmal für eure Hilfe!


    Liebe Grüße

    Timo von Bank

  • Das ist überhaupt kein Problem. Mit dem jQuery-Plugin Ajaxform kannst Du mit wenigen Zeilen Javascript das Formular über Ajax abschicken und die Antwort auf der ursprüngliche Seite sichtbar machen:

    http://malsup.com/jquery/form/

    Würde dann so aussehen:

  • Hey,


    bitte poste dein code in die code tags (in der navbar des editors rechts neben der sprechblase.


    Bei form brauchst du normal kein action mehr. Und ein Plugin dafür empfinde ich als unnötig. Lass einfach das action="seite" weg und dann bleibst du auf der seite. Dann musst du den teil von deiner 2ten seite welche die Inputdaten weiterverarbeitet auf die 1ste seite, welche das Formular beinhaltet, tun.


    Desweiteren würde ich dir enorm empfehlen für ein Mailversand einen schon vorhandenen Mailer zu verwenden. Empfehlen kann ich den PHP Mailer.


    Ich würde es so machen:

  • Das ist überhaupt kein Problem. Mit dem jQuery-Plugin Ajaxform kannst Du mit wenigen Zeilen Javascript das Formular über Ajax abschicken und die Antwort auf der ursprüngliche Seite sichtbar machen:

    http://malsup.com/jquery/form/

    Würde dann so aussehen:

    Damit bin ich super klar gekommen. Vielen Dank.


    Der Beitrag von Stef hat mich doch etwas überfordert :D


    Jetzt bleiben allerdings die Felder nach dem absenden ausgefüllt. Kann man das auch noch so einfach ändern, dass die Felder wieder leer sind?

    Wenn nicht lasse ich es so ;)

  • Zitat

    Kann man das auch noch so einfach ändern, dass die Felder wieder leer sind?

    Auch das ist kein Problem mit der Funktion reset():

    Code
    1. <script>
    2. // wait for the DOM to be loaded
    3. $(document).ready(function() {
    4. // bind 'myForm' and provide a simple callback function
    5. $('#myForm').ajaxForm(function(output) {
    6. $("#response").html(output);
    7. $("form")[0].reset();
    8. });
    9. });
    10. </script>
  • Auch das ist kein Problem mit der Funktion reset():

    Code
    1. <script>
    2. // wait for the DOM to be loaded
    3. $(document).ready(function() {
    4. // bind 'myForm' and provide a simple callback function
    5. $('#myForm').ajaxForm(function(output) {
    6. $("#response").html(output);
    7. $("form")[0].reset();
    8. });
    9. });
    10. </script>

    Wow,


    vielen lieben Dank.


    Jetzt habe ich noch ein letzte Frage, dann reicht es für heute 8)


    ich habe einen senden button eingefügt, welcher solange rotiert bis die Nachricht verschickt wurde.

    Anschließend sollte er eigentlich einen Haken anzeigen. Nur leider rotiert er und rotiert und die Anfrage ist schon lange verschickt.


    Was habe ich falsch gemacht?


  • Wenn ich dich richtig verstehe:

    • soll der Button zu rotieren beginnen, wenn man ihn drückt durch Hinzufügen der Klasse "onclic"
    • soll der Button einen Haken anzeigen durch Austausch dieser Klasse gegen "validate" wenn die Antwort vom Server kommt
    • soll der Haken nach Ablauf einer Verzögerungszeit wieder verschwinden durch Löschen der Klasser "validate"


    Zwei Einwände:

    • Von mehr als einem Parameter bei der Funktion addClass() ist mir nichts bekannt: https://api.jquery.com/addclass/
    • Ich erwarte, dass bei diesem kurzen Skript die Antwort vom Server sehr schnell kommen wird, so dass der rotierende Button nur ganz kurz aufblitzen wird

    Oder möchtest Du alles zeitgesteuert machen, d. h. beim Drücken beginnt er zu rotieren, nach Ablauf einer Zeit zeigt er den Haken, nach Ablauf einer weiteren Zeit verschwindet der Haken wieder?

  • Wenn ich dich richtig verstehe:

    • soll der Button zu rotieren beginnen, wenn man ihn drückt durch Hinzufügen der Klasse "onclic"
    • soll der Button einen Haken anzeigen durch Austausch dieser Klasse gegen "validate" wenn die Antwort vom Server kommt
    • soll der Haken nach Ablauf einer Verzögerungszeit wieder verschwinden durch Löschen der Klasser "validate"


    Zwei Einwände:

    • Von mehr als einem Parameter bei der Funktion addClass() ist mir nichts bekannt: https://api.jquery.com/addclass/
    • Ich erwarte, dass bei diesem kurzen Skript die Antwort vom Server sehr schnell kommen wird, so dass der rotierende Button nur ganz kurz aufblitzen wird

    Oder möchtest Du alles zeitgesteuert machen, d. h. beim Drücken beginnt er zu rotieren, nach Ablauf einer Zeit zeigt er den Haken, nach Ablauf einer weiteren Zeit verschwindet der Haken wieder?

    ich hatte den code von codepen.io dort waren zwei Parameter bei der Funktion addClass() angegeben.


    Ich hätte es gerne zeitgesteuert so wie du sagst, anders macht es wahrscheinlich kein Sinn und der Effekt kommt nicht rüber.

  • Ich möchte mit meinem Post ausdrücken, dass das Action Attribut unter normalen Umständen weggelassen werden kann. Dann kannst du die Prüfung der eingegebenen Daten, z.b mit der Funktion filter_input(), durchführen und dann mit diesen Daten weiterarbeiten. Dann kannst du auch gleich Fehlerbehandlung hinzufügen welche prüft ob das Feld leer ist und wenn ja dann fügst du dem Array Fehler eine Fehlermeldung hinzu. Wenn nun 3 Fehler da sind. Hat der Array zusammengerechnet 3 Keys. Diese rechnest du dann mit der Funktion count() zusammen und dann kannst du überprüfen ob ein Fehler besteht und ob count Fehler größer als 0 ist. Wenn dies der Fall ist, liegt ja ein Fehler vor aufgrund fehlender Eingabe. Dann gibts du die Fehlermeldungen aus. Z.b mit der Funktion implode() oder der Schleife foreach(). Und dann prüfst du im Else ob die Ausgabe , welche angezeigt wird wenn kein Fehler da ist, vorhanden ist und das Count error gleich 0 ist. Somit ist kein Fehler vorhanden.


    Du kannst mit einer vorhandene Mailerklasse wie PHP Mailer sehr einfach ein Mailversand einrichten.


    Desweiteren würde ich die Daten in entsprechend benannte Variablen packen.

  • .addClass( className [, duration ] [, easing ] [, complete ] )



    Also musst du für das easing einen leerwert übergeben.

    $( "#button" ).addClass( "onclic", 250,, validate);


    EDIT: scheint aber auch mit drei parametern zu funktionieren...

  • Zitat

    Du meinst die URL von meiner Website, oder?


    http://www.blickpunkt-grafikdesign.de

    Ich bin ja dumm, die hattest Du ja längst gepostet.


    Der Fehler liegt hier:


    Ganz unten ziehst Du jQuery zum zweiten Mal ein. Dabei wird alles, was von jQuery-UI umgeändert oder hinzugefügt wurde, wieder gelöscht. Lösche diese Zeile.

  • Ich bin ja dumm, die hattest Du ja längst gepostet.


    Der Fehler liegt hier:


    Ganz unten ziehst Du jQuery zum zweiten Mal ein. Dabei wird alles, was von jQuery-UI umgeändert oder hinzugefügt wurde, wieder gelöscht. Lösche diese Zeile.

    Das hat jetzt geklappt, nur der Haken erscheint noch nicht, stattdessen kommt ein Viereck.


    Du hast mir schon super weitergeholfen!

  • Nein, ich meine auf der codepen-Seite das CSS. Das ist SCSS und muss kompiliert werden. Das habe ich mal gemacht und ein fiddle gemacht, daraus kannst Du das CSS kopieren:

    http://jsfiddle.net/dtsLy10q/

    Das codepen braucht noch eine Reihe mehr Einzüge, eine wahre Materialschlacht. Du musst dieses noch ergänzen:

    Code
    1. <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
    2. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.csss">