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 into Microsoft 365 — a row in an Excel table, an event in an Outlook calendar, a file in OneDrive — or to an inbox or a webhook, embedded inline or behind a floating button.

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.

Form Builder itself, running here on a fictional host — the released bundle from our CDN, loaded the same way your own page would load it. The data behind it is sample data of our own invention; on your site the same component reads your Microsoft 365 tenant.

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.wpistatic.com/platform.js async></script>
<wpi-form embed-key="your-embed-key"></wpi-form>
One loader for every component — it finds the element and fetches this bundle itself. 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 the destinations you configure: a row appended to an Excel table in OneDrive, an event written into an Outlook calendar, a file written into a OneDrive folder, an email address, a webhook, or several of each. 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
An Excel workbook in OneDrive, appended a row per submission, An Outlook calendar, written an event per submission, A OneDrive folder, written a file per submission, 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, none of these are customers, and the marks beside them are our own drawings rather than any vendor's logo. 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.

10 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. Delivery into Microsoft 365

    A submission can be appended as a row to a table in an Excel workbook on someone’s OneDrive, written as an event into an Outlook calendar — optionally inviting the person who submitted — or written as a JSON or text file into a OneDrive folder. The Excel row is matched to the table’s real header row rather than dropped in field order, so an unanswered optional question does not shift every later answer into the wrong column.

  6. 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.

  7. Delivered, never stored

    A submission is passed straight to the destinations you configure and no copy is kept on our side. Set at least one destination, because delivery is the record — this is a form component, not a records system.

  8. 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.

  9. 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.

  10. 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.

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 — a table in an Excel workbook on OneDrive, an Outlook calendar, a folder in OneDrive, an email address, a webhook, or several of each. We keep no copy, so configure at least one destination before you publish the form.

Do you keep a copy of what people submit?

No. A form widget holding other people's names, emails and message bodies is a liability rather than a feature, so we do not hold one. Configure an email or webhook destination and the 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.

Which destinations need a Microsoft connection?

The three that write into Microsoft 365 — Excel, Outlook calendar and OneDrive — and email delivery when it sends through a mailbox rather than 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. A submission written to an Outlook calendar can also invite them to the event.

Can submissions go straight into a spreadsheet?

Yes — an Excel workbook on a OneDrive you name, into a table inside it. The workbook and the table are created if they are not there yet, and each submission appends a row. Answers are matched to the table’s header row by name rather than by position, so you can reorder the columns or add your own without later rows landing under the wrong headings. Renaming or deleting a column a question relies on is the one edit that stops delivery, and it says which column it could not find.