0.5.0 • Published 4 years ago
@smartinsf/webflow-form v0.5.0
Webflow Form
Setup your form to send some request and control the success and failing flow.
Usage
Configure your form id, action and method. E.g.:
IMPORTANT: Set your form name in lowercase, without accents or special characters and with words separated by -.
- Bad:
@my form,Fomulário de contato. - Good:
contact-form,newsletter,ebook-request.
Continuing... embed the package script in your webflow project and call the function setUpWebflowForm passing your form name (The same defined on form settings above). E.g.:
<script onload="setUpWebflowForm('contact-form')" src="https://unpkg.com/@smartinsf/webflow-form"></script>Hint: Click here for more details how to add an embed.
When the form was submitted a request will be sent to URL defined on action with method (POST, by default) and form data obtained from inputs inside your form element.
Setup options
The function setUpWebflowForm can receive some options in your second parameter:
| Option | Type | Description | Default value |
|---|---|---|---|
| doneBlockSelector | string | The selector of the element that contains the block to show on success. | .w-form-done |
| failBlockSelector | string | The selector of the element that contains the block to show on fail. | .w-form-fail |
| waitTextAttributeName | string | The name of the attribute from form's submit button that contains the value that will be shown on button text during request. | data-wait |
| prepareData | (data: object): object | A function that receives the form data and must return the data that will be sent on request. | (data) => data |
E.g.:
setUpWebflowForm('contact-form', {
doneBlockSelector: '.success-block',
failBlockSelector: '.fail-block',
waitTextAttributeName: '.fail-block',
})TODO
- Unit tests