Update a data record based on a form submit

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 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-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 use SUBMITTED 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 some attr-field.
  • attr-update-session-param wich only possible value is YES 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 the attr-field with such variable.