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!
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.
2. Click the blue
Create Site button.
- Enter a name for your website, then click
- 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
- 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
- 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
email@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
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
- 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
legal) should match the
Value of the department you just added to the dropdown in Webflow.