E-Mail-Test-Widget

Möchten Sie den Besuchern Ihrer Website die Möglichkeit geben, direkt einen E-Mail-Test zu starten?
Kopieren Sie den HTML- und CSS-Code aus den unten stehenden Textfeldern in den Quellcode Ihrer Website.

HTML

<form class="internetstandards" action="https://internet-standards.de/mail/" method="POST">
  <img class="internetstandards" src="https://internet-standards.de/static/logo_en.svg" alt="Ist Ihr Internet auf dem neuesten Stand?"/>
  <strong>Testen Sie Ihre E-Mail</strong>
  <div>
    <label for="internetstandards-mail-url">Ihre E-Mail Adresse:</label>
    <div class="internetstandards emailfield">
      <input id="internetstandards-mail-url" type="text" inputmode="url" name="url" placeholder="example.com">
    </div>
    <button class="internetstandards">Test starten</button>
  </div>
</form>

CSS

form.internetstandards {
  font-family: Helvetica, Arial, sans-serif;
}
img.internetstandards {
  max-width: 100%;
  height: auto;
  float: none;
  clear: both;
  display: block;
  margin-bottom: 1em;
}
button.internetstandards:hover {
    cursor: pointer;
}
button.internetstandards:hover,
button.internetstandards:focus,
button.internetstandards:active {
    background: #990e5a;
}
button.internetstandards {
  display: block;
  margin: 1em 0 1em;
  background: #e5007d;
  border: 0;
  font-weight: bold;
  font-size: 100%;
  border-radius: .5rem;
  padding: .5rem 1rem;
  color: #fff;
  cursor: pointer;
}

div.internetstandards.emailfield {
  display: inline-block;
} 
div.internetstandards.emailfield:before {
  content: "@";
  background: #eee;
  width: 20px;
  float: left;
  text-align: center;
  height: 100%;
  overflow: hidden;
  padding: 2px 0;
}

Anmerkungen

Logo: Wir empfehlen Ihnen, unser Logo auf Ihrem eigenen Webserver zu speichern und zu verwenden. Auf diese Weise kommt es beim Besuch Ihrer Website nicht zu einem Kontakt mit unserem Webserver.
Content-Security-Policy (CSP): Falls Sie eine CSP-Policy für Ihre Website verwenden, müssen Sie auch internet-standards.de zu den Regeln für form-action und möglicherweise auch für img-src hinzufügen, falls Sie auf das Logo auf unserem Webserver verlinken.