You can update data records params based on the field values of a form. Let’s see the following example:
We have that form hosted in Flowize. We have created a Website type Content (also called Hosted Page) with the following HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Form demo</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="row pt-5"> <div class="col"></div> <div class="col-6"> <form> <div class="form-group"> <label for="email">Email address</label> <input attr-field="@data.email@" type="email" class="form-control" id="email" placeholder="firstname.lastname@example.org"> </div> <div class="form-group"> <label for="select">Example select</label> <select attr-field="@data.option@" class="form-control" id="select"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="text">Example textarea</label> <textarea attr-field="@data.text@" class="form-control" id="text" rows="3"></textarea> </div> <div class="form-group"> <div class="form-check"> <input attr-field="@data.check@" class="form-check-input" type="checkbox" id="check"> <label class="form-check-label" for="check"> Check me out </label> </div> </div> <button type="submit" class="btn btn-primary" attr-action="WEBHOOK" attr-action-id="12345ABCDE" attr-action-status="SUBMITTED" attr-action-url="https://api.flowize.io/v1/webhook/12345-12345-12345-12345" attr-redirect="#">Submit</button> </form> </div> <div class="col"></div> </div> </body> </html>
That way we can, for example, generate a URL in our flow to access an instance of that content using the following app:
The app will generate a URL like
https://www.flowize.io/hosted-page/12345-12345-12345 that we can later send via email in the same flow if desired.
When a user visits the link, he will be able to fill up the form and submit it, then, the data record will be updated based on the fields and the system will also register a Webhook. That way we could have our Flow waiting for that user input.
Let’s see what each attribute found in this example is for:
attr-fieldthis attribute can be included in inputs, selects, text areas… It indicates the @ variable that will be updated upon submit.
attr-actionthis will be only included in the submit button. It defines the action upon submit, the options are
WEBHOOK(to update the data record and post an event) and
FLOW(to start a new data record if this form was in a Direct URL). In the first case, it also needs the following 3 attributes.
attr-action-idit indicates the unique ID to identify this event.
attr-action-statusit defines the status/event to log in the system. You can use
SUBMITTEDor any other custom status you might want to include in your Webhook. If you have configured a Webhook object in your flow, and it is listening to this same ID and status, it will be triggered as soon as the submit button is clicked.
attr-action-urlindicate here the URL of the desired webhook.
attr-redirectit defines the URL to visit after success in the submit. You can also use
#in case you just want to refresh the page.
Here, some other attributes you might find useful:
attr-update-keystore-keythis attribute can be also included in the submit button, you can define here the identifier or key of the Keystore you want to update, in case that you have
@keystorevariables in some
attr-update-session-paramwich only possible value is
YESin case you need to update
@sessionvariables. You’ll need to include this attribute in the same HTML tag (input, select, text area…) that contains the
attr-fieldwith such variable.