Tutorial: Trigger a task from a contact form, using webhooks, with Mechanic.

Mechanic is a development platform for Shopify. :)

Tutorial: Trigger a task from a contact form, using webhooks

This is the companion task for the Triggering tasks from a contact form tutorial.

Runs when user/webhook/form is triggered. Configuration includes recipient email address, email subject, email body, csv attachment filename, and mechanic webhook url.

15-day free trial – unlimited tasks

Documentation

This is the companion task for the Triggering tasks from a contact form tutorial.

This task is triggered via Mechanic webhook, and includes JavaScript that calls this webhook when a contact form is submitted on your online Shopify store. This task's included JavaScript listens for a submit event on that form, sends the form data to your Mechanic webhook, and then allows that form to continue submission normally. In this way, the task augments the contact form's original functionality, instead of replacing that functionality.

This task requires additional setup, including configuring a Mechanic webhook for your store, and adjusting the task's JavaScript to account for your contact form HTML. To use this task, make sure to start with the tutorial itself:

https://learn.mechanic.dev/resources/tutorials/triggering-tasks-from-a-contact-form

Developer details

Mechanic is designed to benefit everybody: merchants, customers, developers, agencies, Gurus, everybody.

That’s why we make it easy to configure automation without code, why we make it easy to tweak the underlying code once tasks are installed, and why we publish it all here for everyone to learn from.

Open source
View on GitHub to contribute to this task
Events
when user/webhook/form is triggered (user/webhook/form)
Options
recipient email address (email, required), email subject (required), email body (required, multiline), csv attachment filename (required), mechanic webhook url (required)
Script
{% assign rows = array %}

{% assign header = array %}
{% assign header[0] = "Name" %}
{% assign header[1] = "Email" %}
{% assign header[2] = "Phone Number" %}
{% assign header[3] = "Message" %}
{% assign rows[rows.size] = header %}

{% assign row = array %}
{% assign row[0] = event.data.contact.Name %}
{% assign row[1] = event.data.contact.Email %}
{% assign row[2] = event.data.contact["Phone Number"] %}
{% assign row[3] = event.data.contact.Message %}
{% assign rows[rows.size] = row %}

{% assign csv_data = rows | csv %}

{% action "email" %}
  {
    "to": {{ options.recipient_email_address__email_required | json }},
    "subject": {{ options.email_subject__required | json }},
    "body": {{ options.email_body__required_multiline | strip | newline_to_br | json }},
    "attachments": {
       {{ options.csv_attachment_filename__required | replace: ".csv", "" | append: ".csv" | json }}: {{ rows | csv | json }}
     }
   }
{% endaction %}
Mechanic tasks are written in Liquid, which makes them easy to write and easy to modify. Learn more about our platform.
Online store JavaScript
// This code will be loaded on all pages of our store. So, we'll need
// to begin by seeing if the current page has a contact form on it,
// to make sure we're not causing errors by trying to modify a form
// that doesn't exist.

// The `contactForm` variable will either be our form (if it's present
// on this page), or will be null (if it isn't).
const contactForm = document.querySelector('#ContactForm');

// Before Mechanic delivers this JavaScript to the storefront, it first
// evaluates it for Liquid. This means that we get to use the `options`
// object. By using {{ options.mechanic_webhook_url__required }}, we can
// make the webhook URL configurable.
const mechanicWebhookUrl = {{ options.mechanic_webhook_url__required | json }};

// We only want to run all of this if there's a contact form on the page.
if (contactForm) {

  // Setting up a flag for later - keep reading!
  let submittedToMechanic = false;

  contactForm.addEventListener(
    'submit',
    (event) => {
      // We're going to prevent the form submit from doing its normal
      // normal. We'll re-submit the form in a second, after we've
      // submitted data to Mechanic.
      event.preventDefault();

      // We'll use fetch to make our POST request:
      // https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
      fetch(
        mechanicWebhookUrl,
        {
          method: 'POST',
          body: new FormData(contactForm),
        }
      ).then((response) => {
        console.log('Sending data to Mechanic: Success!', response);
      }).catch((error) => {
        console.error('Sending data to Mechanic: Error!', error);
      }).finally(() => {
        // Now that we're done with sending our data to Mechanic,
        // we're going to manually submit the contact form. This won't
        // trigger the "submit" event again; it'll just run the form's
        // usual submit behavior.
        contactForm.submit();
      });
    },
  );
}
When this task is installed, this code is loaded into the online storefront using a ScriptTag.
Defaults
Recipient email address
crm_imports@example.com
Email subject
Contact form submission for CRM: {{ "now" | date: "%Y-%m-%d %H:%M" }}
Email body
Hello,

Please find the attached CSV. Thanks!

-Mechanic, for {{ shop.name }}
Csv attachment filename
contact-form-for-crm-{{ "now" | date: "%s" }}