Contact forms

Contact forms help initiate communication in non-urgent scenarios.

Best practices

• Ask for as little information as possible. This typically includes single line text inputs for name and email and a multi-line text field for a longer message or inquiry. If additional information is required, be sure to include copy that explains why.
• If form fields aren’t required, don’t include them in the form.
• Choose a button label that describes the action (e.g. ‘Submit request’ or ‘Send message’).
• Include a success message that clearly communicates what happens next and how long the user can expect to wait for a reply.

Example

Contact us

Have a problem? Send us a message briefly describing the issue you’re having and a member of our technical support team will get back to you within 48 hours.

<h3>Contact us</h3>
<p class="mt-3 mb-4">Have a problem? Send us a message briefly describing the issue you’re having and a member of our technical support team will get back to you within 48 hours.</p>
<form>
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <label for="name">Full name</label>
        <input id="name" class="form-control">
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input id="email" type="email" class="form-control">
      </div>
    </div>
    <div class="col-md-12">
      <div class="form-group">
        <label for="msg">Message</label>
        <textarea rows="6" id="msg" class="form-control"></textarea>
      </div>
    </div>
  </div>
  <input disabled class="btn btn-primary mt-4" type="submit" value="Send message">
</form>