Contact form

<!-- SaveForm.io: contact (brutal) -->
<style>
[data-sf-tpl="contact"] {
  all: revert;
  box-sizing: border-box;
  display: block;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #18181b;
  -webkit-font-smoothing: antialiased;
}
[data-sf-tpl="contact"] *,
[data-sf-tpl="contact"] *::before,
[data-sf-tpl="contact"] *::after {
  box-sizing: border-box;
}
[data-sf-tpl="contact"] input,
[data-sf-tpl="contact"] textarea,
[data-sf-tpl="contact"] select,
[data-sf-tpl="contact"] button {
  font: inherit;
  color: inherit;
  margin: 0;
}
[data-sf-tpl="contact"] button {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-sf-tpl="contact"] label {
  display: block;
}
[data-sf-tpl="contact"].sf-contact--brutal {
  max-width: 480px;
  background: #ffffff;
  border: 2px solid #000000;
  padding: 32px;
  box-shadow: 8px 8px 0 0 #000000;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
[data-sf-tpl="contact"] .sf-contact__title {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 8px 0;
  color: #000000;
}
[data-sf-tpl="contact"] .sf-contact__lede {
  font-size: 13px;
  color: #52525b;
  margin: 0 0 28px 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
[data-sf-tpl="contact"] .sf-contact__field {
  margin-bottom: 18px;
}
[data-sf-tpl="contact"] .sf-contact__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
  color: #000000;
}
[data-sf-tpl="contact"] .sf-contact__input,
[data-sf-tpl="contact"] .sf-contact__textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #000000;
  background: #ffffff;
  font-size: 14px;
  outline: none;
  transition: box-shadow 120ms ease;
}
[data-sf-tpl="contact"] .sf-contact__textarea {
  resize: vertical;
  min-height: 110px;
}
[data-sf-tpl="contact"] .sf-contact__input:focus,
[data-sf-tpl="contact"] .sf-contact__textarea:focus {
  box-shadow: 4px 4px 0 0 #d946ef;
}
[data-sf-tpl="contact"] .sf-contact__button {
  width: 100%;
  padding: 14px 18px;
  background: #d946ef;
  color: #000000;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid #000000;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
[data-sf-tpl="contact"] .sf-contact__button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 0 #000000;
}
[data-sf-tpl="contact"] .sf-contact__honey {
  position: absolute;
  left: -9999px;
}
</style>
<form
  class="sf-contact--brutal"
  data-sf-tpl="contact"
  action="https://saveform.io/api/submit/YOUR_FORM_ID"
  method="POST"
>
  <h2 class="sf-contact__title">Get in touch</h2>
  <p class="sf-contact__lede">// We reply within one business day</p>

  <input type="text" name="_honey" class="sf-contact__honey" tabindex="-1" autocomplete="off" />

  <div class="sf-contact__field">
    <label class="sf-contact__label" for="sf-contact-name">Name</label>
    <input id="sf-contact-name" class="sf-contact__input" type="text" name="name" required />
  </div>

  <div class="sf-contact__field">
    <label class="sf-contact__label" for="sf-contact-email">Email</label>
    <input id="sf-contact-email" class="sf-contact__input" type="email" name="email" required />
  </div>

  <div class="sf-contact__field">
    <label class="sf-contact__label" for="sf-contact-message">Message</label>
    <textarea id="sf-contact-message" class="sf-contact__textarea" name="message" required></textarea>
  </div>

  <button class="sf-contact__button" type="submit">Send message →</button>
</form>