Forms

Handling Forms

Our web component can handle forms out-of-the-box if you choose to use the data property data-oggeh-form-post at the <form> tag.

You can choose to display different messages for the case of successful or failed form submissions:

1. Add the data property data-oggeh-form-success to an HTML element for the success message. Example:

<div data-oggeh-form-success class="alert alert-success alert-dismissible hidden" role="alert">
  <p>Thank you. We will get back to you at the earliest.</p>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>   
</div>

2. Add the data property data-oggeh-form-error to an HTML element for the error message. Example:

<div data-oggeh-form-error class="alert alert-danger alert-dismissible hidden" role="alert">
    <p>Unexpected error! Please try again later...</p>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
</div>

However, for handling your main contact form, use the data property data-oggeh-form-contact instead. Example:

<form class="contact-form" data-oggeh-form-contact>
  <div class="row">
    <div class="col-md-12">
      <input type="text" name="name" placeholder="Your name here" required>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <input type="text" name="email" placeholder="Your email here" required>
    </div>
    <div class="col-md-6">
      <input type="text" name="phone" placeholder="Your phone here">
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <textarea name="message" rows="3" placeholder="Your message here" required></textarea>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <button class="yellow-bg" type="submit">Send message</button>
    </div>
  </div>
</form>