Twilio

Twilio provides APIs for SMS, voice, WhatsApp, email, and phone number verification. Connecting Twilio to Webflow lets you send an SMS when a form is submitted, confirm orders via text, verify phone numbers during signup, and deliver transactional emails triggered by site events. The connection works through automation platforms, Twilio's visual workflow builder, custom JavaScript, or direct API calls.

Marketing teams use the integration to trigger SMS alerts from contact form submissions. E-commerce managers add order confirmation texts for customers after purchase. Developers building membership sites implement phone number verification during signups. Agencies delivering client projects add automated communication workflows that go beyond Webflow's native feature set.

How to integrate Twilio with Webflow

What is Twilio? Twilio is a cloud communications platform that embeds SMS, voice, video, WhatsApp, and email into web applications via API. It also provides phone number verification through Twilio Verify and transactional email delivery through Twilio SendGrid. Twilio Functions, its serverless Node.js environment, acts as a backend for applications that cannot run server-side code on their own.

Teams connect Twilio with Webflow when site events need to trigger real-time communication. A form submission might need to alert a sales team via text. An e-commerce order might need to send a confirmation SMS to the buyer. A membership signup might need to verify the user's phone number before granting access. Each of these requires a server-side layer between Webflow's client-side code and Twilio's APIs.

The Twilio-Webflow integration supports 4 approaches:

• The Twilio Studio with Webflow form custom actions method lets you build visual SMS and voice workflows and connect them directly to Webflow forms.
• The custom code with Twilio Functions approach lets you write JavaScript in Webflow that calls a serverless Twilio backend for use cases like phone verification.
• The Zapier or Make path handles SMS notifications and CMS updates triggered by Webflow form submissions and orders without writing code.
• The Webflow and Twilio APIs give you direct access to CMS syncing, webhook-driven workflows, and multi-channel messaging, but require server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Route form submissions to Twilio Studio

Twilio Studio is a visual drag-and-drop workflow builder for SMS and voice flows on the Twilio side. When paired with Webflow's native form custom action feature, you can send form data directly to a Studio workflow without any middleware. This method works well when you need branching logic in your communication flow, such as sending different SMS responses based on form field values.

To create a Studio flow and connect it to a Webflow form:

1. In the Twilio Console, go to Studio > Flows, click Create new Flow, name it, and select Start from scratch.
2. Drag a Send Message widget from the widget library onto the canvas and configure the message body, "From" number (your Twilio number), and "To" number.
3. Click the Trigger widget and copy the REST API URL from the right panel.
4. In Webflow, select your form, open the settings panel, and remove any existing Webflow or email notifications.
5. Click "add" next to Send to, select Custom action, paste the Studio REST API URL, choose POST, and click Save.
6. Publish your Webflow site for the changes to take effect.

Two things to know about this approach. When you set a custom action on a Webflow form, submissions no longer appear in the Webflow form dashboard. The Studio REST API trigger also requires both "To" (recipient phone) and "From" (your Twilio number) parameters, so the form needs to collect the recipient's phone number. If the form does not collect phone numbers, use the Zapier or Make approach instead.

Add Twilio features with custom code

For use cases that go beyond simple SMS notifications, such as phone number verification, click-to-call buttons, or behavioral analytics, you can add Twilio functionality through JavaScript in Webflow's custom code in head and body tags or through Code Embed elements. Both approaches require a paid Webflow site plan. Custom code sections support HTML, CSS, and JavaScript only. They do not support server-side languages, which means Twilio API credentials must never be placed directly in Webflow code.

Call a Twilio Function from Webflow

Twilio Functions provides a serverless Node.js environment where your Twilio credentials stay secure on the server. Webflow pages send a fetch() request to the function URL, and the function handles the Twilio API call. This is the recommended approach for any Twilio feature that requires authentication.

To set up a Twilio Function and connect it to Webflow:

1. In the Twilio Console, go to Functions and Assets > Services and create a new service (for example, webflow-backend).
2. Click Add > Add Function, set a path like /send-sms, and write your function code using context.getTwilioClient().
3. In the service settings, check Enable ACCOUNTSID and AUTHTOKEN and add any additional secrets as environment variables.
4. Uncheck Check for valid Twilio signature since Webflow requests come from a non-Twilio domain. Click Deploy All and copy the function URL.
5. In Webflow, go to Site settings > Custom Code and add a <script> to the footer code section that listens for your form's submit event and sends a fetch() POST to your Twilio Function URL.
6. Click Save, then Publish your site. Custom code changes only take effect after publishing.

Because unchecking Twilio signature validation means any HTTP client can call your function, implement your own validation layer. Options include a shared secret header, CORS restrictions limited to your Webflow domain, or rate limiting within the function.

Embed Twilio Segment analytics

Twilio Segment tracks user behavior on Webflow pages through a JavaScript snippet. This enables page call tracking, button click tracking, and behavioral analytics that feed into downstream tools like Amplitude, HubSpot, and Slack. Follow Twilio's step-by-step recipe for this setup.

To add Twilio Segment to a Webflow site:

1. In the Twilio Segment workspace, go to Connections > Sources > Add Source and select JavaScript under the Website category.
2. Copy the JavaScript snippet from the setup screen.
3. In Webflow, go to Site settings > Custom Code and paste the snippet into the head code section.
4. Click Save Changes, then Publish the site.
5. Open the published site and confirm that Page calls appear in Segment's debugger.

Segment is a separate Twilio product from the Messaging and Verify APIs. It focuses on customer data collection rather than communication.

Embed widgets with Code Embed elements

For visual components like click-to-call buttons or chat widgets, use a Code Embed element to place HTML, CSS, and JavaScript directly on the canvas. The element accepts any valid HTML, CSS, and JavaScript, which makes it the right choice for self-contained third-party widgets that need to render in a specific location on the page. Use Code Embed elements when the widget needs to appear at a specific canvas position, and use the custom code in head and body tags approach when the script applies site-wide or does not produce visible output.

To add a widget via Code Embed:

1. Copy the widget embed code to your clipboard.
2. Open the add panel in Webflow and drag a Code Embed element onto the canvas.
3. Double-click the element (or select it and press Enter), paste your code, and click Save and close.
4. Publish your site to see the rendered widget. Code Embed elements do not render in the Webflow preview.

Code Embed elements are not available on the free Starter plan.

Connect Webflow forms to Twilio with Zapier or Make

Zapier and Make both support direct Webflow-to-Twilio connections, with pre-built templates or connector modules that require little to no code. This is the fastest way to send SMS notifications when someone submits a Webflow form or places an order. Zapier offers eight confirmed Webflow + Twilio templates, including the popular "Send new Twilio SMS messages for new Webflow form submissions" template. Make supports 40 Webflow modules and 26 Twilio modules that can be combined in custom scenarios.

To connect a Webflow form to Zapier:

1. Select your form element in Webflow, open the settings panel, click the "add" icon next to Send to, and select Zapier.
2. In Zapier, create a new Zap with Webflow as the trigger app and Form Submission as the trigger event.
3. Add Twilio as the action app, select Send SMS Message, and enter your Twilio Account SID, Auth Token, and phone numbers.
4. Map the Webflow form phone number field to Twilio's "To" field, then test and publish the Zap.

Zapier's confirmed Webflow + Twilio templates cover these use cases:

• Send SMS on new form submissions
• Send SMS on new e-commerce orders
• Create Webflow CMS items from Twilio call recordings
• Update live CMS items when inbound SMS messages arrive

In Make, a comparable scenario uses Webflow: New form submission or Webflow: New order as the trigger and Twilio: Create a Message as the action. That makes the Webflow-to-Twilio path explicit even when you build the automation from modules instead of a pre-built template.

Build with the Webflow and Twilio APIs

For direct access to communication workflows, CMS syncing, and multi-step verification flows, you can connect the Webflow and Twilio APIs directly through a server-side application. This approach suits developers building phone number verification for membership signups, two-way SMS workflows that update CMS content, or transactional email triggered by site events.

The relevant APIs include the Webflow Data API, Twilio messaging and verification endpoints, and related webhook systems.

The relevant APIs include:

• Twilio's Messaging API sends and receives SMS, MMS, and WhatsApp messages
• Twilio's Verify API handles OTP and two-factor authentication flows
• Twilio's SendGrid API sends transactional and marketing email
• Twilio's Voice API makes and manages phone calls
• Webflow's Data API manages CMS collections and reads form schemas
• Webflow webhooks trigger real-time events like form_submission, collection_item_created, and site_publish

The Twilio REST APIs covered in this guide use HTTP Basic Auth with an API Key SID and secret, while SendGrid uses Bearer token authentication. Webflow's Data API v2 uses Bearer token authentication.

Send SMS from Webflow form submissions via webhook

You can register a Webflow webhook that fires on every form submission and points to a Twilio Function or your own server endpoint. The endpoint parses the submission data, extracts the phone number, and calls Twilio's Messaging API.

To implement this:

1. Register a webhook using the Webflow API: send a POST request to https://api.webflow.com/v2/sites/{site_id}/webhooks with triggerType set to form_submission and url set to your Twilio Function endpoint.
2. In your Twilio Function, parse the incoming webhook payload. The form data arrives in payload.data with field names matching your Webflow form input names.
3. Call POST /2010-04-01/Accounts/{AccountSid}/Messages.json with the To, From, and Body parameters. The Messaging API expects application/x-www-form-urlencoded encoding, not JSON.

Phone numbers from Webflow forms often arrive without country codes. Twilio requires E.164 format (for example, +15551234567). Handle the formatting in your function by prepending the country code before passing the number to Twilio.

Add phone verification with Twilio Verify

Phone number verification requires two sequential API calls, so a backend is the recommended integration path, using either Twilio Functions or a custom backend.

To implement OTP verification on a Webflow page:

1. Create a Verification Service once by sending POST https://verify.twilio.com/v2/Services with your service configuration.
2. When a user enters their phone number on your Webflow page, client-side JavaScript calls your Twilio Function endpoint. The function sends POST /v2/Services/{ServiceSid}/Verifications with the To number and Channel (sms, whatsapp, call, or email). Verification codes expire after 10 minutes.
3. A second form step on the Webflow page collects the OTP code. Client-side JavaScript sends it to another function endpoint, which calls POST /v2/Services/{ServiceSid}/VerificationCheck with the To number and Code. The response returns approved if the code is correct.

IMB Bank's Webflow site uses this exact pattern, implemented by Digidop agency with Twilio Verify for fraud prevention on banking forms.

Send transactional email with SendGrid

Webflow form submissions can trigger transactional emails through Twilio SendGrid. The SendGrid API uses a different authentication method from other Twilio APIs: Bearer token instead of HTTP Basic Auth.

To send a transactional email from a Webflow form submission:

1. Create a dynamic email template in your SendGrid dashboard and note the template_id.
2. In your middleware function, parse the Webflow webhook payload and extract form field values. Field names in the payload must exactly match the name attributes of your Webflow form inputs. A mismatch silently breaks the integration.
3. Send POST https://api.sendgrid.com/v3/mail/send with the personalizations array containing recipient data, dynamic_template_data mapped from form fields, the from address, and your template_id.

This approach fits Webflow projects that need transactional email triggered by form activity or other site events.

Here's a production-ready pattern for sending transactional SMS via Twilio from Webflow Cloud using a TypeScript module that reads Twilio credentials from environment variables.

What you can build with the Twilio Webflow integration

Integrating Twilio with Webflow lets you add real-time communication to any site event without managing your own messaging infrastructure.

• SMS notifications on form submission: When a prospect fills out a contact form, an SMS reaches your sales rep's phone within seconds. Map the Zapier template to send the lead's name, email, and message directly in the text. Field mapping in the Zap connects each Webflow form input to the corresponding variable in the Twilio SMS body.
• Order confirmation via SMS: Send an SMS to the buyer the moment they place an order on your Webflow e-commerce store. Include the order number in the message body using form field mapping in Zapier or Make.
• Phone number verification for memberships: Add OTP verification to your Webflow membership signup flow using Twilio Verify. Users enter their phone number, receive a code via SMS or WhatsApp, and submit it before their account is created. This blocks fake signups and reduces bot traffic.
• Scheduled appointment reminders: Capture booking dates and phone numbers through a Webflow form, then trigger a scheduled SMS 24 hours before the appointment. Use Zapier's delay step or Twilio's message scheduling to control the timing.

If you need more control over multi-step verification flows or two-way SMS conversations, the API integration path covers those cases with full flexibility.