Build Custom Forms on content pages for service and finance enquires.


Simply build a HTML form and add it as well as some code to your content page.


The form is then sent to the Contact-Us page, where the name and email are put into the fields provided, the other form elements will be structured and added to the message.


Form Element Names

When building your form you will need to enter the name of each element/input, there are special names we can use to do certain things, here is a list:

  • email - Puts the email address into the email field
  • name - Try's to split the name into first name last name and put into respective fields
  • fname - Firstname
  • lname - Lastname
  • phone - Phone Number


<input name="email" type="text" class="form-control">


Email To Option

You can specify an email to option, which will send the email to that address, this is good for service enquires where you want the email to go to the service department.


The field should also be hidden as you dont want the user to see it:

<input name="emailto" value="email@yourcompany.com" style="display:none;">



Building a Form

There are few online Bootstrap form builders you can use to build your form:


Submit Button

We have to create a special submit button for the form to work, see below button, the only requirement is the onclick tag.

<button onclick="formSubmit()" type="submit" value="Submit" />


Code

This java script code has to be placed under the form:

<script>
function formSubmit() {
  document.getElementById("__VIEWSTATE").value = "";
  document.getElementById("formMain").method = "get";
  document.getElementById("formMain").action = "/contact-us";
  document.getElementById("formMain").submit();
}
</script>



Sample Form

Here is a basic sample form:


<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="name">Name</label>  
  <div class="col-md-4">
  <input id="name" name="name" type="text" placeholder="Name" class="form-control input-md" required="">
  <span class="help-block">Please enter your name</span>  
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="email">Email</label>  
  <div class="col-md-4">
  <input id="email" name="email" type="text" placeholder="Email Address" class="form-control input-md" required="">
  <span class="help-block">Please enter an email address</span>  
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="message">Message</label>  
  <div class="col-md-4">
  <input id="message" name="message" type="text" placeholder="Message" class="form-control input-md" required="">
  <span class="help-block">Please enter an email address</span>  
  </div>
</div>

<button onclick="formSubmit()" type="submit" value="Submit" />

<script>
function formSubmit() {
  document.getElementById("__VIEWSTATE").value = "";
  document.getElementById("formMain").method = "get";
  document.getElementById("formMain").action = "/contact-us";
  document.getElementById("formMain").submit();
}
</script>