Static Form 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

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="Un-static Forms">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="Un-static Forms">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="Un-static Forms">Un-static Forms</a>)</small></p>
  </div>
</form>