HTML Formularbutton, der E-Mail versendet?

Hallo,

ich habe in meiner Webseite ein Formular erstellt (Code ist hier eingefügt) und möchte, dass wenn man auf den <input> (submit) drückt, dass eine E-Mail versendet wird, an eine Adresse, die ich vllt. im HTML-Code angeben würde.

Geht das irgendwie?

Danke im Voraus!

<form style="margin-left: 3%; margin-right: 3%; padding-top: 20px;">
  <div class="form-group">
    <label>Vorname, Nachname</label>
    <input type="text" class="form-control" name="Name" placeholder="Ihr Name">
  </div>
  <div class="form-group">
    <label>E-Mail</label>
    <input type="email" class="form-control" name="E-Mail" placeholder="Ihre E-Mail">
  </div>
  <div class="form-group">
    <label>Betreff/Titel</label>
    <input type="text" class="form-control" name="Titel" placeholder="Titel">
  </div>
  <div class="form-group">
    <label>Anliegen</label>
    <textarea class="form-control" name="Anliegen" placeholder="Ihr Anliegen"></textarea>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary" name="Button" value="Senden">
  </div>
</form>

Answer 1

[regex9]

Für einen Versand benötigst du einen SMTP-Client, der sich mit einen Mailserver verbinden kann, um die Nachricht zu verschicken.

Im einfachsten Fall könntest du einfach darauf vertrauen, dass deine Nutzer einen Mailclient auf dem Rechner installiert haben, der den Versand übernehmen kann. Dann würde es reichen, die Versandadresse im action-Attribut des Formulars anzugeben.

<form action="mailto:[e-mail]">
  <input name="subject">
  <textarea name="body"></textarea>
  <button>Send</button>
</form>

Die Parameter subject und body würden die E-Mail entsprechend mit Betreff und Textkörper befüllen.

Um die Werte etwas vorzufiltern, kann man verschiedene Attribute auf den Formularfeldern einsetzen (pattern, required, maxlength). Das diese Validation leicht umgehbar ist, sollte allerdings klar sein.

Mehr Kontrolle über den Versand (z.B. durch bessere Filtermöglichkeiten) hättest du, wenn du die Daten in einer serverseitigen Anwendung verarbeiten und erst dort verschicken würdest. Es müsste dabei sichergestellt sein, dass es einen Mailserver gibt und die von dir vorgegebene Absenderadresse bei diesem registriert ist. Wenn du bei einem Webhoster einen Webspace mietest, ist so etwas oft schon vordefiniert. Mehr Informationen findest du dann in der Regel in deinem Account und dem FAQ/Wiki.

Mit welcher Programmiersprache die Webanwendung entwickelt werden kann, ist abhängig von der Serverumgebung, auf der deine Webseite läuft. Typische Kandidaten wären z.B. PHP, Ruby oder JavaScript (Node.js). Für sie alle gibt es Bibliotheken, die beim Mailversand unterstützen (PHPMailer, mail, nodemailer, etc.).

Answer 2

[elmex7]

Für schnelle Formularversand Lösungen eignen sich Services wie formspree.io recht gut...

Answer 3

[tanteerna68]

Mit reinem HTML geht das nicht. Du musst eine Server Script Sprache dafür einsetzen, die die Daten verarbeitet und dann versendet. Dazu nutzt Du am besten PHP.

Schau mal hier: https://www.php-einfach.de/php-tutorial/php-email/

Comments

[Lilly17uwu]

geht das vielleicht auch mit javascript?😅

[tanteerna68]

@Lilly17uwu

Leider nicht, da JavaScript clientseitig ausgeführt wird und diese Art von Daten nicht verarbeiten kann. Es könnte eine Verbindung zum Server geschaffen werden, z. B. mit einer AJAX Funktion. Schlussendlich müsste es aber dennoch verarbeitet werden. So könnte ein Framework wie Node.js auf dem Server dies bewerkstelligen, aber einfacher ist es definitiv mit PHP. Viel Erfolg :-)

[Lilly17uwu]

@tanteerna68

okay, danke!

Answer 4

[LeBonyt]

Verwende das "action" Attribut im "form" Tag.

Woher ich das weiß: Berufserfahrung – Web Developer bei einem mittelständischen Portalbetreiber