Kontakt Form mit Javasscript und PHP. Kein externer Service ist hierfür nötig. Spammer werden mit einer Honeypot Funktion eingebremst.

Kontakt Form mit Javasscript und PHP

Beinahe jede Website bietet ein Kontaktformular an. Die Umsetzung kann über externe Services erfolgen oder unter eigener Kontrolle bleiben sofern man einen Server mit Mailfunktionalität und PHP betreibt. Drei Komponenten sind in meinem Beispiel nötig:

Das Kontaktformular zur Abfrage der Informationen (kontakt.html)
Javascript und etwas Ajax für eine ansprechende Nutzererfahrung (validate.js).
PHP zur Prüfung der eingegebenen Daten und für den Versand an die E-Mail Adresse (mail.php).

Kontakt Form kontakt.html

Das Form setzt auf Bootstrap auf. Als Besonderheit ist der “Honeypot” name=url konfiguriert, der über “invisible” unsichtbar gehalten wird.

<form class="contact__form my-php-email-form" action="forms/mail.php" method="POST">
    <div class="form-row">
        <div class="col-md-6 form-group">
            <input type="text" name="name" class="form-control" placeholder="Ihr Name" required />
        </div>
        <div class="col-md-6 form-group">
            <input type="email" class="form-control" name="email" placeholder="Ihre E-Mail" required />
        </div>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" name="subject" placeholder="Thema" required />
    </div>
    <div class="form-group">
        <textarea class="form-control" name="message" rows="5" placeholder="Nachricht"></textarea>
    </div>
    <div class="form-group d-none">
        <input type="text" name="url" class="form-control invisible" placeholder="Nicht ausfüllen" />
    </div>

    <div class="text-center"><button type="submit">Nachricht senden</button></div>

    <!-- form message -->
        <div class="row">
            <div class="col-12">
                <div class="my-3 alert alert-success contact__msg" style="display: none" role="alert">
                    Die Nachricht wurde erfolgreich versandt.
            </div>
        </div>
    </div>
    <!-- end form message -->
</form>

Javascript und Ajax

Inhalt der Datei validate.js

(function ($) {
    'use strict';

    var form = $('.contact__form'),
        message = $('.contact__msg'),
        form_data;

    // Success function
    function done_func(response) {
        message.fadeIn().removeClass('alert-danger').addClass('alert-success');
        message.text(response);
        setTimeout(function () {
            message.fadeOut();
        }, 3000);
        form.find('input:not([type="submit"]), textarea').val('');
    }

    // fail function
    function fail_func(data) {
        message.fadeIn().removeClass('alert-success').addClass('alert-success');
        message.text(data.responseText);
        setTimeout(function () {
            message.fadeOut();
        }, 3000);
    }
    
    form.submit(function (e) {
        e.preventDefault();
        form_data = $(this).serialize();
        $.ajax({
            type: 'POST',
            url: form.attr('action'),
            data: form_data
        })
        .done(done_func)
        .fail(fail_func);
    });
    
})(jQuery);

PHP Validierung und Versand

Inhalt der Datei mail.php

<?php

    if ($_SERVER["REQUEST_METHOD"] == "POST") {

        # FIX: Replace this email with recipient email
        $mail_to = "info@tobeconsult.de";
        
        # Sender Data
        $subject = trim($_POST["subject"]);
        $name = str_replace(array("\r","\n"),array(" "," ") , strip_tags(trim($_POST["name"])));
        $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
        #$phone = trim($_POST["phone"]);
        $message = trim($_POST["message"]);
        
        if ( empty($name) OR !filter_var($email, FILTER_VALIDATE_EMAIL) OR empty($subject) OR empty($message)) {
            # Set a 400 (bad request) response code and exit.
            http_response_code(400);
            echo "Bitte das Formular vollständig ausfüllen.";
            exit;
        }
        
        # Mail Content
        $content = "Name: $name\n";
        $content .= "E-Mail: $email\n\n";
        #$content .= "Phone: $phone\n";
        $content .= "Nachricht:\n$message\n";

        # email headers.
        $headers = "From: $name <$email>";

        # Send the email.
        // SPAM check if the url field is empty
        // https://www.nfriedly.com/techblog/2009/11/how-to-build-a-spam-free-contact-forms-without-captchas/ 
        if(isset($_POST['url']) && $_POST['url'] == ''){
        // then send the form to your email
            $success = mail($mail_to, $subject, $content, $headers);
        } else {
            echo "Vielen Dank. Ihre Nachricht wurde erfolgreich versandt.";
        }
        
        if ($success) {
            # Set a 200 (okay) response code.
            http_response_code(200);
            echo "Vielen Dank. Ihre Nachricht wurde erfolgreich versandt.";
        } else {
            # Set a 500 (internal server error) response code.
            http_response_code(500);
            echo "Das E-Mail konnte nicht versandt werden - Serverproblem.";
        }

    } else {
        # Not a POST request, set a 403 (forbidden) response code.
        http_response_code(403);
        echo "Es gab ein Problem mit dem Versandt. Bitte versuchen Sie es noch einmal.";
    }

?>

TobeConsult

ToBeConsult bietet für individuell zugeschnittene Lösungen und kein Standardvorgehen. Wir haben strukturierte Vorgehensweisen, Modelle und effizientere Methoden entwickelt und wenden diese in Zusammenarbeit mit unseren Kunden an. Wir denken unternehmerisch und handeln stets aus der Sicht des Eigentümers.

Als kreative und qualifizierte Berater bieten wir Ihnen innovative Lösungen. Wir helfen Ihnen von der Suche nach einer neuen Markteintrittsstrategie oder einem neuen Vertriebskonzept bis hin zur Erhöhung der Kundenzufriedenheit oder der Prozessoptimierung weiter.