n8n Website Contact Form to Slack with Optional Email Confirmation

This n8n workflow simplifies and automates the process of handling website contact form submissions. It captures form data, posts it to a designated Slack channel for team visibility, and optionally sends an email confirmation to the submitter.

What it does

1. Listens for Form Submissions: Triggers the workflow whenever a new submission is received via the n8n Form Trigger.
2. Posts to Slack: Sends the collected form data (e.g., name, email, message) to a specified Slack channel, ensuring your team is immediately notified of new inquiries.
3. Sends Optional Email Confirmation: Can be configured to send an automated email reply to the form submitter, acknowledging their message. This step uses either Gmail or Microsoft Outlook, depending on your setup.

Prerequisites/Requirements

• n8n Instance: A running n8n instance to host and execute the workflow.
• Slack Account: A Slack workspace and a channel where you want to receive notifications.
• Email Account (Optional):
  • Gmail Account: If you choose to send email confirmations via Gmail.
  • Microsoft Outlook Account: If you choose to send email confirmations via Microsoft Outlook.

Setup/Usage

1. Import the Workflow: Download the provided JSON file and import it into your n8n instance.
2. Configure the n8n Form Trigger:
   • Activate the "On form submission" node.
   • Note the webhook URL provided by this node. This is the endpoint your website's contact form should submit data to.
   • Define the expected fields for your form (e.g., name, email, message, sendConfirmation).
3. Configure Slack:
   • Open the "Slack" node.
   • Select or create your Slack API credential.
   • Specify the Slack channel where you want to post the form submissions.
   • Customize the message content to display the form data as desired.
4. Configure Email (Optional):
   • If using Gmail:
     • Open the "Gmail" node.
     • Select or create your Google OAuth2 credential for Gmail.
     • Configure the "To" field (e.g., {{ $json.email }} to send to the submitter's email).
     • Set the "Subject" and "Body" of the confirmation email.
   • If using Microsoft Outlook:
     • Open the "Microsoft Outlook" node.
     • Select or create your Microsoft OAuth2 credential for Outlook.
     • Configure the "To" field (e.g., {{ $json.email }} to send to the submitter's email).
     • Set the "Subject" and "Body" of the confirmation email.
   • Note: The workflow includes both Gmail and Microsoft Outlook nodes. You should enable and configure only one based on your preference and disable the other.
5. Activate the Workflow: Once all nodes are configured, activate the workflow.
6. Integrate with your Website: Update your website's contact form to submit its data to the webhook URL provided by the n8n Form Trigger. Ensure the field names in your form match the expected fields in the n8n Form Trigger node.