Bulma Kitchensink Form

<div class="container">
  <div class="columns is-justify-content-center">
    <div class="column is-6-tablet is-5-desktop is-4-widescreen is-3-fullh">
      <form
        method="POST"
        action="https://herotofu.com/start"
        class="box p-5"
        enctype="multipart/form-data"
      >
        <label class="is-block mb-4">
          <span class="is-block mb-2">Your name</span>
          <input
            name="name"
            type="text"
            class="input"
            placeholder="Joe Bloggs"
          />
        </label>

        <label class="is-block mb-4">
          <span class="is-block mb-2">Email address</span>
          <input
            name="email"
            type="email"
            class="input"
            placeholder="joe.bloggs@example.com"
          />
        </label>

        <label class="is-block mb-4">
          <span class="is-block mb-2">Your photo</span>
          <span class="file has-name is-fullwidth">
            <label class="file-label">
              <input class="file-input" type="file" name="photo" />
              <span class="file-cta">
                <span class="file-icon">
                  <i class="fas fa-upload"></i>
                </span>
                <span class="file-label"> Choose a file… </span>
              </span>
              <span class="file-name"> File name </span>
            </label>
          </span>
        </label>

        <label class="is-block mb-4">
          <span class="is-block mb-2">When is your birthday?</span>
          <input name="birthday" type="date" class="input" />
        </label>

        <label class="is-block mb-4">
          <span class="is-block mb-2"
            >What kind of present you expect this year?</span
          >
          <span class="select is-fullwidth">
            <select name="present">
              <option>Chocolate cake</option>
              <option>Dancing cat</option>
              <option>Custom meme about me</option>
              <option>Zoom backgrounds for the rest of my life</option>
            </select>
          </span>
        </label>

        <label class="is-block mb-4">
          <span class="is-block mb-2">Interesting... Please tell more</span>
          <textarea
            name="message"
            class="textarea"
            rows="3"
            placeholder="Mmmm... cake."
          ></textarea>
        </label>

        <div class="mb-4">
          <div>
            <label>
              <input type="radio" name="season" value="summer" checked />
              <span>I like summer</span>
            </label>
          </div>
          <div>
            <label>
              <input type="radio" name="season" value="winter" />
              <span>I'm more into winter</span>
            </label>
          </div>
        </div>

        <div class="mb-4">
          <label>
            <input name="offers" value="yes" type="checkbox" />
            <span>Email me news and special offers</span>
          </label>
        </div>

        <div class="mb-4">
          <button type="submit" class="button is-link px-4">
            Regular Button
          </button>
        </div>

        <div>
          <div class="is-size-7 has-text-right">
            by
            <a
              href="https://herotofu.com/start"
              class="has-text-dark"
              target="_blank"
              >HeroTofu</a
            >
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

/* The following CSS is used only for the preview,
   please don't copy it to your production code */
body { padding: 2rem 0; }