Kontaktformular: nach "senden" auf der selben Seite bleiben

tvb · 1. November 2017

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>

<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:

<h3>KONTAKT</h3>

<br />

<br />

<br />

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

Sempervivum · 1. November 2017

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:

Code

<section class="contact" id="contact">
<div id="response"></div>
<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>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
 
    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function(output) { 
                $("#response").html(output); 
            }); 
        }); 
    </script>

Alles anzeigen

Stef · 1. November 2017

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:

PHP

<?php
    

    if(isset($_POST['submitted'])){


        $name = filter_input(INPUT_POST, "name", FILTER_SANITIZE_STRING);
        $email = filter_input(INPUT_POST, "mail", FILTER_SANITIZE_EMAIL);
        $nachricht = filter_input(INPUT_POST, "nachricht", FILTER_SANITIZE_STRING);

        if(!empty($name) && !empty($email) && !empty($nachricht)){
            $message = "<br>Vielen Dank für Ihre Anfrage";
        } else{
            $message = "<br>Bitte füllen Sie alle Felder aus!";
        }
    }


?>


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kontaktformular</title>

    <style>
        input, textarea{
            display: block;
        }

    </style>
</head>
<body>
    <section class="contact" id="contact">
        <h3>KONTAKT</h3>
            <form method="post">
                <input type="text" name="name" placeholder="Name" class="name">
                <input type="text" name="mail" placeholder="E-Mail" class="mail">
                <textarea name="nachricht" placeholder="Nachricht"></textarea>

                <button id="button" name="submitted">Absenden!</button>

                <?php
                    if(isset($message)){

                        echo $message;
                    }  

                    
                ?>
            </form>
        </section>
</body>
</html>

Alles anzeigen

tvb · 1. November 2017

Zitat von Sempervivum

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:

Code

<section class="contact" id="contact">
<div id="response"></div>
<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>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 
 
    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function(output) { 
                $("#response").html(output); 
            }); 
        }); 
    </script>

Alles anzeigen

Damit bin ich super klar gekommen. Vielen Dank.

Der Beitrag von Stef hat mich doch etwas überfordert

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

Sempervivum · 1. November 2017

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

<script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function(output) { 
                $("#response").html(output);
                $("form")[0].reset();
            }); 
        }); 
    </script>

tvb · 1. November 2017

Zitat von Sempervivum

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

Code

<script> 
                    // wait for the DOM to be loaded 
                    $(document).ready(function() { 
                        // bind 'myForm' and provide a simple callback function 
                        $('#myForm').ajaxForm(function(output) { 
                            $("#response").html(output);
                            $("form")[0].reset();
                        }); 
                    }); 
                </script>

Wow,

vielen lieben Dank.

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

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?

Code: HTML

<button type="submit" id="button"></button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script>
      $(function() {
      $( "#button" ).click(function() {
      $( "#button" ).addClass( "onclic", 250, validate);
      });
     function validate() {
      setTimeout(function() {
      $( "#button" ).removeClass( "onclic" );
      $( "#button" ).addClass( "validate", 450, callback);
      }, 2250 );
      }
      function callback() {
      setTimeout(function() {
        $( "#button" ).removeClass( "validate" );
      }, 1250 );
    }
  });

Alles anzeigen

Sempervivum · 1. November 2017

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?

tvb · 1. November 2017

Zitat von Sempervivum

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.

Sempervivum · 1. November 2017

Zitat

ich hatte den code von codepen.io

Ah ja, kannst Du mal die URL posten?

Sempervivum · 1. November 2017

Zitat

Von mehr als einem Parameter bei der Funktion addClass() ist mir nichts bekannt

Dabei hatte ich mich auf die Doku von jQuery verlassen.

jQuery-UI kennt jedoch diese Parameter:

http://api.jqueryui.com/addclass/

Wie ich sehe, hast Du jQuery-UI auch eingebunden. Dann muss es einen anderen Grund haben, wenn es nicht funktioniert. Hast Du es online und kannst die URL posten?

tvb · 1. November 2017

Zitat von Sempervivum

Ah ja, kannst Du mal die URL posten?

https://codepen.io/valentingalmand/pen/MYMZZK

tvb · 1. November 2017

Zitat von Sempervivum

Dabei hatte ich mich auf die Doku von jQuery verlassen.

jQuery-UI kennt jedoch diese Parameter:

http://api.jqueryui.com/addclass/

Wie ich sehe, hast Du jQuery-UI auch eingebunden. Dann muss es einen anderen Grund haben, wenn es nicht funktioniert. Hast Du es online und kannst die URL posten?

Du meinst die URL von meiner Website, oder?

http://www.blickpunkt-grafikdesign.de

Stef · 1. November 2017

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.

maulepan2 · 1. November 2017

.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...

Sempervivum · 1. November 2017

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:

Code

<button type="submit" id="button"></button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script>
      $(function() {
      $( "#button" ).click(function() {
      $( "#button" ).addClass( "onclic", 250, validate);
      });
     function validate() {
      setTimeout(function() {
      $( "#button" ).removeClass( "onclic" );
      $( "#button" ).addClass( "validate", 450, callback);
      }, 2250 );
      }
      function callback() {
      setTimeout(function() {
        $( "#button" ).removeClass( "validate" );
      }, 1250 );
    }
  });
      </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <!-- loeschen -->
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    <script>

Alles anzeigen

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.

Sempervivum · 1. November 2017

Zitat

https://codepen.io/valentingalmand/pen/MYMZZK

Ich sehe, das ist SCSS. Das musst Du kompilieren, z. B. hier:

http://beautifytools.com/scss-compiler.php

Stef · 1. November 2017

Dein PHP-Code sieht schon grausam aus.

tvb · 1. November 2017

Zitat von Sempervivum

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

Der Fehler liegt hier:

Code

<button type="submit" id="button"></button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script>
      $(function() {
      $( "#button" ).click(function() {
      $( "#button" ).addClass( "onclic", 250, validate);
      });
     function validate() {
      setTimeout(function() {
      $( "#button" ).removeClass( "onclic" );
      $( "#button" ).addClass( "validate", 450, callback);
      }, 2250 );
      }
      function callback() {
      setTimeout(function() {
        $( "#button" ).removeClass( "validate" );
      }, 1250 );
    }
  });
      </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <!-- loeschen -->
    <script src="http://malsup.github.com/jquery.form.js"></script> 
    <script>

Alles anzeigen

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!

tvb · 1. November 2017

Zitat von Sempervivum

Ich sehe, das ist SCSS. Das musst Du kompilieren, z. B. hier:

http://beautifytools.com/scss-compiler.php

Das hat Dreamweaver bei mir automatisch gemacht als ich es speichern wollte

Sempervivum · 1. November 2017

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

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

Kontaktformular: nach "senden" auf der selben Seite bleiben

Jetzt mitmachen!

Teilen

Tags