Erstellen eines Kontaktformulars

    Hallo,


    ich möchte ein Kontaktformular mit HTML und CSS erstellen bei dem sich die Eingabefelder auf einem Farbigen Hintergrund befinden. Daher meine Frage wie ich das am besten machen kann.

    Im Moment bin ich soweit


    HTML:

    <form>


    <h2>Ihre Wünsche</h2>


    <p>

    <label for="Vorname">Vorname</label>

    <input type="text" id="Vorname" name="Vorname" autofocus>

    </p>


    <p>

    <label for="Nachname">Nachname</label>

    <input type="text" id="Nachname" name="Nachname">

    </p>


    <p>

    <label for="Anfrage">Ihre Anfrage</label>

    <textarea name="Anfrage" rows="6" cols="60"></textarea>

    </p>


    <p>

    <input type="submit" value="absenden">

    </p>


    </form>


    CSS:

    body {

    font-family: sans-serif;

    }


    textarea

    {

    font-family: inherit;

    }


    form {

    border: 1px solid black;

    width: 90%;

    background-color: whitesmoke;

    margin: 0 auto;

    padding: 0 1em;

    }


    form label {

    display: block;

    font-size: 0.8em;

    color: darkslategrey;

    padding-left: 3px;

    }


    input,

    textarea

    {

    width: 100%;

    font-size: 1.1em;

    padding: 4px;

    font-family: inherit;

    font-weight: lighter;

    border:1px solid gray;

    outline: none;

    border-radius: 0.3em;

    }


    input:focus,

    textarea:focus {

    border:1px solid orange;

    }


    input[type=submit] {

    background-color: limegreen;

    cursor: pointer;

    width: 14em;

    padding: .3em 0;

    border-radius: 0.7em;

    }


    input[type=submit]:hover {

    background-color: yellow;

    box-shadow: 2px 2px 2px grey;

    }


    Wenn ich das ganze durchgehe, dann habe ich das Gefühl das irgendwas noch fehlt.

    Um das absenden zu können brauchst du jetzt PHP.

    Du hast jetzt nur das HTML und CSS fertig.

    Man müsste jetzt nur noch das <form> Element ändern. Da muss das Action Attribute noch geändert werden (außer beim Affenformular) und method Attribute würde ich noch auf POST setzen.

    Hier mal ein Beispiel

    https://www.php-einfach.de/exp…eispiele/kontaktformular/

    Da kannst du sehen und testen wie das funktioniert.

    Sobald du das aber auf deiner Webseite benutzen willst , rate ich dir den PHP Mailer zu benutzen, ohne ist es einfach zu unsicher und viele E-Mails könnten nicht ankommen oder im Spam Ordner landen

    Ich hatte da ja auch noch einen Thread darüber, bei dem ich einiges gesammelt hatte: Suche modernes Kontaktformular mit Spamschutz

    Da ist im Ausgangspost auch unter anderem dieses Kontaktformular.com dabei, das man allerdings nur für private Zwecke verwenden darf - hat mir also nix genutzt.

    Ich hab dann mit der mail-Funktion ein Script erstellt nach diversen Tutorials, das auch super funktioniert hat bis ich zu einem anderen Hoster gewechselt habe. Und ab da ging nix mehr. Leider ist es heutzutage tatsächlich so, dass die meisten Hoster Mails über SMTP verschickt haben wollen.

    Nun hab ich mich mit dem PHPMailer zusammengerauft...kann man so sagen. Zumindest das Formular wie es vorher war geht jetzt auch mit dem PHPMailer.

    Wenn du dir was vom CSS abkupfern willst, kannst du gern vorbeischauen. (zB Input anklicken mit rechter Maustaste - Element untersuchen - dann kannst du im Inspektor sehen, welche Styles angewendet wurden). Mit den Pseudoklassen :valid und :focus bzw. Pseudoelement ::placeholder lässt sich da einiges Hübsches draus machen.

    Das Formular findest du im PHP-Bereich: Hilfe bei phpMailer.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden