jobber

Webflow forms collect submissions, but they don't create client records or trigger the scheduling and quote follow-up that field service teams depend on. Businesses that run their marketing site on Webflow end up copying website leads into their operations software by hand, and every manual re-entry adds delay between a homeowner requesting a quote and a crew getting booked.

Connecting Jobber with Webflow closes that gap. You can embed Jobber's request forms directly on your Webflow pages, so submissions land in Jobber as structured work requests. You can also route native Webflow form submissions into Jobber automatically, creating client records and requests the moment someone hits submit.

This integration fits service business owners who want fewer missed leads and faster quote turnaround. Webflow agencies and freelancers also use it when building conversion-focused sites for HVAC, plumbing, landscaping, cleaning, and electrical companies. Marketing managers who own website conversion and lead response times benefit from the same setup.

How to integrate Jobber with Webflow

What is Jobber? Jobber is field service management software for home and commercial service businesses. It handles scheduling and dispatch, quoting, invoicing, client management, online booking, and payments from a single platform. Jobber serves over 50 industries, including HVAC, plumbing, landscaping, cleaning, and electrical contracting.

Teams pair Jobber with Webflow when the marketing site needs to feed the operations pipeline directly. A quote request submitted on a Webflow landing page can become a Jobber work request and client record, with scheduling handled in Jobber. Jobber has no Webflow Marketplace app, so you build the connection with the methods below.

The Jobber-Webflow integration supports three approaches:

• Embedded Jobber forms place Jobber's request form on any Webflow page with a Code Embed element and copy-paste HTML.
• Zapier connects native Webflow form submissions to Jobber client and request creation, and can push Jobber events back to Webflow.
• The Webflow and Jobber APIs give you full control over bidirectional data sync and custom booking flows, and require server-side development.

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

Embed Jobber request forms with Code Embed

Paste Jobber's HTML snippet into a Webflow Code Embed element; no code beyond copy and paste is required. Jobber generates an HTML embed snippet for its request forms, described in the Add your Request and Booking Forms to your Website help article. You paste that snippet into a Code Embed element in Webflow, and the form renders on your published site. Code Embed requires a Core, Growth, Agency, or Freelancer Workspace plan, or an active Site plan. The free Starter plan can't use it.

To set up the integration:

1. In Jobber, go to the Gear Icon, then Settings > Requests and Bookings.
2. Hover over the form, open the More actions menu (…), and click Share links.
3. Click Copy code to grab the HTML embed snippet.
4. In Webflow, open the Add panel and drag a Code Embed element onto the page.
5. Paste the snippet and publish the site.

Know these limitations before you build around the embed:

• Payment method fields don't display on embedded forms. Clients add payment methods through Jobber's Client Hub instead.
• The form renders only on the published site, not while you're designing in Webflow.
• A Code Embed element holds up to 50,000 characters.
• Request forms are available on all Jobber plans (Core, Connect, Grow, and Plus).

These constraints shape when the embed is enough; when you need payments collected on-site, route that flow through Client Hub or the API path instead.

Add code through site settings

For site-wide scripts rather than a placed form, use Webflow's Custom code in head and body tags fields instead of a Code Embed element. Go to Site settings > Custom code for site-wide head and footer code, or use Page settings for page-specific code.

To add code this way:

1. Open Site settings > Custom code (or Page settings for a single page).
2. Paste your code into the head or footer field. Each field holds up to 50,000 characters.
3. Save and publish the site.

These fields support HTML, CSS, and JavaScript only, with no server-side languages, and carry the same paid-plan requirement as Code Embed.

Connect Webflow forms to Jobber with Zapier

Zapier offers an official Jobber connector and a pre-built Webflow-to-Jobber template. The Jobber and Webflow Zapier page includes a ready-made Zap called "Create new Jobber clients from new Webflow form submissions." All 11 Jobber triggers on Zapier are instant, per Zapier's Jobber setup guide, and your Jobber account must be on a Connect, Grow, or Plus plan. The Core plan isn't listed as supported.

Useful trigger-action pairings include:

• A new Webflow form submission can create a client, find or create a client, or open a request in Jobber.
• A new Webflow form submission can add tags to a Jobber client for lead routing and segmentation.
• A newly created Jobber client can generate a new item in the Webflow CMS.
• A closed Jobber job can update a Webflow CMS item to publish a completed-project page.

viaSocket hosts similar named Webflow-Jobber templates, including "Create Item in Webflow when New Client Is Created in Jobber," if you already work in another automation tool.

Build with the Webflow and Jobber APIs

The API path supports fully custom booking interfaces and bidirectional sync between Jobber records and Webflow CMS content. Jobber provides shareable and embeddable request and booking forms, but embedded forms drop fields like payment methods, and direct-link booking sends customers into Jobber's hosted flow. A branded booking experience that stays on your own domain requires a custom build against Jobber's GraphQL API, which means server-side development to handle OAuth token refresh and webhook processing.

Custom builds connect operations records, site data, CMS content, and event triggers across a few API surfaces. The Jobber GraphQL API handles clients, requests, quotes, jobs, and invoices through a single endpoint at POST https://api.getjobber.com/api/graphql. On the Webflow side, the Webflow Data API works with CMS collections and form submissions, while Webflow webhooks fire real-time events between the two systems.

Jobber uses OAuth 2.0 authorization code grant, documented in the app authorization guide. Access tokens expire after 60 minutes, and refresh token rotation is on by default, so build token refresh into your backend from day one.

Send Webflow form submissions to Jobber

This flow turns a native Webflow form into a Jobber client-creation pipeline. Webflow's form_submission webhook supports filtering by form name, which matters when your site has contact, careers, and quote forms and only the quote form should route to Jobber.

To implement this:

1. Register a webhook with POST https://api.webflow.com/v2/sites/{site_id}/webhooks and set triggerType: "form_submission". This requires the sites:write scope, per the webhook creation reference.
2. Receive the payload at your endpoint. Submitted field values arrive in payload.data, with field metadata in payload.schema, as documented in the form submission event reference.
3. Map the fields and call the clientCreate mutation at POST https://api.getjobber.com/api/graphql. Send Authorization: Bearer <ACCESS_TOKEN> and the required X-JOBBER-GRAPHQL-VERSION header.

The mutation looks like this:

mutation {
  clientCreate(input: {
    firstName: "Jane"
    lastName: "Doe"
    companyName: "Jane's Automotive"
    emails: [{ description: MAIN, primary: true, address: "jane.doe@example.com" }]
  }) {
    client { id firstName lastName }
    userErrors { message path }
  }
}

One useful side effect is that Jobber automatically records your app name in its Lead source field for clients created after September 16, 2024, giving you lead attribution at no extra work.

Sync Jobber records to the Webflow CMS

This flow keeps Webflow content in step with Jobber data, for example publishing client or job records to a CMS-driven page. Jobber's webhook payloads contain only identifiers, so every event requires a follow-up GraphQL query to fetch the actual data.

To implement this:

1. Subscribe your app to the CLIENT_CREATE or CLIENT_UPDATE webhook topics, following Jobber's webhook setup guide.
2. Verify each delivery by validating the X-Jobber-Hmac-SHA256 header against your OAuth client secret. Respond within 1 second and process asynchronously.
3. Query the full record with the itemId from the payload, since the webhook body carries IDs only.
4. Create the CMS item with POST https://api.webflow.com/v2/collections/{collection_id}/items (staged draft) or the /items/live variant for immediate publish, per the create item reference. Updates use PATCH /v2/collections/{collection_id}/items/{item_id}.
5. Publish staged items with POST /v2/collections/{collection_id}/items/publish, then display them on the site with a Collection List.

Webflow's Data API has no upsert endpoint, so your middleware must track the Jobber itemId to Webflow item_id mapping to choose between create and update. Jobber webhooks use at-least-once delivery, so the same event may fire more than once and your handler must be idempotent.

What you can build with the Jobber Webflow integration

Integrating Jobber with Webflow lets you turn website visits into scheduled work without manual lead entry or an off-platform form builder.

• Quote request capture on service pages: Embed Jobber's request form on a plumbing or HVAC services page so visitors submit structured job details, and Jobber's Valor Plumbing case study shows how the work request feature captures the information a crew needs to quote.
• Automatic client creation from Webflow forms: Wire a Webflow contact form to Jobber's Create Client action through the pre-built Zapier template, so a landscaping estimate form creates a tagged Jobber client the instant someone submits.
• Job gallery pages fed by Jobber: Use the Job Closed trigger or the API sync to publish completed projects as CMS items and populate a before-and-after gallery that updates itself as crews finish work.
• On-site booking experiences: Embed Jobber's booking form when the standard form is enough, or build a custom booking interface with the Jobber GraphQL API so customers schedule without relying on Jobber's hosted booking flow. The whole journey stays on your domain.

If you need more control over on-site booking or bidirectional data sync, the API path covers those cases. To wire the simpler lead-capture flow first, see how to send Webflow forms via Zapier before adding a Jobber connection.