<form
  id="reused_form"
  class="pb-10"
  name="contact"
>
  <div class="grid grid-cols-1 md:grid-cols-2 md:gap-10">
    <div class="border-t border-teal-500 py-2">
      <input
        id="name"
        name="name"
        class="appearance-none bg-transparent border-none text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none w-full"
        type="text"
        placeholder="{{ .Get "placeholder_name" }}"
        aria-label="Name"
      />
    </div>
    <div class="border-t border-teal-500 py-2">
      <input
        required
        id="email"
        name="email"
        type="email"
        class="appearance-none bg-transparent border-none text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none w-full"
        type="text"
        placeholder="{{ .Get "placeholder_email" }}"
        aria-label="Email"
      />
    </div>
  </div>
  <div class="grid grid-cols-1">
    <div class="border-t border-teal-500 py-2">
      <textarea
        required
        id="message"
        name="message"
        rows="6"
        placeholder="{{ .Get "placeholder_message" }}"
        class="appearance-none w-full bg-transparent text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
      ></textarea>
    </div>
  </div>
  <div class="md:text-center mx-auto">
    <button
      class="button button-primary mx-auto w-full rounded-lg px-4 md:px-5 py-3 md:py-4 bg-teal-500 hover:bg-teal-600 md:text-lg md:leading-tight text-white font-semibold leading-tight shadow-md md:text-center"
      type="submit"
    >
      Ab die Post! ✉️
    </button>
  </div>
</form>

<div id="error_message" style="width:100%; height:100%; display:none; ">
    <h4>
        Error
    </h4>
    Very sorry! There was an error with emailing me your precious words.
</div>
<div id="success_message" style="width:100%; height:100%; display:none; ">
  <h2>Das sieht gut aus!</h2>
  <p>Die Nachricht ist zu mir unterwegs. Normalerweise antworte ich innerhalb von ein bis zwei Tagen.</p>
</div>
