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:

structure

The base form v2 structure relies on 2 main containers:

<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:

<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.

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...

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

Demo

Styleguide section