How to Embed a Form on Your Website: Inline, Popup, Slide-in or Button

To embed a form on your website, copy the form's embed code and paste it into your page: where the form should appear for an inline form, or once anywhere on the page for a popup, slide-in or floating button. This guide shows the four ways a Vonza form can appear, how to make a popup open on its own, and where the code goes on most websites.

Get the embed code

Publish your form first; a draft has no public link yet. Then open Share on the form. The share window has the form's link, a QR code and the embed options. Pick how the form should appear, adjust the settings for that mode, and copy the code. A live preview shows the form on a sample web page as you change things.

The four ways a form can appear

• Inline: the form sits inside the page, between your other content, like a section. Best for a contact page, a booking page or a signup page where the form is the point of the page.
• Popup: the form opens in a window over the page. Best for an offer, a lead magnet or a waitlist you want people to notice.
• Slider: the form slides in from the side as a panel, so visitors can still see the page behind it. Gentler than a popup, good for a newsletter signup or a quick survey.
• Floating: a button stays in the corner of the screen and opens the form when clicked. Good for a "Contact us" or "Get a quote" form that should be one click away on every page.

For a popup, a slider and a floating button you can set the button text (the default is "Open form") and its colour.

Make a popup or slide-in open by itself

Popups and slide-ins open in one of four ways:

• Button: visitors click a button to open the form.
• After a delay: the form opens after a number of seconds you set.
• Halfway down: the form opens when visitors scroll halfway down the page.
• On exit: the form opens when visitors move to leave the page.

A few habits keep a popup helpful rather than annoying. Give people time to read before it opens, so a delay or the halfway trigger usually suits a blog post better than an instant popup. Use exit intent for a last offer, not for your main signup. And keep the form inside short: an email and one question is plenty for a popup.

Script or plain iframe

The code comes in two versions:

• Script, fits its height: an inline form grows and shrinks to fit its questions, so there is never an inner scrollbar. Popups, slide-ins and floating buttons use this version.
• Plain iframe: a fixed frame for sites that only accept iframes.

Where to paste the code

Most website builders and content systems have a block for code: it may be called HTML, custom code, code or embed. The steps are the same everywhere:

1. Open the page in your website editor.
2. For an inline form, add an HTML or code block where the form should appear, and paste the code into it.
3. For a popup, slide-in or floating button, paste the code once on the page. Just before the closing </body> tag works everywhere, and many builders have a site-wide or page-wide setting for code in the footer.
4. Save, publish the page, and open it in a private window to check the form appears.

If your site has no place for code, link to the form instead. Every Vonza form has its own page at /f/your-form-name on your site, so a button, a menu item or a link in an email can open it directly. The form also has a QR code as a PNG or SVG for posters, flyers and printed menus.

Pass details into the form

Two extras help when the form sits on a page you control:

• Fill from the link: switch it on for a question or a hidden field, and a value in the link fills it in, such as a campaign name or the product someone was looking at. The embed code can also pass your page's own link parameters through to the form.
• Record link parameters: names in the form link, such as ref or campaign, are saved with each response, and utm_ parameters are always recorded.

For developers, the page that holds the form also receives a vz-forms:submitted event when someone sends the form, which you can use to show your own message or move to a next step.

What happens after someone submits

An embedded form works just like the form on its own page. Every respondent who leaves an email becomes a contact in your CRM, tagged with the tags you choose, and an automation can follow up. You get an email for each response, and the analytics page shows embedded visits among its traffic sources.

Next steps

Need a form to embed? See how to create an online form, or start from one of the form templates. For forms built to collect leads, popups and slide-ins included, read about lead generation forms, or see everything in Vonza Forms.