How to Add a Contact Us Widget to Your Site (and Change It Later)


A contact us widget is a contact form that lives inside a page you already have, instead of a separate page you send people to. You build it once, you get an embed, and you paste that embed where the form should appear.

Which kind you can use is decided by your site builder, not by the widget. Canva and Notion accept a link and draw a fixed box, so you get an inline form and nothing else. WordPress, Shopify, and Webflow accept HTML, so a popup or a corner button is also possible.

Start with that question. It is the one that costs you an afternoon if you get it backward.

What It Is, and What It Is Not

The alternative is a hosted form page: a URL you link to from a “Contact us” button. Most form builders hand you one of those. It works, and it is the fastest thing to set up.

It costs you the people who do not click.

A widget is the form itself, rendered in your page. Nobody navigates anywhere. That is the whole distinction, and it is why people search for “contact us widget” rather than “contact form”. They are looking at their own navigation and they want the thing behind that button to be on the page.

The Three Shapes

Inline sits in the page flow: on a contact page, at the bottom of a service page, under a product description. Lowest friction, highest intent, and the one shape that works everywhere.

Popup on click keeps the page clean and opens the form over it when someone presses a button. Useful where contact is a secondary action and the form would otherwise take up half the page.

Floating button parks a small button in a corner and follows the visitor down the page. Useful when you do not know which page someone will be on at the moment they decide to ask.

Most sites need the first one. The other two are worth wanting only if you have a reason.

Which Shapes Your Platform Will Actually Render

An embedded widget is an iframe. That is a box in your page with its own contents and its own address.

There are two kinds of embed block, and the difference decides everything here.

Some accept a URL and nothing else. Canva’s Embed element and Notion’s /embed block both work this way: you hand over a link, they draw a box. You cannot style that box and you cannot position it. Anything inside is confined to it, so a button meant to float in the corner of your page floats in the corner of a box in the middle of your page instead. A popup opens inside the box and gets clipped by it. That is not the widget misbehaving. There is nowhere for it to go.

Others accept HTML. WordPress’s Custom HTML block, Shopify’s Custom Liquid section, and Webflow’s Embed element all take markup, and markup means you can wrap the box. Wrapping the box is what makes a corner button or an overlay possible.

PlatformInline formPopup or floating button
CanvaYesNo, the Embed element takes a link only
NotionYesNo, /embed takes a link only
WordPressYesYes, via the Custom HTML block
ShopifyYesYes, via a Custom Liquid section
WebflowYesYes, via the Embed element, paid site plan

The Canva row is the one to read twice. Canva websites do not run raw HTML, JavaScript, or iframe code on any plan, paid ones included. The Embed element takes a link, and that is the whole surface. If you are on Canva, the inline form is the shape you have, and every page telling you a floating contact button “works on any website” has left that out. The Canva walkthrough has the rest of the constraints.

Fields: Name, Email, Message

That is the floor, and for most sites it is also the ceiling.

Every field you add is a small charge on the person writing to you, paid before you have found out whether you wanted to hear from them. Phone earns its place if you actually call people back. Subject earns its place if you route messages to different people. A dropdown of enquiry types earns its place at volume and only there.

The contact form starter ships with name, email, phone, subject, and message, which is more than most sites need. Deleting two of them is a thirty-second edit and it is usually the right first change.

Adding It

Build it once, then paste the embed wherever it goes.

1. fugte.com > Widgets > Contact Us Form > Start with this widget
2. Edit the heading, fields, labels, and colors in the Customize panel
3. Publish, then copy the hosted link and the embed snippet

Publishing gives you a stable address at fugte.net/w/<id>. Link-only platforms want that address. HTML platforms want the snippet.

Canva. Open your website design, add an Embed element from Apps, or paste the link straight onto the page. Paste the hosted link, size and position it like any other Canva element, publish the site. The Embed element works on free Canva accounts. There is no site-wide option, so a form you want on three pages goes onto each of the three.

Notion. Type /embed on the page, choose the Embed block, paste the hosted link. Drag the block handles to a height that fits the form, otherwise you get a scrollbar inside the embed. Works on free Notion plans, on shared pages, and on published Notion Sites.

WordPress. Add a Custom HTML block where the form should appear and paste the snippet. Use the block’s Preview toggle to check it in place, then publish. In the classic editor it goes in the Text tab; in Elementor, the HTML widget; in Divi, the Code module. No plugin. On WordPress.com specifically, custom embeds need a plan that allows custom code. Self-hosted WordPress has no such limit.

Shopify. Online Store > Themes > Customize, then add a Custom Liquid section or block where the form goes and paste the snippet. For a standalone page, open it in the page editor, switch to HTML view with the <> button, paste, save, preview. Your theme files stay untouched.

Webflow. Drag an Embed element from the Add panel to where the form sits, paste the snippet into the code editor, publish. The Embed element requires a paid Webflow site plan. On a free staging domain you can link to the hosted widget page instead.

Where the Messages Go

Two places, and knowing which is which matters more than it sounds.

The submission is stored against the widget, in the Database tab, behind your login. That is the record. You can read it, mark it, filter it, and export the collection to CSV, and it stays there whether or not any email was delivered.

The email is a notification, not the record. It goes to the address on your account. By default it deliberately does not contain what the visitor wrote: it tells you a submission arrived and points you at the dashboard, at most one per widget per fifteen minutes, so a burst does not flood you.

I made that the default deliberately. Email gets forwarded, quoted, and breached, and a contact form collects other people’s phone numbers.

If you would rather have the contents in the email, the way a Shopify contact form does it, turn it on at Database > the collection’s menu > Email settings. That switches to one email per submission, capped at 20 an hour, and when you hit the cap it sends you a notice instead of going quiet.

The limitation, since no page in this category states it: there is no per-form destination address. Notifications go to your account email, one recipient, and changing where they land means changing the address on the account (as of Aug 2026). If you need messages routed to three people by subject line, this is not that, and what you want is a helpdesk.

Spam, Briefly and Honestly

Crawlers find a contact form on a small site before customers do. The messages that follow offer SEO, web design, and something about crypto, and none of it means anything leaked. Three things help.

Take your email address off your public pages. A crawler wants a form endpoint and any string shaped like an address. The form is a target you can defend. A plain-text address is one you cannot: once it is scraped it is on a list and it stays there. This is free and has nothing to do with any product.

Use an invisible bot check instead of a puzzle. A visible CAPTCHA does stop automated submissions, and it also asks every real person to prove they are a person before they can talk to you. Some of them will not. Cloudflare Turnstile checks the browser and shows most visitors nothing.

Quarantine instead of deleting. A filter that silently drops things is worse than one that files them, because you never find out what it got wrong.

The starter runs Turnstile plus a rate limit of five submissions per widget per IP per minute, and anything it flags goes to a Spam tab beside the real submissions rather than into a void. You can add your own spam words in the Database tab so the terms in your particular flavor of junk filter themselves out from then on.

Where that falls down: none of it stops a person paid to type sales pitches into contact forms. Keyword filtering catches most of those, and “most” is the honest word.

The Part Nobody Writes About

Six months from now, someone asks you to add a budget field.

That moment is what decides whether today’s choice was a good one. Not the setup. Setup is fine on every option in this category: twenty minutes and a paste.

With pasted code, the HTML is sitting in your page. Adding a field means understanding HTML well enough to add one and wire it to wherever submissions go, or going back to whoever wrote it. If that was an AI chat, the session is gone, so you start a new one, describe what you had, and hope the replacement does not break the styling you spent an hour on. If it was a person, you are on their schedule and their rate.

With a hosted widget you open the widget, add the field, and save. The page does not change, because the page was never holding the form. It was holding a link to it. Every place you pasted that embed shows the new field on the next load. Nothing gets re-pasted, and on Canva and Notion nothing gets republished.

I built Fugte because that second version is the only genuinely hard part of this, so read the recommendation with that in mind. Every page selling a contact widget lists “edit it anytime” as a feature and then proves it with a screenshot of a settings panel. The free plan runs one live form, which is exactly one contact page, so you can test whether the claim holds before any of it costs anything (as of Aug 2026).

Where it falls down: hosted means the form loads from a domain that is not yours. If it goes down because I do, that is a real dependency, and you should weigh it rather than take my word that it will not happen. Code pasted into your own page carries no such dependency. It also permits no such edit.

Start With the Platform

If you are on Canva or Notion, you are building an inline form. Deciding that now costs nothing. Deciding it after you have built a floating button costs you the build.

If you are on WordPress, Shopify, or Webflow, build the inline form anyway. Add the corner button later, if the inline one turns out not to get used. Inline is the shape people fill in.

Then take your email address off your contact page. Of everything here, that is the only item that fixes something you cannot fix later.