Kontaktformular: nach "senden" auf der selben Seite bleiben

tvb · 1. November 2017

Zitat von Stef

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

tvb · 1. November 2017

Zitat von Sempervivum
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?

tvb · 1. November 2017

Zitat von BlickPunkt Grafikdesign

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

Sempervivum · 1. November 2017

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.

tvb · 1. November 2017

Zitat von Sempervivum

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!

Sempervivum · 1. November 2017

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

Stef · 2. November 2017

Zitat von BlickPunkt Grafikdesign

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

JR Cologne · 2. November 2017

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.

tvb · 2. November 2017

JR Cologne was bedeutet Backend-Validierung ?

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

Das wusste ich nicht.

JR Cologne · 2. November 2017

Zitat von BlickPunkt Grafikdesign

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

tvb · 2. November 2017

Zitat von JR Cologne

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

Alles anzeigen

Vielen Dank für dein Angebot.

Hier ist mal mein kompletter Code.

PHP: PHP

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

Alles anzeigen

tvb · 2. November 2017

Zitat von Sempervivum

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

JR Cologne · 2. November 2017

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

PHP

$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'];

Alles anzeigen

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:

PHP

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

// für richtige Darstellung von Umlauten etc.
$betreff = '=?UTF-8?B?' . base64_encode('Kontaktanfrage') . '?=';

// Stichwort Escapen zur Verhinderung von XSS-Attacken
$von = htmlspecialchars(stripslashes(trim($_POST['von'])));
$mail = htmlspecialchars(stripslashes(trim($_POST['mail'])));
$text = htmlspecialchars(stripslashes(trim($_POST['nachricht'])));

// Ist die E-Mail valide?
if (filter_var($mail, FILTER_VALIDATE_EMAIL)) {
    // wir haben alles, jetzt können wir die Mail vorbereiten, sprich die Header setzen
    $headers = implode("\r\n", [
        'MIME-Version: 1.0',
        'Content-type: text/plain; charset=utf-8',
        "From: {$von} <{$mail}>",
        "Reply-To: {$mail}",
        "Subject: {$betreff}",
        'X-Mailer: PHP/' . phpversion()
    ]);
} else {
    echo '<p>E-Mail ungültig!</p>';
}

Alles anzeigen

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:

PHP

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Kontaktformular</title>
</head>
<body>
    <?php
        if ( !empty($_POST['von']) && !empty($_POST['mail']) && !empty($_POST['nachricht']) ) {
            $empf = 'info@blickpunkt-grafikdesign.de';

            // für richtige Darstellung von Umlauten etc.
            $betreff = '=?UTF-8?B?' . base64_encode('Kontaktanfrage') . '?=';

            // Stichwort Escapen zur Verhinderung von XSS-Attacken
            $von = htmlspecialchars(stripslashes(trim($_POST['von'])));
            $mail = htmlspecialchars(stripslashes(trim($_POST['mail'])));
            $text = htmlspecialchars(stripslashes(trim($_POST['nachricht'])));

            // Ist die E-Mail valide?
            if (filter_var($mail, FILTER_VALIDATE_EMAIL)) {
                // wir haben alles, jetzt können wir die Mail vorbereiten, sprich die Header setzen
                $headers = implode("\r\n", [
                    'MIME-Version: 1.0',
                    'Content-type: text/plain; charset=utf-8',
                    "From: {$von} <{$mail}>",
                    "Reply-To: {$mail}",
                    "Subject: {$betreff}",
                    'X-Mailer: PHP/' . phpversion()
                ]);

                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>';
                }
            } else {
                echo '<p>E-Mail ungültig!</p>';
            }
        } else {
            echo '<p>Bitte füllen Sie alle Felder aus!</p>';
        }
    ?>
</body>
</html>

Alles anzeigen

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.

Sempervivum · 2. November 2017

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.

HTML

<!doctype html>
<html>
<head>
    <title>Registrierung</title>
    <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.css">
    <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 src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>
    <section class="contact" id="contact">
        <div id="response"></div>
        <h3>KONTAKT</h3>
        <form id="myForm" method="post" action="ajaxform-blickpunkt.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>
        </form>
    </section>

    <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);
                $("#myForm")[0].reset();
                if (output.indexOf("Bitte füllen Sie alle Felder aus") != -1) {
                    $("#button").addClass("wrong");
                }
            });

            $( "#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 wrong" );
                }, 1250 );
            }
        });
    </script>
    <style>
        button {
            outline: none;
            height: 40px;
            text-align: center;
            width: 130px;
            border-radius: 40px;
            background: #fff;
            border: 2px solid #1ECD97;
            color: #1ECD97;
            letter-spacing: 1px;
            text-shadow: 0;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.25s ease;
        }

            button:hover {
                color: white;
                background: #1ECD97;
            }

            button:active {
                letter-spacing: 2px;
            }

            button:after {
                content: "SUBMIT";
            }

        .onclic {
            width: 40px;
            border-color: #bbbbbb;
            border-width: 3px;
            font-size: 0;
            border-left-color: #1ECD97;
            animation: rotating 2s 0.25s linear infinite;
        }

            .onclic:after {
                content: "";
            }

            .onclic:hover {
                color: #1ECD97;
                background: white;
            }

        .validate {
            font-size: 13px;
            color: white;
            background: #1ECD97;
        }

            .validate:after {
                font-family: 'FontAwesome';
                content: "\f00c";
            }

        .validate.wrong {
            font-size: 13px;
            color: white;
            background-color: salmon !important;
            border-color: red;
        }

            .validate.wrong:after {
                font-family: 'FontAwesome';
                content: "\f00d";
            }

        @keyframes rotating {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    </style>
</body>
</html>

Alles anzeigen

tvb · 2. November 2017

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

Sempervivum · 2. November 2017

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");
                }
            }); 
        });

tvb · 2. November 2017

Sempervivum PERFEK! Es hat geklappt.

Ich weiß gar nicht wie ich dir danken kann!!

tvb · 2. November 2017

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 ?

PHP

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Kontaktformular</title>
</head>
<body>
<?php
    if( !empty ($_POST['von'] && !empty($_POST['mail']) && !empty($_POST['nachricht']) ) {
    $empf = "info@blickpunkt-grafikdesign.de";
    $betreff = '=?UFT-8?B?'. base64_encode('Kontaktanfrage') . '?=';

            $von = htmlspecialchars(stripslashes(trim($_POST['von'])));
            $mail = htmlspecialchars(stripslashes(trim($_POST['mail'])));
            $text = htmlspecialchars(stripslashes(trim($_POST['nachricht'])));

            if (filter_var($mail, FILTER_VALIDATE_EMAIL)) {

                $headers = implode("\r\n", [
                    'MIME-Version: 1.0',
                    'Content-type: text/plain; charset=utf-8',
                    "From: {$von} <{$mail}>",
                    "Reply-To: {$mail}",
                    "Subject: {$betreff}",
                    'X-Mailer: PHP/' . phpversion()
                ]);
                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>';
                }
            } else {
                echo '<p>E-Mail ungültig!</p>';
            }
       } else {
            echo '<p>Bitte füllen Sie alle Felder aus!</p>';
        }
       
    ?>

</body>
</html>

Alles anzeigen

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

Zeile 9 syntax error, unexpected '{‘

Zeile 35 syntax error, unexpected else (T_ELSE)

Sempervivum · 2. November 2017

Zeile 9: Für das erste !empty fehlt die schließende runde Klammer.

Zeile 35: Folgefehler?

JR Cologne · 2. November 2017

Vermutlich ja. Sehe gerade auch nichts Weiteres.

Kontaktformular: nach "senden" auf der selben Seite bleiben

Jetzt mitmachen!

Teilen

Tags