Using WordPress? Every integration here is also available as a plugin. Browse the plugin store →

Released component

Form Builder

Form Builder makes multi-step forms and quote calculators that deliver each submission to your inbox or a webhook, embedded inline or behind a floating button.

Ask about Form Builder Browse the plugin store

Form Builder has no WordPress plugin equivalent — it exists as a web component only. The component platform is in pre-launch, so interest is collected through the contact page rather than through a signup.

northgate-roofing.example/get-a-quote
northgate roofing
Roof survey — step 2 of 3 Multi-step, with a live calculation
Estimated total 4,820
Continue Delivered to an inbox or a webhook, not accumulated in the site.

A drawing of Form Builder on a fictional site, in our own tokens rather than a customer’s brand. The released component renders live Microsoft 365 data; this frame shows its arrangement only.

Putting it on the page

What you paste into the page.

Two lines, and neither of them is a build step. Everything the component shows is resolved from the key at request time, so the markup on the page is the last markup anyone writes. 

<script src="https://cdn.wpintegrate.com/v1/form.js"></script>
<wpi-form embed-key="your-embed-key"></wpi-form>
Illustrative markup — cdn.wpintegrate.com stands in for the bundle host. The real snippet, carrying your own embed key, comes from the builder.

  1. The script tag

    One bundle for one component. It defines the custom element and does nothing else — no framework, no build step, and no change to how the rest of the page is built.

  2. The element

    An ordinary HTML tag, placed wherever the component should appear — including inside a page builder’s raw-HTML block, a shortcode, or a template partial.

  3. The embed key

    The key resolves to one configured instance — the Microsoft 365 source, the arrangement, the theme, and the domains allowed to render it. Change any of those and the page itself never has to be edited again.

What it does

How it works

The Form Builder component composes a form from typed fields — text, choice, slider, image choice and calculation among them — and delivers every submission to an email address, a webhook, or both. Conditional rules show and hide fields as the visitor answers, and calculation fields evaluate a formula over other fields to produce a total that updates while they type.

Why it exists

Most site forms are either a plain contact box or a plugin that keeps every submission in the website’s database forever. This does the harder half — branching questions, live pricing, multi-page flows — and treats a submission as something to deliver rather than something to accumulate.

Element
<wpi-form>
Reads from
A Microsoft 365 mailbox with Mail.Send, for email delivery, Webhook endpoints, Your own SMTP server
Arrangements
3 in the builder
Graph access
managed or proxy — the tenant chooses

Where it runs

Anywhere you can paste two lines of HTML

A custom element needs no build step and no framework, so where your site is built is not a question you have to answer before this one.

  • WordPress
  • Webflow
  • Squarespace
  • Shopify
  • Wix
  • Astro
  • Next.js
  • Drupal
  • SharePoint pages
  • Plain HTML

Named as examples of places HTML can be pasted. No partnership is implied and none of these are customers. WordPress is the one that gets more than an embed — the same Microsoft 365 jobs also ship as plugins with a Gutenberg block.

In detail

Everything Form Builder does.

9 capabilities, every one of them resolved from the embed key rather than written into the page.

  1. Twelve field types

    Text, long text, email, phone, number, select, checkbox, radio, slider, image choice, section heading, and a calculation field. Each field can be full, half or third width within its row.

  2. Calculations that update as you type

    A calculation field holds a formula referencing other fields by id, with a prefix, a suffix and decimal places — so a quote total, a subtotal or a score updates while the visitor is still filling the form.

  3. Conditional show and hide

    Any field can be shown or hidden by rules over other fields’ answers, matched on all or any, using contains, equals, starts-with, ends-with, empty and their negatives.

  4. Vertical, two-column or multi-step

    Stacked one field per row, a responsive two-column grid, or a wizard with named pages, a progress bar and per-step titles and descriptions.

  5. Email and webhook delivery

    Send to an owner address with your own subject and message, auto-reply to the person who submitted, and POST to webhooks signed with an HMAC secret. Email can go through your own SMTP server instead of the platform sender.

  6. Submissions are held for seven days

    Recent submissions are listed in the dashboard and exportable as CSV, then deleted. Email or a webhook is where the permanent copy belongs — this is a form component, not a records system.

  7. Inline or floating

    Render the form in the page, or as a launcher button with a label of your choosing that opens it in a fixed panel in a corner.

  8. Choose what happens on success

    Show a rich-text confirmation in place of the form, or redirect to a URL of your own, optionally in a new tab with a thank-you message left behind.

  9. Domain allowlist, GTM and custom CSS

    The embed renders only on domains you list, a Google Tag Manager container id can be attached, and custom CSS covers anything the settings do not.

Say what you need it to do.

Form Builder exists as a web component only, and the component platform is in pre-launch. Interest arrives as email rather than as a signup, and somebody reads it.

Ask about the component

Reaching your tenant

Two ways for us to reach Graph. One of them never lets us.

Every tenant runs in one mode or the other, and the choice belongs to your IT rather than to us. It is the reason this works inside organisations that will not delegate Graph access to a vendor.

managed

We hold the credentials

WPIntegrate runs the client-credentials flow for your tenant. Your administrator grants consent once and is not asked again.

proxy

You hold the credentials

You supply a base URL and an API key for your own gateway. We store that key encrypted at rest and never hold a Graph token at all.

Arrangements

Pick the shape that fits the page

Each of these is a setting on the instance, not a different component — the source, the theme and the embed key stay the same when you change it.

  • Vertical — one field per row
  • Horizontal — responsive two-column grid
  • Multi-step wizard with a progress bar

Questions

The things people ask before they buy.

If yours is not here, ask it — the answers come back from a person rather than a form.

Where do submissions go?

To the destinations you configure — an email address, a webhook, or several of each. A copy is kept in the dashboard for seven days and then deleted.

Why only seven days of storage?

Because a form widget holding customer data indefinitely is a liability rather than a feature. Configure an email or webhook destination and the permanent record lives in a system you already own and already secure.

Can the form price something?

Yes. Calculation fields evaluate a formula over other fields, so sliders and choices drive a running total the visitor sees before they submit.

Does email delivery need a Microsoft connection?

Only for email destinations, which send through a mailbox holding the Mail.Send permission or through your own SMTP server. A form that delivers by webhook alone needs no connection at all.

Can respondents get a confirmation email?

Yes. An auto-reply with its own subject and message can be sent to the address given in the form’s email field.