Create a pop-up contact form in Webflow

Show a contact form as a popup on a Webflow site: choose the trigger, position and look in the embed dialog, then paste one snippet into Webflow.

A contact form that opens over the page, rather than sitting on it, is one of the better ways to catch a visitor at the right moment. Building one by hand in Webflow means wrapper divs, positioning, a close button, animations and custom interactions before the form itself is even in place.

Tinyform has that machinery already. Build the form, pick when the popup should open (on page load, after scrolling, on exit intent, after a delay, or on a click), and paste one snippet into Webflow.

Create the contact form

Start at /forms/<id>/edit and add the questions the contact form needs: a name, an Email question, perhaps a dropdown for the subject and a long-answer question for the message. The template gallery has a contact form to start from if you would rather not begin blank.

Set up the popup

Press Publish, open the Share tab and choose Embed Form. The embed type is chosen at the top of the dialog.

Set it to Popup. The rail on the left holds every setting, and the pane on the right previews the popup on a mock page so you can see where it lands and what it covers.

When should the popup open?

The Open control decides the trigger. Pick the one that fits the page:

On page load The popup appears as soon as the page is ready. Good for something every visitor should see, and worth using sparingly.
After elapsed time The popup opens after a delay you set in seconds (3 by default), once the visitor has had a moment with the page.
After scrolling The popup opens once the visitor has scrolled a share of the page (50% by default). Somebody that far down is already interested.
On exit intent The popup opens when the pointer leaves the top of the window, heading for the tab bar or the address bar. A last word before they go. Touch devices have no pointer, so this trigger never fires there.
On button click The popup opens when a visitor clicks a button or a link on the page. The visitor is in control, which is the right fit for a "Contact us" or "Get a quote" button.

Each automatic trigger fires at most once per page view.

Other settings

Below the trigger, the rail offers:

Position Bottom right corner or Center. A centred popup always dims the page behind it.
Width The panel's width in pixels, 376 by default.
Hide form title Leave the form's title out of the panel.
Align content to the left Content is centred by default. Left alignment reads better in a wide panel.
Dark overlay Dim the page behind a corner popup while it is open.
Emoji A bubble on the panel's corner with an emoji of your choice and an animation: wave, tada, heart-beat, spin, flash, bounce, rubber-band or shake, or none.
Hide on submit Close the panel once the form has been submitted, after a delay you set in seconds. At 0 it closes at once. On by default.
Show only once Open the popup only once per visitor, remembered in their browser. Clearing site data or switching browsers shows it again.
Don't show after submit Never reopen the popup for a visitor who has already submitted the form.

The last two apply to the automatic triggers only. A visitor who clicks a button has asked for the form, and gets it.

Embed the popup in Webflow

Once the preview looks right, press Get the code and copy the snippet. For a popup that opens on its own, the snippet is a script tag and a small config object; for one that opens on click, it is the script tag plus a button and a link, either of which you can use.

Add the snippet to Webflow
Paste it into a Code Embed element on the page, or, for a popup that should be available on every page, into the site's custom code in its settings.
Save
Press Save & Close on the embed editor.
Publish
Press Publish at the top right, choose the domains, and open the live page to try it.

For a click trigger, you can also make one of Webflow's own buttons open the popup: give it the data-tinyform-open attribute from the snippet, or link it to the #tinyform-open=... address the snippet's link carries.

Send the submissions on

Every fill lands in the form's Submissions tab. A webhook posts each one to an address of your choosing as it is made, and the REST API reads them back. Direct connections to the tools below are on the way; the Integrations section shows what is live today.