Static Form HTML Examples

To make it easier to start with forms on your static site, we’ve prepared some examples for you! Let us know if we could provide other useful ones!

Of course you don’t have to keep the ‘Powered By’ link, but we do ask you to include it if you don’t have a subscription, as we provide you this service for free.

Examples:

• Bootstrap 4 Contact Form
• Bootstrap 3 Contact Form
• Base HTML form for static sites
• Contact form with file upload

Bootstrap 4 Contact Form

If you have a static site based on Bootstrap 4 and Font Awesome 5, you can just drop in this Bootstrap 4 contact form, set your Un-static form endpoint, and you are done.

Of course you can add fields as needed. Currently we’re only assuming you need a Name, E-mail address and a message. But feel free to add new fields. Un-Static form endpoints will handle all the fields you pass to them and send them to your registered e-mail address.

<form method="post" action="https://forms.un-static.com/forms/YOUR_ENDPOINT_REFERENCE">
  <div class="form-group row">
    <label for="inputName" class="col-sm-2 col-form-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputName" placeholder="Please enter your name">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="input-group col-sm-10">
      <div class="input-group-prepend"><i class="input-group-text fa fa-envelope"></i></div>
      <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputMessage" class="col-sm-2 col-form-label">Message</label>
    <div class="col-sm-10">
      <textarea name="inputMessage" cols="40" rows="8" class="form-control"></textarea>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Send</button>
    </div>
  </div>
  <div class="text-center">
    <p><small>(Powered by <a rel="nofollow" href="https://un-static.com">Un-static Forms</a>)</small></p>
  </div>
</form>

Bootstrap 3 Contact Form

For static sites still built upon Bootstrap 3 and icons from Font Awesome 4.7, you can use this version of the contact form to get your users messages to your e-mail address.

<form method="post" action="https://forms.un-static.com/forms/YOUR_ENDPOINT_REFERENCE">
  <div class="form-group row">
    <label for="name" class="col-4 col-form-label">Name</label>
    <div class="col-8">
      <div class="input-group">
        <div class="input-group-addon"><i class="fa fa-user"></i></div>
        <input name="name" placeholder="Fill in your name" type="text" class="form-control">
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label for="email" class="col-4 col-form-label">E-mail address</label>
    <div class="col-8">
      <div class="input-group">
        <div class="input-group-addon"><i class="fa fa-envelope"></i></div>
        <input name="email" placeholder="Fill in your e-mail address" type="text" class="form-control">
      </div>
    </div>
  </div>
  <div class="form-group row">
    <label for="message" class="col-4 col-form-label">Message</label>
    <div class="col-8">
      <textarea name="message" cols="40" rows="8" class="form-control"></textarea>
    </div>
  </div>
  <div class="form-group row">
    <div class="offset-4 col-8">
      <button type="submit" class="btn btn-primary">Send</button>
    </div>
  </div>
  <div class="text-center">
    <p><small>(Powered by <a rel="nofollow" href="https://un-static.com">Un-static Forms</a>)</small></p>
  </div>
</form>

Base HTML form for static sites

For static site that are not using any standard framework, you can just take the form below and use adapt the design as you wish.

<form method="post" action="https://forms.un-static.com/forms/YOUR_ENDPOINT_REFERENCE">
  <input type="text" name="name" placeholder="Enter your name" required>
  <input type="email" name="email" placeholder="Enter your e-mail address" required>
  <textarea name="message" cols="40" rows="15"></textarea>
  <button type="submit">Send</button>
  <div class="text-center">
    <p><small>(Powered by <a rel="nofollow" href="https://un-static.com">Un-static Forms</a>)</small></p>
  </div>
</form>

Contact form with file upload

Want your visitors to attach a file - a CV, a screenshot, a PDF? Add enctype="multipart/form-data" to the form and include an <input type="file">. We’ll e-mail you a secure download link for each upload. File uploads require a paid plan; see how to receive file uploads for allowed types, size limits and details.

<form method="post" action="https://forms.un-static.com/forms/YOUR_ENDPOINT_REFERENCE" enctype="multipart/form-data">
  <input type="text" name="name" placeholder="Enter your name" required>
  <input type="email" name="email" placeholder="Enter your e-mail address" required>
  <textarea name="message" cols="40" rows="10"></textarea>
  <label for="attachment">Attach a file</label>
  <input type="file" name="attachment" id="attachment">
  <button type="submit">Send</button>
  <div class="text-center">
    <p><small>(Powered by <a rel="nofollow" href="https://un-static.com">Un-static Forms</a>)</small></p>
  </div>
</form>

I'm using Un-static (https://un-static.com) as the form backend for my static site. It gives a form an HTTPS endpoint with no server code. Wire up the form on this page to Un-static.

Set the form's action to https://forms.un-static.com/forms/YOUR_ENDPOINT_REFERENCE and method="post". I get YOUR_ENDPOINT_REFERENCE by registering the form at https://forms.un-static.com/register-form (ask me to paste mine).

Rules:
- Every field needs a "name" attribute. Include a field named "email" so I can reply to submissions.
- Spam filtering and reCAPTCHA are handled by Un-static automatically, so a normal HTML POST needs no extra captcha or honeypot fields.
- File uploads: add enctype="multipart/form-data" to the form and an <input type="file"> (paid plans).
- No-reload submit: POST to the same URL with "/ajax" appended via fetch(). This requires the form to be linked to an account with your own reCAPTCHA. Send FormData (not JSON) if files are involved.
- The post-submit redirect is configured in the Un-static dashboard, not in the markup.

Machine-readable docs: https://un-static.com/llms.txt (append .md to any docs URL for raw markdown).

Generate the form HTML now.