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>

4 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, HTML5

26.12.2021, 14:06

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:some-receiver@xyz.de">
  <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.).

elmex7

26.12.2021, 14:25

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

tanteerna68

26.12.2021, 11:09

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/

Lilly17uwu

Fragesteller

26.12.2021, 11:11

geht das vielleicht auch mit javascript?😅

tanteerna68

26.12.2021, 11:16

@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

Fragesteller

26.12.2021, 11:16

@tanteerna68

okay, danke!

LeBonyt

26.12.2021, 11:12

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

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

Hallo Leute, ich würde gerne meine beiden Input Elemente nebeneinander in die Mitte des Bildschirms haben. Habe schon versucht ein DIV außenrum zu erstellen und diesem text-align:center zu geben. Hat leider nicht geholfen.

Mein Code:

<div class="upperForm form-row">
  <div class="form-group">
    <label for="name1">Name</label>
    <input type="text" class="form-control main-input" id="name1" placeholder="">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="email" class="form-control main-input" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
</div>

...zur Frage

Wieso versendet dieser PHP Code die Mail nicht?

Gestern ging es noch.....

Es kommt zwar die Meldung das die Mail verschickt wurde jedoch wurde sie nicht verschickt

<?php
if(isset($_POST['submit'])) {
  $to = $_POST['to'];
  $subject = $_POST['subject'];
  $message = $_POST['message'];
  $header = "From : <//email-adresse-vom-sender>";
  if(mail($to, $subject, $message, $header)) {
    echo "Email sent successfully";
  } else {
    echo "Email failled";
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
  <div class="form_container">
    <h3>Send Email with PHP</h3>
    <form method="post">
      <p>
        <label for="to">To:</label>
        <input type="text" name="to" placeholder="To.."/>
      </p>
      <p>
        <label for="subject">Subject:</label>
        <input type="text" name="subject" placeholder="Subject.."/>
      </p>
      <p>
        <label for="name">Message:</label>
        <input type="text" name="message" placeholder="Message.."/>
      </p>
      <button name="submit" name='submit'>Send</button>
    </form>
    </div>
    </div>
  
</body>
</html>

...zur Frage

HTML-Eingabefeld mit jQuery nur mit Zahlen zulassen?

Wie lässt sich in HTML-Eingabefeld mit jQuery nur numerisch (0-9) zulassen?

<div class="col-sm-6">
                                                            <div class="form-group">
                                                                <label for="Bauherr_PLZ">PLZ</label>
                                                                <input type="text" class="form-control" maxlength="5" onKeyUp="zahl()" value="{if isset($values.Bauherr_PLZ)}{$values.Bauherr_PLZ}{/if}" name="Bauherr_PLZ" />
                                                            </div>
                                                            </div>

...zur Frage

[HTML] Checkboxes werden nicht angezeigt?

Die Checkboxes werden in Firefox nicht angezeigt, jedoch in Chrome.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="1" name="verhalten_freundlich">
  <label class="form-check-label" for="verhalten_freundlich">Freundlich</label>
</div>

...zur Frage

Wie kann ich Zeilenumbrüche in einer E-Mail einfügen (PHP)?

Hallo,

ich habe mit HTML und PHP ein Kontaktformular erstellt, welches mir per E-Mail zugesendet wird.

Die einzelnen Felder in der E-Mail werden aber einfach hintereinander weg geschrieben und ich möchte Absätze nach jedem Feld einfügen, damit die E-Mail etwas schöner aussieht.

Hier der Code:

if (isset($_POST["submit"])) {
  mail("email-adresse", "Kontaktformular", 'Firma: '.$_POST["Firma"].'Branche: '.$_POST["Branche"].'Anrede: '.$_POST["Anrede"].
  'Name: '.$_POST["Name"].'Straße: '.$_POST["Straße"].'PLZ, Ort: '.$_POST["PLZ,Ort"].'Telefon: '.$_POST["Telefon"].'E-Mail: '.$_POST["E-Mail"].'Anmerkung: '.$_POST["Anmerkung"]);
?>
<h1 class="erfolg">Danke für Ihre Anfrage!</h1>
<?php
  }
?>
<form action="Kontakt.php" method="post">
  <legend>Kontaktformular</legend>
  <br>
  <!-- Titel für Eingabefelder -->
  <p>
    <label>Firma</label><br>
    <input type="text" name="Firma">
  </p>
  <p>
    <label>Branche</label><br>
    <input type="text" name="Branche">
  </p>
  <p>
    <label for="Anrede">Anrede*</label><br>
    <select name="Anrede" required>
      <option></option>
      <option>männlich</option>
      <option>weiblich</option>
      <option>divers</option>
    </select>
  </p>
  <p>
    <label>Name*</label><br>
    <input type="text" name="Name" required placeholder="">
  </p>
  <p>
    <label>Straße</label><br>
    <input type="text" name="Straße">
  </p>
  <p>
    <label>PLZ, Ort</label><br>
    <input type="text" name="PLZ, Ort">
  </p>
  <p>
    <label>Telefon</label><br>
    <input type="text" name="Telefon">
  </p>
  <p>
    <label>E-Mail*</label><br>
    <input type="email" name="E-Mail" required>
  </p>
  <p>
    <label>Anmerkung</label><br>
    <textarea rows="10" name="Anmerkung" placeholder=".">
    </textarea>
  </p>
  <p>
    <button type="submit" name="submit"><a>Versenden!</a></button>
  </p>
</form>

...zur Frage

Webseite: Kennt sich jemand damit aus?

Und zwar brauche ich kurz hilfe. Ich möchte dass man im Registrier-Formular ein Profilbild auswählen kann. Wenn man Angemeldet ist, soll das eigene PB oben rechts in der Ecke angezeigt werden.

HTML-Code (Formular):

<div class="container">
      <div class="box">
		  <div class="scroll">
        <form action="" method="POST" class="login-email">
          <p class="login-text">Registrieren</p>
		<div class="profile-pic-div">
            <img src="img/default-pb.jpg" id="photo">
			<input type="file" id="file">
			<label for="file" id="uploadBtn">Profilbild Wählen</label>
          </div>
          <div class="input-group">
            <input type="text" placeholder="Benutzername" name="username" value="<?php echo $username; ?>" required>
          </div>
          <div class="input-group">
            <input type="email" placeholder="Email" name="email" value="<?php echo $email; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Passwort" name="password" value="<?php echo $_POST['password']; ?>" required>
          </div>
          <div class="input-group">
            <input type="password" placeholder="Wiederhole das Passwort" name="cpassword" value="<?php echo $_POST['cpassword']; ?>" required>
          </div>
          <div class="input-group">
           <button name="submit" class="login-btn">Registrieren</button>
          </div>
          <p class="login-register-text">Du hast bereits ein Konto? <a href="https://www.klexxstube.com/anmelden">Melde dich an</a></p>
        </form>
			 </div>
      </div>
    </div>

Hier der Code zum Wechseln vom PB (JS):

const imgDiv = document.querySelector('.profile-pic-div');
const img = document.querySelector('#photo');
const file = document.querySelector('#file');


file.addEventListener('change', function() {
	const choosedFile = this.files[0];
	
	if (choosedFile) {
		
		const reader = new FileReader();
		
		reader.addEventListener('load', function() {
			img.setAttribute('src', reader.result);
		});
		
		reader.readAsDataURL(choosedFile);
	}
});

Vielleicht habt ihr auch eine komplett andere Version wie man so etwas schaffen kann.

LG Klexxsy

...zur Frage

JavaScript - Formularfelder dynamisch hinzufügen?

Ich habe ein HTML-Formular. Darin soll man in eine Datenbank eine Frage mit x Antworten speichern kann. Habe folgendes als Vorlage benutzt, komme aber nicht weiter:

https://werner-zenk.de/javascript/formularfelder_dynamisch_hinzufuegen.php

Ich benötige aber neben einem Input-Feld für eine Antwort nur die Möglichkeit zur Definition, ob diese Antwort Richtig oder Falsch ist.

Habe jetzt folgendes Versucht... (Auszug für function feld_plus())

<script>
function feld_plus() {
 if (feld <= 9) {
  feld++;
 document.getElementById('dynamic_input').innerHTML = "";
  for (var counter = 1; counter <= feld; counter++) {
   var label = "Antwort " + counter;
   var inhalt = document.getElementById("antwort" + counter).value;
   document.getElementById('dynamic_input').innerHTML += "<label style=\"float: left;\">" + label + ": <input type='text' name='n_" + feld + "' value='" + inhalt + "' onInput='antwort(this.value, \"" + feld + "\")'></label><fieldset><input type='radio' id='true" + counter + "' name='statuscode' value='11'><label for='true" + counter + "'>Richtig</label> <input type='radio' id='false" + counter + "' name='statuscode' value='12'><label for='false" + counter + "'>Falsch</label></fieldset><br>";
  }
 }
}
function antwort(inhalt, feld) { document.getElementById("antwort" + feld).value = inhalt; } </script>
<a href="question_add.php"><button>Frage erstellen</button></a> <hr> <h2>Fragestellung</h2> <p>Nachfolgend die Frage eintragen...</p> <form id="question_add" action="question_action.php" method="POST" onsubmit="return confirm('Frage speichern?');"> <textarea form="question_add" name="questionText" wrap="soft" rows="2" placeholder="Wie lautet ...?" required></textarea><br> <hr> <h2>Antworten</h2> <p>Nachfolgend die Antwortmöglichkeiten angeben.</p> <p>Antworten hinzufügen <input type="button" value="-" onClick="feld_minus();"><input type="button" value="+" onClick="feld_plus();"></p>
<div id="dynamic_input"></div>
<!-- Antworten --> <input type="hidden" id="antwort1"> <input type="hidden" id="antwort2"> <input type="hidden" id="antwort3"> <input type="hidden" id="antwort4"> <input type="hidden" id="antwort5"> <input type="hidden" id="antwort6"> <input type="hidden" id="antwort7"> <input type="hidden" id="antwort8"> <input type="hidden" id="antwort9"> <input type="hidden" id="antwort10">

<hr>
<input type="submit" value="Frage speichern" >
</form>

...optisch passt dass... allerdings sind die Radio-Buttons buggy...

Definiere ist Antwort1 als richtig, und dann Antwort2 als falsch, so ist bei Antwort1 nicht mehr ausgewählt... als wenn das Fieldset nicht korrekt abgeschlossen wird.

Kennt sich damit jemand aus?

...zur Frage

Wie erstelle ich ein dynamisches Kontaktformular?

Hallo, also ich habe bereits ein Kontaktformular erstellt das auch soweit gut funktioniert hierzu mein bisheriger Code:

    <?php
    if(isset($_POST["submit"])){
      mail("email@mail.com", "Kontaktformualr", 'Vorname: '.$_POST["vorname"].'Nachname: '.$_POST["nachname"].' Email: '.$_POST["email"].' Betreff: '.$_POST["subject"].' Nachricht: '.$_POST["message"]);
      ?>
      <h1 style="color: green;">Das Kontaktformular wurde abgesendet!</h1>
      <?php
    }
    ?>


    <form action="contact.php" method="post" class="service-contact-form">
      <input class="service-input-field" type="text" name="vorname" placeholder="Vorname*" required="required"><br>
      <input class="service-input-field" type="text" name="nachname" placeholder="Nachname*" required="required"><br>
      <input class="service-input-field" type="email" name="email" placeholder="Email*" required="required"><br>
      <input class="service-input-field" type="text" name="subject" placeholder="Betreff"><br>
      <textarea class="service-textarea-field" name="message" rows="8" cols="80" placeholder="Nachricht*" required="required"></textarea><br>
      <button class="service-contact-form-button" type="submit" name="submit">Senden</button>
    </form>

Das ist jetzt das normale Kontaktformular, allerdings würde ich gerne unterschiedliche Kontaktformulare mit einem <select> Element auswählen können.

    <div class="service-contact-form-select">
      <select>
        <option value="0">Support Anfrage</option>
        <option value="1">Bestellung</option>
      </select>
    </div>

Denn ich brauche bei der Supportanfrage wesentlich weniger Informationen wie bei dem Bestellformular.

Also was soll passieren?

Wenn ich bei <select> value="0" habe soll das Formular wie oben beschrieben aussehen.

Wenn ich aber bei <select> value="1" habe soll das Kontaktformular um weitere Elemente erweitert werden deren Informationen dann auch via php an meine e-mail übermittelt werden.

Kann mir hier jemand weiterhelfen?

...zur Frage

HTML Form auswerten und neue Füllen?

Hey!

Ich habe folgende Input form:

        <form action="/calculate" method="GET">
            <br><label for="KM_cost_truck_a">KM cost truck a</label>
            <input required placeholder="10" ype="text" id="KM_cost_truck_a" name="KM_cost_truck_a"><br>
    
            <label for="KM_cost_truck_b">KM cost truck b</label>
            <input required placeholder="9" type="text" id="KM_cost_truck_b" name="KM_cost_truck_b"><br>
    
            <label for="Product_cost_a">Product cost a</label>
            <input required placeholder="7" type="text" id="Product_cost_a" name="Product_cost_a"><br>
    
            <label for="Product_cost_b">Product cost b</label>
            <input required placeholder="11" type="text" id="Product_cost_b" name="Product_cost_b"><br>
    
            <label for="Source_a_location">Source a location</label>
            <input required placeholder="Berlin" type="text" id="Source_a_location" name="Source_a_location"><br>
    
            <label for="Source_b_location">Source b location</label>
            <input required placeholder="Paris" type="text" id="Source_b_location" name="Source_b_location"><br>
    
            <label for="Truck_a_capacity">Source a capacity</label>
            <input required placeholder="5" type="text" id="Truck_a_capacity" name="Truck_a_capacity"><br>
    
            <label for="Truck_b_capacity">Source b capacity</label>
            <input required placeholder="3" type="text" id="Truck_b_capacity" name="Truck_b_capacity"><br>


            <button type="submit" id="calcbtn" value="Submit">Calculate</button>
        </form>

Die eine Anfrage an meinen Server schickt und die ergebnisse dann auf eine neue Seite kommen. (Man wirt weitergeleitet)

Wie kann ich eine neue form mit der Antwort vom server füllen?

...zur Frage

HTML Form beim aktualisieren der Seite trägt sie die daten nochmal in die Datenbank ein, wie geht das weg?

Also ich hab eine Form in HTML und damit will ich sachen in einer SQL datenbank eintragen, funktioniert alles gut. Aber wenn ich die Seite aktualiesiere werden die eingeben Daten aus dem input nochmal in die Datenbank eingetragen. Wie kann ich das Wegmachen?

  <form class="tester" action="index.php" method="post">
                <?php include 'class_SQLAccount.php'; ?>


                <input class="AccountSystemAddInput" placeholder="Vorname" type="text" name="box_vorname">
                <input class="AccountSystemAddInput" placeholder="Nachname" type="text" name="box_nachname">
                <input class="AccountSystemAddInput" placeholder="Email" type="text" name="box_email">
                <input class="AccountSystemAddInput" placeholder="Passwort" type="text" name="box_password">
                <input class="AccountSystemAddInput" placeholder="Passwort wiederholen" type="text" name="box_retrypassword">
                <br>
                <input class="AccountSystemSubmit" type="submit" name="btn_AddUser" value="Hinzufügen">
                <p class="ErrorText"><?php print $var_errortext ?></p>
                <br>
              </form>

...zur Frage

wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?

<link rel="stylesheet" href="style.css">
<?php
$db = unserialize(file_get_contents('data.php'));
if($db == false){
        $db = array();
}
if($_POST['mail'] == ''){
        if($_POST['name'] == ''){
                if($_POST['pass'] == ''){a
                        if(!array_key_exists($_POST['mail'], $db){
                                $db[$_POST['mail']] = [$_POST['name'], []];
                                file_put_contents('data.php', serialize($db));
                        } 
                }
        }
}
?>
<form action="" method="post">
    <center>
        <label for="firma_name" >name:</label><br>
        <input type="text" class="input" name="name" autocomplete="off"><br>
        <label for="produkte">email:</label><br>
        <input type="text"  class="input" name="mail" autocomplete="off"><br>
        <label for="adresse">pass:</label><br>
        <input type="text"  class="input" name="pass" autocomplete="off"><br>
        <input type="submit" class="anmelde_button" value="anmelden">
    </center>
</form>

wieso PHP Parse error: syntax error, unexpected token ";" in /home/emmanuel/Downloads/hp.php on line 11?

...zur Frage

Warum wird die Seite neu geladen wenn ich etwas eingebe?

Hallo!

Ich bin nicht wirklich erfahren in PHP und lerne indem ich neue Dinge ausprobiere, kopiere, etc. Nun habe ich folgenden Code für eine Passworteingabe:

<?php
$passwort = "test";
if (isset($_POST["go"])) {
    if ($_POST["name"] == $passwort) {

    } else {

    }
} else {
    ?>
    <form class="webflow-style-input" method="post">
        <input class="popup_password" type="Password" required placeholder="Passwort eingeben" name="name">
        <input class="popup_submit" type="Submit" name="go" value=">">
    </form>
<?php } ?>

Wenn ich nun Text eingebe und ihn absende lädt die Seite neu. Weiß jemand wieso und wenn ja wie ich das abschalten kann?

...zur Frage

Checkboxen die Pflicht sein soll?

man soll umbedigt eines der Checkboxen auswählen, Bei Bedarf oder Regelmäßig oder Nein.

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Bei_Bedarf)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Bei_Bedarf" value="Ja">{/if} {language key="elf_Frage_11_Bei_Bedarf"}{if !$pdf}</label>{/if}</div>       

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Regelmaessig)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Regelmaessig" value="Ja">{/if} {language key="elf_Frage_11_Regelmaeßig"}{if !$pdf}</label>{/if}</div>

<div class="col-xs-2">{if $pdf}<span class="span-checkbox{if isset($values.Medikamente_in_Schule_Nein)} span-checkbox-checked{/if}"></span>{else}<label class="checkbox-inline"><input type="checkbox" data-group="Medikamente_Schule" name="Medikamente_in_Schule_Nein" value="Ja">{/if} {language key="elf_Frage_11_Nein"}{if !$pdf}</label>{/if}</div>

...zur Frage

Plausibilitätsprüfung als jQuery Code?

Benötige für eine Ausgabe eine Plausibilitätsprüfung als jQuery Code um ein Alter zu überprüfen, bzw. einzutippen: Unter Geburtsdatum tippen man das Datum ein, und bei Jahr_Einrichtung soll man ein Alter (Zahl) eintippen, die zum Datum übereinstimmt.

Das heißt, wenn man ein Datum 23.06.2020 eintippt, kann man nur Zahlen von 1 bis 3 eintippen, ansonsten kommt es zu eine Fehlermeldung

<label for="Geburtsdatum"style="width:165px;">Geburtsdatum</label>
<input type="text" class="form-control" style="width: 129px;" style="max-width: 130px;" id="Geburtsdatum" name="Geburtsdatum" value="{if $pdf}{$values.Geburtsdatum}{/if}">
                                                    
                                                              
<label for="Jahr_Einrichtung" style="width: 120px;">Das Kind besucht seit</label>
input type="text" class="form-control" maxlength="2" style="width: 30px;"  name="Jahr_Einrichtung" value="{if $pdf}{$values.Jahr_Einrichtung}{/if}">

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen