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:
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.
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...
<div class="form-v2">
<form class="form">
<div class="forms">
</div>
</form>
</div>