JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<form method="post" class="kontaktformular">
                        <ol>
                          <li><input type="text" id="name" placeholder="Vor- und Nachname*" required></li>
                          <li><input type="text" id="straße" placeholder="Straße und Hausnummer"></li>
                          <li><input type="text" id="plz" placeholder="PLZ">
                              <input type="text" id="ort" placeholder="Ort"></li>
                          <li><input type="text" id="telefon" placeholder="Telefon-/Mobilfunknummer"></li>
                          <li><input type="email" id="email" placeholder="E-Mail Adresse*" required></li>
                        </ol>
                          <p class="time">Reisezeitraum:
                          <input type="date" id="date1">-<input type="date" id="date2">
                          </p>
                          <table class="kontakt-option">
                                <tr>
                                  <th>
                                    <p>Erw.:
                                    <select type="text" id="erw" name="Erw">
                                      <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
                                    </select>
                                    </p>
                                  </th>
                                  <th>
                                    <p>Kinder:
                                    <select type="text" id="kinder" name="Kinder">
                                      <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
                                    </select>
                                    </p>
                                  </th>
                                </tr>
                          </table>
                          <textarea id="nachricht" rows="4" placeholder="Ihre...

JavaScript

function sendmail(){
  let name = document.getElementById("name").value;
  let straße = document.getElementById("straße").value;
  let plz = document.getElementById("plz").value;
  let ort = document.getElementById("ort").value;
  let telefon = document.getElementById("telefon").value;
  let email = document.getElementById("email").value;
  let date1 = document.getElementById("date1").value;
  let date2 = document.getElementById("date2").value;
  let erw = document.getElementById("erw").value;
  let kinder = document.getElementById("kinder").value;
  let nachricht = document.getElementById("nachricht").value;
  let checkbox = document.getElementById("checkbox").value;

  let body = "Vor- und Nachname:" + name + "</br> Straße und Hausnummer:" + straße + "</br> PLZ:" + plz + "Ort:" + ort + "</br> Telefon-/Mobilfunknummer:" + telefon + "</br> E-Mail Adresse:" + email + "</br> Reisezeitraum" + date1 + "-" + date2 + "</br> Erw.:" + erw + "Kinder:" + kinder + "</br> Nachricht:" + nachricht + "</br> Checkbox:" + checkbox;

  Email.send({
     Host : "smtp.elasticemail.com",
    Username : "Maik",
    Password : "Maik250268", 
  To : '[email protected]',
  From : document.getElementById("email").value,
  Subject : "Ferienhaus - Kontaktformular",
  Body : body
  }).then(
  message => alert("Ihre Nachricht wurde erfolgreich abgeschickt.")
 );
}