E-mailtest widget

Wil je dat bezoekers van jouw website direct een e-mailtest kunnen starten?
Neem dan de HTML- en CSS-code uit onderstaande tekstvakken op in de broncode van je website.

HTML

<form action="https://internet.nl/mail/" method="POST">
  <p>
    <img class="internetnl" src="https://internet.nl/static/logo_en.svg" alt="Is jouw internet up-to-date?"/>
    <strong>Test je e-mail</strong>
  </p>
  <label for="internetnl-mail-url">Jouw e-mailadres:</label>
  <span class="internetnl emailfield">
    <input id="internetnl-mail-url" type="text" inputmode="url" name="url" placeholder="example.nl">
  </span>
  <button class="internetnl">Start test</button>
</form>

CSS

img.internetnl {
  max-width: 100%;
  height: auto;
  float: none;
  clear: both;
  display: block;
}
.internetnl.emailfield:before {
  content: '@';
  background: #dadada;
  width: 8%;
  display: block;
  float: left;
  text-align: center;
  height: 100%;
  overflow: hidden;
  padding: 2px 0;
} 
button.internetnl:hover {
    cursor: pointer;
}
button.internetnl:hover,
button.internetnl:focus,
button.internetnl:active {
    background: #ffab4c;
}
button.internetnl {
    display: block;
    margin: 0 auto .5em;
    background: #fff;
    border: solid .3em #ffab4c;
    font-family: 'robotobold', arial, sans-serif;
    font-weight: bold;
    font-size: 100%;
    border-radius: 18px;
    padding: .2em .5em;
}

Opmerkingen

Logo: We raden aan om ons logo op je eigen webserver op te slaan en te gebruiken. Op die manier is er geen contact met onze webserver als je website wordt bezocht.
Content-Security-Policy (CSP): Indien je op je website gebruikmaakt van CSP, dan zou je internet.nl moeten toevoegen aan de regels voor form-action en eventueel ook voor img-src als je linkt naar het logo op onze webserver.