embed multi-step form

Here's how to embed a multi-step form, covering the general no-code path (works on WordPress and most site builders) and what to know regardless of platform.

Why multi-step matters, worth knowing before you build

• Splitting a long form into steps significantly reduces abandonment — users focus on one small section at a time rather than confronting a wall of fields. Formstack research cited across current sources shows multi-step forms can generate up to 300% more completions than an equivalent single-page form. A visible progress bar adds further motivation by showing exactly how much remains.

• General workflow (applies across most form builders — Jotform, WPForms, Elfsight, etc.)

Build the form in your chosen builder, adding all the fields you need

• Split it into steps — most builders use a "Page Break" (WPForms) or equivalent divider field that you drag between sections; some (Jotform) let you toggle an existing form directly into multi-step mode Enable a progress bar in the form's display settings, so respondents see how far along they are

Generate the embed code or link from the builder's Publish/Embed tab

• Paste the embed code into your site — the exact placement mechanism depends on your platform (see below)

WordPress-specific embedding, the most common case

• Via WPForms (as a native block): In the WordPress block editor, click the "+" icon to add a new content block, find the WPForms block under Widgets, select your multi-step form from the dropdown, preview it directly in the editor, then Publish/Update. Fully responsive on mobile with no additional coding Via a third-party builder's embed code (Jotform, Elfsight, etc.): Generate the embed snippet from the builder's Publish tab, then paste it into a Custom HTML block in the WordPress page editor, or into a widget-ready area (footer, sidebar) if you want it outside the main content flow. For more control, advanced users can insert the code directly into theme files or use a plugin that allows custom code injection

Non-WordPress sites (general HTML embedding)

• Most modern form builders generate a standard <iframe> or <script> embed snippet from their Publish/Share tab, regardless of platform — copy that snippet and paste it directly into your site's HTML wherever the form should appear. This works identically whether you're using a static HTML site, Webflow, Squarespace, or a custom CMS, since the embed code is just markup/JavaScript rather than platform-specific.

Display options beyond a plain inline embed

Several builders (EmbedSocial/EmbedForms, Elfsight) let you choose how the multi-step form appears once embedded, not just a static inline block:

• Inline section — embedded directly in the page content
• Floater — a persistent floating widget
• Button/banner trigger — a click-triggered popup rather than always-visible content

Design customization once embedded

• Custom CSS options (font, colors, submit button copy, logo, layout) are commonly available specifically so the embedded form visually matches your site rather than looking like an obviously third-party widget — worth checking whether your chosen builder supports this if brand consistency matters (this connects to the earlier custom-CSS discussion in this conversation regarding forms.app, 123FormBuilder, and similar tools).

Practical recommendation

On WordPress → WPForms (native block, no embed code needed) is the fastest, most integrated path; use a Custom HTML block for any other builder's embed code

Non-WordPress site → generate the standard iframe/script embed from your form builder's Publish/Share tab and paste directly into your site's HTML

Want a floating/popup display rather than a static inline form → check for widget display options (floater, button-triggered) specifically, not every builder offers this

Want the embedded form to visually match your site exactly → confirm custom CSS support before committing to a builder