Embedding forms
Learn how to embed forms on your website using widgets with customizable display modes
What is embedding?
Embedding allows you to integrate your forms directly into your website without requiring users to visit a separate page. The Ask Users widget is a lightweight JavaScript snippet that displays your form in various modes based on your preferences.
Forms can be embedded as inline elements within your page content, triggered as popups when users click buttons, or displayed as modal overlays. This provides flexibility to match your website's user experience and design requirements.
Note: The widget script is optimized for performance, loads asynchronously, and won't impact your website's loading speed.
Display modes
The Ask Users widget supports three display modes, each suited for different use cases:
Inline mode
The form is embedded directly into your page content, appearing as part of your website's layout. This mode is ideal for dedicated form pages or when you want the form to be immediately visible.
Use cases:
- • Contact pages with embedded contact forms
- • Landing pages with lead capture forms
- • Feedback sections at the bottom of blog posts
- • Application or registration pages
Popup mode
The form appears in a small popup window when a user clicks a button or link. The popup slides in from the corner of the screen and can be minimized or closed. This is non-intrusive and keeps users on your current page.
Use cases:
- • "Contact us" buttons in navigation menus
- • Feedback buttons on any page
- • Newsletter signup prompts
- • Quick surveys or polls
Modal mode
The form appears as a centered overlay that covers the entire screen with a backdrop. This mode focuses the user's attention entirely on the form and is best for important forms that require immediate action.
Use cases:
- • Important announcements with signup forms
- • Exit-intent popups
- • Time-sensitive offers or registrations
- • Multi-step forms that need full attention
Installation steps
Follow these steps to embed your form on your website:
- 1
Get the embed code
Navigate to your form in the dashboard, click the "Embed" button, and copy the provided code snippet.
<script src="https://widget.askusers.org/widget.js" async></script> <div data-askusers-form="form-id-here"></div> - 2
Add script to your website
Paste the widget script in your HTML, preferably just before the closing
</body>tag. The script only needs to be added once per page, even if you have multiple forms. - 3
Add the form container
Place the form container
<div>wherever you want the form to appear on your page. Configure the display mode using data attributes. - 4
Test your form
Visit your website to ensure the form loads correctly and test the submission process.
Important: Form must be active
Make sure your form is activated in the dashboard before embedding. Inactive forms will not display or accept submissions.
Configuration options
Customize the widget behavior using these data attributes:
data-askusers-form
RequiredYour form's unique identifier. Get this from the embed code in your dashboard.
data-askusers-form="your-form-id"data-mode
OptionalDisplay mode for the form. Options: inline (default), popup, modal
data-mode="popup"data-trigger
OptionalCSS selector for elements that should trigger the form in popup or modal mode. Users click these elements to open the form.
data-trigger=".contact-button"data-position
OptionalPosition of the popup window. Options: bottom-right (default), bottom-left, top-right, top-left
data-position="bottom-left"data-auto-height
OptionalAutomatically adjust form height based on content. Options: true, false (default)
data-auto-height="true"Examples
Inline form
Display a form directly in your page content:
<div data-askusers-form="contact-form-123"></div>Popup triggered by button
Show a popup form when users click a button:
<button class="contact-btn">Contact us</button>
<div
data-askusers-form="contact-form-123"
data-mode="popup"
data-trigger=".contact-btn"
data-position="bottom-right">
</div>Modal with multiple triggers
Show a modal form triggered by any element with a specific class:
<button class="signup-trigger">Sign up</button>
<a href="#" class="signup-trigger">Join waitlist</a>
<div
data-askusers-form="waitlist-form-456"
data-mode="modal"
data-trigger=".signup-trigger">
</div>Auto-height inline form
Display an inline form that adjusts height automatically:
<div
data-askusers-form="feedback-form-789"
data-auto-height="true">
</div>Best practices
- Choose the right mode: Use inline for dedicated form pages, popup for non-intrusive forms, and modal for important actions requiring focus.
- Test on mobile devices: Ensure the widget displays correctly on mobile devices and tablets, not just desktops.
- Use clear trigger elements: Make buttons or links that trigger forms visually prominent and clearly labeled.
- Position popups thoughtfully: Place popups in corners that don't obstruct important content or navigation.
- Don't overuse modals: Modal forms interrupt user experience. Use sparingly and only for important actions.
- Match your brand: Customize form appearance in the dashboard to match your website's design and branding.
- Load script once: Add the widget script only once per page, even if embedding multiple forms.
- Test submissions: Always test the complete submission flow after embedding to ensure data is being captured correctly.