Embed a slider

A slider displays a hosted Makeform form in a side drawer. Use it when you want visitors to open a form without leaving the page.

Open a slider from a button

Add the slider attribute to a button and load the Makeform embed SDK. This example opens a 400px-wide slider from the left.

<button
  data-makeform-slider="https://makeform.ai/e/FORM_ID?__mf_modal_embed=1"
  data-makeform-width="400"
  data-makeform-position="left">
  Open form
</button>
<script async src="https://www.makeform.ai/widgets/embed.js"></script>

The data-makeform-slider attribute takes the form URL. You can set the width in pixels from 360 to 800 and choose left or right for the position. The default position is right. A slider always has an overlay.

Open a slider automatically

Add a config object before loading the SDK. This example opens a 400px-wide slider from the right after five seconds and opens it only once per browser.

<script>
  window.MakeFormConfigs = window.MakeFormConfigs || [];
  window.MakeFormConfigs.push({
    formId: "FORM_ID",
    slider: {
      width: 400,
      position: "right",
      open: { trigger: "time", ms: 5000 },
      showOnce: true
    }
  });
</script>
<script async src="https://www.makeform.ai/widgets/embed.js"></script>

You can also open a slider on page load, on exit intent, or after the visitor scrolls to a specified percentage. Time triggers accept 500 milliseconds to 120 seconds. Scroll triggers accept 1 to 100 percent and do not fire if the page cannot scroll. Exit intent works with a desktop mouse; it has no mobile equivalent.

showOnce is remembered in the browser's local storage. An automatic trigger does not replace a slider the visitor opened manually. If the SDK is already loaded, register the config with MakeForm.registerAutoOpen(config) instead of loading the script again.

Open a slider with JavaScript

Call window.MakeForm.openSlider after the SDK loads. This example opens a slider from the left, adds a hidden field to the form URL, and logs the submitted answers.

<script async src="https://www.makeform.ai/widgets/embed.js"></script>
<script>
  window.addEventListener("load", () => {
    window.MakeForm.openSlider("FORM_ID", {
      position: "left",
      width: 400,
      hiddenFields: { utm_source: "pricing" },
      onSubmit: ({ formId, data }) => {
        console.log(formId, data);
      }
    });
  });
</script>

openSlider accepts type ("embed" or "form"), embedUrl, hiddenFields, width, position, overlay, initialBgColor, autoCloseMs, dispatchEvents, and the onOpen, onReady, onSubmit, and onClose callbacks. Hidden-field values are added to the form URL.

Slider behavior

A slider fills the viewport height and does not resize to match the form's height. At viewport widths of 640px or less, it becomes fullscreen. Visitors can close it with Escape, the close button, or a click on the overlay. Only one modal can be open at a time; opening a new one closes the current one.

The SDK also provides MakeForm.closeSlider() to close the slider and MakeForm.loadSliders() to bind slider trigger elements. Load the SDK once on the page.