Kontaktformular: nach "senden" auf der selben Seite bleiben

  • Dein PHP-Code sieht schon grausam aus.

    Da ich wie gesagt nicht so viel Ahnung von programmieren habe, habe ich mir dazu eine Anleitung gesucht und nach dieser Habe ich die PHP Datei erstellt.

    Ich bin froh das es funktioniert :)

  • 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">

    Genau das habe ich auch gesehen, dass es SCSS ist. Ich habe dann mit Dreamweaver eine neue SCSS Datei erstellt, den Code reinkopiert und als ich es gespeichert habe, kam eine Meldung das die Datei in CSS kompiliert wurde und ich hatte dann css und scss.

    Vielen Dank für deine Mühe.


    die zwei Links habe ich im Head Bereich ergänzt, ist das richtig ? Kann nur leider keinen Unterschied feststellen. Oder ich bin blind.

    Was sollten diese Links bewirken ? den Haken?

  • Genau das habe ich auch gesehen, dass es SCSS ist. Ich habe dann mit Dreamweaver eine neue SCSS Datei erstellt, den Code reinkopiert und als ich es gespeichert habe, kam eine Meldung das die Datei in CSS kompiliert wurde und ich hatte dann css und scss.

    Vielen Dank für deine Mühe.


    die zwei Links habe ich im Head Bereich ergänzt, ist das richtig ? Kann nur leider keinen Unterschied feststellen. Oder ich bin blind.

    Was sollten diese Links bewirken ? den Haken?

    Ich nehme alles zurück.


    Hat nun doch geklappt. Ich hab bei dem Link noch https:// ergänzt und bei dem zweiten Link war vermutlich ein "s" bei css zuviel.


    Vielen Dank für deine Hilfe und deine Geduld Sempervivum!!

  • Zitat

    Genau das habe ich auch gesehen, dass es SCSS ist. Ich habe dann mit Dreamweaver eine neue SCSS Datei erstellt, den Code reinkopiert und als ich es gespeichert habe, kam eine Meldung das die Datei in CSS kompiliert wurde und ich hatte dann css und scss.

    Tut mir Leid, ich hatte nicht damit gerechnet, dass Du dich mit SCSS auskennst. Ich selber nämlich so gut wie nicht.

    Freut mich, dass es jetzt funktioniert.

    Ja, Du kannst die Einzüge im Head lassen. Am besten auch die anderen dort hin bringen, dann ist es übersichtlicher.

  • Tut mir Leid, ich hatte nicht damit gerechnet, dass Du dich mit SCSS auskennst. Ich selber nämlich so gut wie nicht.

    Freut mich, dass es jetzt funktioniert.

    Ja, Du kannst die Einzüge im Head lassen. Am besten auch die anderen dort hin bringen, dann ist es übersichtlicher.

    Dafür brauchst du dich nicht entschuldigen.

    Was heißt auskennen. Ich kenne mich nicht aus aber das Programm war einfach so schlau und hat das für mich erledigt.


    Vielen lieben Dank nochmal.


    Ich hätte zwar schon wieder eine Frage aber will ja auch nicht nervig sein.


    Gute Nacht! :sleeping:

  • Da ich wie gesagt nicht so viel Ahnung von programmieren habe, habe ich mir dazu eine Anleitung gesucht und nach dieser Habe ich die PHP Datei erstellt.

    Ich bin froh das es funktioniert :)

    Deine Einstellung kommt mir so rüber: Hauptsache ich habe es nach dieser Anleitung gemacht und es funktioniert. Aber mit welchem Risiko ist egal. Verbesserungsvorschläge/Ratschläge werden ignoiert.


    Hinterfrage mal was.

    Für was brauchst du dabei Javascript, bzw. jquery ?

    Gibt es bessere Möglichkeiten ?


    Und wenn dir ne function unbekannt ist schau in das PHP-Handbuch. Da wird alles erklärt (Schleifen, OOP, If-statements, switch/case, usw... ).

    Link dazu: http://php.net/manual/de/index.php

  • Stef Du hast zwar recht, dass sein Wunsch genauso mit PHP sehr einfach umsetzbar wäre, aber eine JS-Lösung macht durchaus ebenfalls Sinn. So kann er ja z.B. noch Animationen einbauen und eine Frontend-Validierung mit direktem User Feedback vornehmen.

    Solange weiterhin trotzdem eine Backend-Validierung existiert, ist alles in Ordnung.

  • JR Cologne was bedeutet Backend-Validierung ?


    Stef wie gesagt ich kenne mich nicht aus, was bestehen denn für Risikos

    Das wusste ich nicht.

    Backend-Validierung bedeutet, dass die Anfrage des Users auf dem Server per PHP überprüft wird.


    Bei einem Kontaktformular wäre das Wichtigste eine Prüfung der E-Mail sowie das Escapen der Daten, um Cross-Site-Scripting-Attacken zu verhindern.


    Am besten zeigst du nochmal deinen kompletten Code, dann kann ich den mal auf potenzielle Sicherheitslücken untersuchen.


    Zum Verständnis ist vielleicht das hilfreich: https://www.php-kurs.com/cross…pting-xss-unterbinden.htm

  • Vielen Dank für dein Angebot.


    Hier ist mal mein kompletter Code.


  • Gute Nacht! Die nächste Frage kannst Du ja morgen stellen ...

    Sempervivum Zu meiner nächsten Frage...


    es wird jetzt der Haken angezeigt sobald das Formular abgeschickt wurde. Allerdings zeigt es den Haken auch an wenn die Felder nicht ausgefüllt wurden und eine Fehlermeldung kommt.

    Ich hätten nun also gerne wenn der Kunde die Felder nicht ausfüllt und trotzdem auf senden klickt, dass der Button läd und dann allerdings rot wird und ein "X" erscheint statt dem Haken.


    Oder ist das jetzt zu viel verlangt ^^

  • Ok, ich gehe das mal nach und nach durch und bin dabei jetzt auch mal etwas pingeliger:


    1. Die if-Bedingung sowie die letzte Fehlerausgabe

    PHP
    if ($_POST['von'] !="" and $_POST['mail'] != "" and $_POST['nachricht'] !="") {
        //
    } else {
        echo "Bitte füllen Sie alle Felder aus!";
    }   

    Das "Hauptproblem" ist hierbei deine Abfrage, ob die Felder leer sind. Das funktioniert zwar, kann man aber schöner mit der Funktion empty() lösen. Auch würde ich den Und-Operator "&&" statt "and" benutzen.


    Des Weiteren solltest du nicht einfach nur Text ausgeben, sondern diesen auch in HTML-Tags packen. Ein einfaches <p> oder <p><strong> reicht da völlig aus.


    Genauso ist es in dem Fall überflüssig, die doppelten Anführungszeichen zu nutzen, da sich innerhalb des Strings z.B. keine Variable befindet, die PHP interpretieren muss.

    Grobe Faustregel für Anführungszeichen bei Strings:

    Einfacher Text mit HTML -> einfache Anführungszeichen ('), da der String dann nicht interpretiert wird, was unnötige Arbeit wäre.

    Text, HTML und Co mit eingebetteter Variable -> doppelte Anführungszeichen ("), weil eine Variable interpretiert werden muss, damit sie nicht einfach als Text ausgegeben wird, sondern der Inhalt aus der Variable in den String eingebaut wird.


    Mein Code-Vorschlag:

    PHP
    if ( !empty($_POST['von']) && !empty($_POST['mail']) && !empty($_POST['nachricht']) ) {
        //
    } else {
        echo '<p>Bitte füllen Sie alle Felder aus!</p>';
    }


    2. Das Setzen der ganzen Variablen / Vorbereitung für den Mail-Versand



    Bei den hardgecodeten Variablen musst du schon mal nichts ändern, außer wieder die Geschichte mit den Anführungszeichen.

    Gut, beim Betreff könnte man noch für den Fall, dass du irgendwann mal Umlaute oder spezielle Sonderzeichen oder so in deinem Betreff hast, etwas einfügen, was dann für eine richtige Darstellung sorgt. Das sähe dann so aus: $betreff = '=?UTF-8?B?' . base64_encode($betreff) . '?=';


    Was bei dir auf jeden Fall noch geändert müsste, sind dann die Header bzw. in deinem Fall hast du nur From eingebaut.

    Ich würde dir in jedem Fall zu folgenden Headern raten:


    PHP
    $headers = implode("\r\n", [
        'MIME-Version: 1.0',
        'Content-type: text/plain; charset=utf-8',
        "From: {$from}",
        "Reply-To: {$from}",
        "Subject: {$betreff}",
        'X-Mailer: PHP/' . phpversion()
    ]);


    Das Ganze nutzt ein Array, das dann durch die Funktion implode() in einen String umgewandelt wird.


    Besonders wichtig ist zuvor aber noch, dass du die E-Mail überprüfst, und das Escapen der Formular-Daten darfst du nicht vergessen.

    Ich nutze dafür z.B. Folgendes:

    PHP
    htmlspecialchars(stripslashes(trim($value)));

    Die Kombi aus den drei Funktionen sorgt dafür, dass unnötige Leerzeichen und Maskierungszeichen entfernt und Sonderzeichen in HTML-Codes umgewandelt werden, um XSS-Attacken zu verhindern.


    Zur E-Mail-Überprüfung kannst du folgende Funktion nutzen:

    PHP
    filter_var($email, FILTER_VALIDATE_EMAIL);


    Gut, da das vermutlich viel war, habe ich mal Kommentare im Code hinterlassen.


    Mein Code-Vorschlag:


    3. Die E-Mail versenden sowie finale Ausgabe


    PHP
    mail($empf, $betreff, $text, $from);
    echo "Vielen Dank für Ihre Anfrage";


    Hier gibt es lediglich zu kritisieren, dass du, wenn das Versenden schief geht, keine Fehlermeldung ausgibst.


    Code-Vorschlag:

    PHP
    if (mail($empf, $betreff, $text, $from)) {
        echo '<p>Vielen Dank für Ihre Anfrage</p>';
    } else {
        echo '<p>Beim Versand der E-Mail ist ein Fehler aufgetreten!</p>';
    }



    So, und jetzt alles zusammen:



    So, ich hoffe, ich habe nichts vergessen, keine Fehler eingebaut und dich jetzt nicht komplett überfordert.


    Es gibt zwar immer noch Möglichkeiten, den Code zu verbessern, aber so hast du schon mal eine ganz gute Basis.

  • Zitat

    Ich hätten nun also gerne wenn der Kunde die Felder nicht ausfüllt und trotzdem auf senden klickt, dass der Button läd und dann allerdings rot wird und ein "X" erscheint statt dem Haken.


    Oder ist das jetzt zu viel verlangt

    Nein, ist nicht zuviel verlangt. Weil dabei alles zusammen spielen muss, habe ich eine Testdatei angelegt. Du musst dir das Notwendige heraus ziehen und vor allem den Namen der PHP-Datei durch deinen ersetzen.

  • Sempervivum vielen Dank. Ich habe das jetzt alles mal so eingegeben, aber irgendwie hat sich nichts geändert. Hat es bei dir funktioniert ?

    Vielleicht habe ich auch etwas übersehen, komme leider nicht dahinter..

  • Ja, bei mir hatte es funktioniert. Da ist ein Syntaxfehler im Javascript: Schließende geschweifte Klammer fehlt. So ist es richtig:

    Code
    $(document).ready(function() { 
                // bind 'kontaktformular' and provide a simple callback function 
                $('#kontaktformular').ajaxForm(function(output) { 
                    $("#response").html(output);
                    $("#kontaktformular")[0].reset();
                    if (output.indexOf("Bitte füllen Sie alle Felder aus") != -1) {
                        $("#button").addClass("wrong");
                    }
                }); 
            });
  • html-seminar.de/woltlab/attachment/1212/ JR Cologne vielen Dank für die ausführliche Erklärung.


    Ich glaube verstanden habe ich es, ob ich es ohne Anleitung umsetzten könnte bin ich mir noch nicht sicher.


    Allerdings wirft es mir jetzt noch diesen Fehler aus.

    An der html Datei muss ich ja nichts ändern. Die Bezeichnungen wie 'von', 'mail' und 'nachricht' sind ja gleich geblieben. Das habe ich richtig verstanden oder ?

    evtl liegt es daran, dass mir folgender Fehlercode ausgeworfen wird:

    Zeile 9 syntax error, unexpected '{‘

    Zeile 35 syntax error, unexpected else (T_ELSE)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!