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="name@example.com"> </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-field
this attribute can be included in inputs, selects, text areas… It indicates the @ variable that will be updated upon submit.attr-action
this will be only included in the submit button. It defines the action upon submit, the options areWEBHOOK
(to update the data record and post an event) andFLOW
(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-id
it indicates the unique ID to identify this event.attr-action-status
it defines the status/event to log in the system. You can useSUBMITTED
or 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-url
indicate here the URL of the desired webhook.attr-redirect
it 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-key
this 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@keystore
variables in someattr-field
.attr-update-session-param
wich only possible value isYES
in case you need to update@session
variables. You’ll need to include this attribute in the same HTML tag (input, select, text area…) that contains theattr-field
with such variable.