Submitting the form

The final step is to handle form submission.

Our goal is to display a nice thank-you message containing the name and phone that the user entered.

We will first create the HTML template for the thank you page.

Go to the Templates tab and create a new template with the following fields:

Name: order-phone-form-result
Render mode: Curly braces {{ ... }}

Check the HTML checkbox and paste the following HTML code:

<!doctype html>
<html lang="en" data-theme="light">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Thank you</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
  <style>
    :root {
      --pico-font-size: 87.5%;
    }

    main {
      max-width: 480px;
      margin: auto;
      padding: 2rem 1rem;
    }
  </style>
</head>

<body>
  <main>
    <h2>Thank you, {{$payload.name}}!</h2>
    <p>
      Your request for the <strong>{{$payload.phone}}</strong> has been received. 
      We'll be in touch soon.
    </p>
  </main>
</body>

</html>

As you can see near the end of the HTML, the thank you message expects a $payload variable to be available with attributes name and phone.

Let's create a package that reads the data from the submitted form and makes a $payload variable available.

Switch to the Packages tab and create a new package with the name "Order Phone Form Result".

As always, fill in the subject and summary in the header comment. Next, add the following to the script:

const { name, phone } = source.body ?? {};
const $payload = { name, phone };

The data from the submitted form can be accessed by the package via the source.body standard variable. We extract the name and phone attributes from it and assign them to the $payload variable.

All that's left now is to wire everything up.

Switch to the Settings tab of the package, check the Enabled checkbox and add the following trigger:

Trigger type: Service POST
Account: DummyJSON
Service: order-phone

The Service POST trigger type indicates, that the package is executed when the order-phone service form is submitted.

We also need to link the template with the thank-you page to the service.

Go to the Services tab, and set the POST template of the order-phone service to the order-phone-form-result template.

Save the profile and give it a try. Open the service URL in a browser tab, fill in the form and press the submit button.

Overview of all accounts, showing the details of the Webhook.site account

Congratulations! By completing the tutorials, you now know the basics of creating automations with the automator. Of course, there are many more features to explore. Have a look the worked examples to see some real-world examples, or browse through the reference documentation to gain a more in-depth understanding.