Form V2

This topic will only cover the <form > tag of form-v2 structure and setup dependencies. More documentation on form-v2 fields can be found there:

• form-v2 inputs

structure

The base form v2 structure relies on 2 main containers:

• A main wrapper .form-v2 to scope the V2 features
• A child element .form being the form itself, this doesn't have to be a
  tag to be functional but it is recommended for seo and ideal page semantics

  • a data-url attribute is needed to indicate on which API the ajax call should be done

<div class="form-v2">
    <form class="form" data-url="/api/forms/form-contact">
    </form>
</div>

The API ajax call has some default fallback values, but you can always override them:

• method is by default post
• type of expected data is by default json

<div class="form-v2">
    <form 
        class="form"                   
        data-type="json"
        method="post"
        data-url="/api/forms/form-contact">
    </form>
</div>

An optional data attribute can be added to the form if it receives data that isn't part of the form fields but has to be sent in the ajax request.

• data-extra-data (value: Stringified Object)

In the following example some dealer data is going to be passed to the form data(event based for instance) and a carId is going to be retrieved from the querystring params of the URL.

<form class="form"
              data-extra-data='{"dealer":"", "carId":""}'
              data-url="/api/forms/form-send-to-dealer">
</form>

An additional wrapper nested withing the .form element is also required to inherit from the "form-v1" styling. Ideally, once the form-v1 is no longer in use, it would be good removing it and making the styling independent from it as this is abusing the html nesting...

• .forms wrapper around the fields just for styling inheritance from V1 purpose

<div class="form-v2">
    <form class="form">
        <div class="forms">
        </div>
    </form>
</div>

Demo

Styleguide section