Email test widget

Would you like visitors of your website to be able to directly start an email test?
Copy the HTML and CSS code from the text fields below into the source code of your website.

HTML

<form action="https://internet.nl/mail/" method="POST">
  <p>
    <img class="internetnl" src="https://internet.nl/static/logo_en.svg" alt="Is your Internet up-to-date?"/>
    <strong>Test your email</strong>
  </p>
  <label for="internetnl-mail-url">Your email address:</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;
}

Notes

Logo: We recommend you to save and use our logo on your own web server. In that way there will not be any contact with our web server when your website is visited.
Content-Security-Policy (CSP): In case you are using a CSP policy for your website you would also need to add internet.nl to the rules for form-action and possibly also for img-src in case you link to the logo on our web server.