Publish & Embed

Once you've built a form, you publish it to make it accessible at a hosted public URL. From there, you can either share the URL directly or embed the form on any website. This page covers the publish flow, URL customization, and the six embed types.

Publish​

Click Publish in the form builder header.

The form is now live. The header replaces the Publish button with Copy URL and Unpublish:

• Copy URL opens the Form Integration modal with the public URL plus embed snippets
• Unpublish takes the form offline (visitors get a "form unavailable" message)

You can keep editing a published form. Saved changes apply to new visitors immediately — there's no "deploy" step.

The Public URL​

Every form gets a hosted URL of the form:

https://yourdomain.com/f/<urlSlug>

By default urlSlug is a 4-character auto-generated slug (e.g. OpSN). You can customize it from the Form Integration modal — pick any URL-safe slug (e.g. newsletter → https://yourdomain.com/f/newsletter).

URL slugs are unique within your account. If the slug you want is taken, the system will tell you.

Embed Types​

Click Copy URL to open the integration modal. Pick from six embed types — each renders the same form differently on a host page.

Standard​

Inline embed. The form renders directly inside the host page in a sized container.

<div id="votel-form-OpSN"></div>
<script src="https://yourdomain.com/form-embed/v1.js"></script>
<script>
  VotelEmbed.createWidget("OpSN", { width: "100%", height: "500px" });
</script>

Use for: lead-capture forms inside a landing-page section, contact forms on a page, anywhere you want the form to be part of the page's natural flow.

Full Page​

Takes over the entire page. The form renders as if it were the standalone hosted URL but inside the host site's domain.

<script src="https://yourdomain.com/form-embed/v1.js"></script>
<script>
  VotelEmbed.createFullPage("OpSN");
</script>

Use for: dedicated landing pages where the form is the only content.

Popup​

Modal overlay that opens on a trigger.

<script src="https://yourdomain.com/form-embed/v1.js"></script>
<script>
  VotelEmbed.createPopup("OpSN", { trigger: "exit_intent", delay: 0 });
</script>

The form renders in a centered modal with a dimmed overlay. Visitors close with Esc, an X button, or by clicking outside.

Use for: one-off lead-capture prompts on existing content pages.

Slider​

Slides in from the screen edge. Less intrusive than a centered popup.

<script src="https://yourdomain.com/form-embed/v1.js"></script>
<script>
  VotelEmbed.createSlider("OpSN", { slideFrom: "right", trigger: "scroll" });
</script>

Use for: less-aggressive lead capture, mid-content offers.

Popover​

A persistent floating button on the page. Clicking it opens the form in a small popover anchored to the button.

<script src="https://yourdomain.com/form-embed/v1.js"></script>
<script>
  VotelEmbed.createPopover("OpSN", { buttonText: "Help", buttonColor: "#3b82f6" });
</script>

Use for: support widgets, "ask a question" buttons.

Side Tab​

A persistent thin tab on the side of the screen. Clicking it slides out the form.

<script src="https://yourdomain.com/form-embed/v1.js"></script>
<script>
  VotelEmbed.createSideTab("OpSN", { text: "Feedback", color: "#000", position: "right" });
</script>

Use for: persistent feedback collectors, "request a demo" tabs.

Embed Mode Detection​

When a form is embedded, the public form sets ?embed=true in the iframe URL. The form detects this and:

• Adds a votel-embed body class for embed-specific CSS overrides
• Sends post-message events to the parent (source: 'votel-form-embed') for loaded, resize, submitted
• Auto-resizes its iframe to match content height as fields render or change

This means the embedded form scales nicely on the host page without ugly scrollbars.

Workflow & CRM Wiring​

Publishing also makes the form available as:

• A trigger source for workflows — your workflows can listen for Form Submitted events filtered to a specific form
• A lead-capture endpoint — submissions automatically create or match leads in your CRM

See Submissions for what happens to the data after submit.

Worked Example: Embed a Newsletter Form on Your Homepage​

Goal: Drop your newsletter form into the footer of https://yoursite.com.

Steps:

1. Open the form, click Publish.
2. Click Copy URL. In the Embed section, pick Standard.
3. Configure: Width 400px, Height 300px.
4. Copy the snippet.
5. Paste into your homepage's footer HTML.
6. Save your homepage.

Visitors see the form right in your footer, fill it out, and the submission lands in your CRM as a new lead.

Next Steps​

• Submissions — Where the data lands and how to read it
• Form Settings — Submit text, success message, redirect
• Integrations — Workflows, contact mapping, payments