Create a pop-up contact form in Webflow

Pop-up contact forms are one of the most effective ways to capture leads on your website. But building them in Webflow? That's a different story.

You'll need to manually create div wrappers, configure positioning and animations, style close buttons, and set up custom interactions just to get a basic popup working. It's time-consuming and technical.

With Tally, you can create a professional pop-up contact form in minutes. Build your form, choose when it should appear (on page load, on scroll, on exit intent, or on button click), and embed it into Webflow with a simple code snippet. No complex setup, no design headaches, just a conversion-ready popup that works.

Create forms with file upload in Webflow

Create a Contact Form in Tally Create the popup style you need When should the popup appear?Other settings to further customize your popup form Embed your popup form in Webflow Connect to your favorite tools with native integrations & automations Create a free Tally form

Create a Contact Form in Tally

Start by creating a form in Tally and adding all the forms that you want to have in the Contact Form. Or you could just use our Contact Form Template.

Create the popup style you need

Now that your form is ready, you can publish it and go to the Share tab. There you can select the way in which you want to embed your form:

Then select the Popup option. Tally gives you full control over when and how your pop-up contact form appears.

When should the popup appear?

Choose the trigger that best fits your website's goals and user experience:

On page load The pop-up appears as soon as someone lands on your page. This works well for important announcements or high-priority offers, but use it sparingly to avoid disrupting the browsing experience.

On scroll The pop-up triggers after a visitor scrolls a certain percentage down the page or reaches a specific pixel depth. This is ideal for engaging users who are already interested in your content and more likely to convert.

On exit intent The pop-up appears when someone is about to leave your site (detected by mouse movement toward the browser's close button or address bar). This is a last chance to capture leads who might otherwise leave without taking action.

On button click The pop-up opens when a visitor clicks a specific button or link on your page. This gives users full control and works perfectly for "Contact Us" or "Get a Quote" buttons where people actively want to reach out.

You can also customize the timing delay for each trigger, ensuring your pop-up appears at exactly the right moment without feeling intrusive.

Other settings to further customize your popup form

Beyond choosing when your pop-up appears, Tally offers several settings to customize the experience:

Position Choose whether to display your pop-up in the bottom right corner or centered on your website.

Width Adjust the width of your pop-up to fit your content and design preferences.

Hide form title Remove the form title from your pop-up for a cleaner look.

Align content to the left By default, content is centered. Enable this option to align everything to the left, especially useful for wider pop-ups.

Dark overlay Add a dark overlay over your website content to make your pop-up stand out and draw focus.

Emoji Add an attention-grabbing animated emoji to your pop-up. Choose from animations like wave, tada, heart-beat, spin, flash, bounce, rubber-band, or head-shake.

Hide on submit Configure how many seconds to wait before automatically closing the pop-up after someone submits the form. Set to 0 seconds for instant closing.

Show only once Enable this to display the pop-up only once per visitor. Note that clearing browser cache or switching browsers will show the pop-up again.

Don't show after submit Prevent the pop-up from appearing again after a visitor has already submitted the form.

Embed your popup form in Webflow

Once everything is updated to your liking, go over to Webflow to embed your form as follows.

Go back into Webflow and drag a Code Embed element into your existing design or create a new blank page for a full page embed.

Simply paste the code snippet into the HTML Embed Code Editor that pops up. Click Save & close.

From the top right click Publish → Publish to Selected Domains and check out the published result.

Connect to your favorite tools with native integrations & automations

Now, where to send your form submissions to? With Tally you can automate workflows with ease. No more manual data entry or copy-pasting. Connect your form to Zapier, Notion, Airtable, Google Sheets, and 1000+ tools.