Webflow Contact Form with Routing - Powered by Postmark

Webflow is a really powerful way to build websites without coding. However, sometimes you might want to supercharge the features of your website using a tool such as Autocode.

This app lets you create a contact us form in Webflow that routes emails to a different receiver depending on the department that the user sets when filling in the form. You're welcome to adjust and adapt this code to your own needs!

Setup

You will need

A Postmark account with a verified domain. You can test this app using emails on the same domain as yours while you wait for Postmark to approve your account.
A Webflow account - their free tier is enough to install and try out this app

Setting up Webflow

For the purposes of getting you up and running as quickly as possible, we'll duplicate a Webflow site which has a pre-setup form. Once you've completed this tutorial and verified your project is working as expected then you're welcome to recreate this form on an existing Webflow website.

Head over to this link and click the Clone in Webflow button. If you're not already logged in, you'll be prompted to login.

r 2. Click the blue Create Site button.

Enter a name for your website, then click Create site.

Okay, let's make it so our site is publicly accessible so we can test our form. Click the Publish button in the top right corner of Webflow's editor.

Make sure the box next to the automatically generated webflow.io domain is checked, then click Publish to Selected Domains.

Once your website has finished publishing, click the icon next to your webflow.io domain to open your form in a new tab. Don't test it yet - we still need to set things up on Autocode!

Awesome - our Webflow site is all setup and ready to go! Now lets install our Autocode app.

Installing this Autocode app

Scroll up on this page and click the green Install Free button.

Select the organization you'd like to install this app to, give your project a name, then click Next.

For both your Postmark and Webflow account, click the Link button, then the Link New Resource button in the popup that appears. Then, follow the instructions to connect your Postmark and Webflow account to your Autocode project.
- Make sure you connect to the Webflow site that contains the template you just cloned!

Once your page looks similar to the screenshot below, click Continue.

Enter the email you'd like your contact form emails to be sent by. This email should be sent by a domain that you own and that you've previously verified in Postmark. For example, if you have verified the example.com domain in Postmark, you might choose to send contact form emails from contact@example.com. Once you've entered your email address, click the green Install App button.

Your Autocode app is now installed! Now let's configure it so that our emails are sent to the right place.

Configuring your Autocode App

Open up the config.json file in your Autocode project.

For each of the three departments, set the email which contact form submissions should be sent to. If you're just testing out this app, you can set them all to the same value. We'll explain how to add custom departments later in this guide.

Phew, you made it! You should now be able to send emails using your contact form. If you run into an error, open up your functions/events/webflow/form_submission.js file inside Autocode and check its logs to see what went wrong.

Frequently Asked Questions

I already have an Webflow site - can I use a form on that site to send data to Autocode?
- Yep! We recommend first cloning our demo site while setting up this app so you can verify everything works as expected. Then, you can recreate the form in your own Webflow site. Please note that the Name and Type of each form input on Webflow must exactly match the ones shown on the demo form. Additionally, if you change the name of the form on Webflow, you'll need to update the name in the event trigger of the functions/events/webflow/form_submissions.js file.`
Can I add custom departments to my form?
- Yup! Simply add them as a value on the Department dropdown form in Webflow. Then, head back to Autocode and open up the config.json file. Inside that you can set your department's name and email by copying-pasting one of the existing departments. The "key" of the department that you set in config.json (existing keys are support, sales and legal) should match the Value of the department you just added to the dropdown in Webflow.