Mechanic is a development and ecommerce automation platform for Shopify. :)
This is the companion task for the Triggering tasks from a contact form tutorial.
Runs Occurs whenever user/webhook/form is triggered. Configuration includes recipient email address, email subject, email body, csv attachment filename, and mechanic webhook url.
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
Mechanic is designed to benefit everybody: merchants, customers, developers, agencies, Shopifolks, 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.
(By the way, have you seen our documentation? Have you joined the Slack community?)
user/webhook/form
{% 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 %}// 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();
});
},
);
}crm_imports@example.com
Contact form submission for CRM: {{ "now" | date: "%Y-%m-%d %H:%M" }}Hello,
Please find the attached CSV. Thanks!
-Mechanic, for {{ shop.name }}contact-form-for-crm-{{ "now" | date: "%s" }}