Embed your form

Easily embed a HeyForm on any webpage and seamlessly customize it to match your style. Choose from four different types of embeds:

  • Standard: embed form as part of your web page
  • Modal: embed form as a modal on your web page
  • Popup: popup form in the side corner of your web page
  • Full page: embed form as a full-page

How embedding works

  • Go to Form "Share" page
  • Select your preferred embed type
  • A preview modal will open with embed settings. You can setup the settings to fit your desired look.
  • Click the "Get the code" button, copy the embed code and paste to your website.
How embedding works

Standard

Standard

Settings

  • Width: adjust the width of the form in pixels or percentage.
  • Height: adjust the height of the form in pixels, percentage, or adaptively.
  • Transparent background: enhance the appearance of your form by removing the default background and seamlessly integrating it into your website.

Modal

Settings

  • Modal size: set size of the modal which includes three sizes: small, medium, and large.
  • Launch: this option lets you choose when your modal form appears on your site.
    • On button click: the form will appear when a visitor clicks a button on your website.
    • On page load: the form will appear immediately when the page opens.
    • After elapsed time: the form will appear after a specified number of seconds.
    • On exit intent: the form will appear when the visitor moves their cursor to the top bar of the browser window (not supported on mobile).
    • After scrolling: the form will appear when the visitor has scrolled a specified % down the page.
  • Trigger background: set the background color of the trigger button.
  • Close on submit: after a respondent submits the popup form, you can configure the number of seconds before the popup closes automatically.
  • Transparent background: enhance the appearance of your form by removing the default background and seamlessly integrating it into your website.

Popup

Settings

  • Launch: this option lets you choose when your modal form appears on your site.
    • On button click: the form will appear when a visitor clicks a button on your website.
    • On page load: the form will appear immediately when the page opens.
    • After elapsed time: the form will appear after a specified number of seconds.
    • On exit intent: the form will appear when the visitor moves their cursor to the top bar of the browser window (not supported on mobile).
    • After scrolling: the form will appear when the visitor has scrolled a specified % down the page.
  • Position: choose whether to display your popup in the bottom right corner or bottom left corner of your website
  • Width: adjust the width of the form in pixel.
  • Height: adjust the height of the form in pixels.
  • Close on submit: after a respondent submits the popup form, you can configure the number of seconds before the popup closes automatically.
  • Transparent background: enhance the appearance of your form by removing the default background and seamlessly integrating it into your website.

Full-page

Full-page

Settings

  • Transparent background: enhance the appearance of your form by removing the default background and seamlessly integrating it into your website.

Embed with React

import { useEffect } from "react"

function App() {
  function loadScript() {
    const script = document.createElement('script')

    script.src = 'https://www.unpkg.com/@heyform-inc/embed@latest/dist/index.umd.js'
    document.body.appendChild(script)
  }

  function handleOpenModal() {
    window.HeyForm.openModal('dCN9pF7UModal')
  }

  useEffect(() => {
    loadScript()
  }, [])

  return (
    <div>
      <div
        data-heyform-id="dCN9pF7U"
        data-heyform-type="modal"
        data-heyform-custom-url="https://heyform.net/f/dCN9pF7U"
        data-heyform-size="large"
        data-heyform-open-trigger="click"
        data-heyform-open-delay="5"
        data-heyform-open-scroll-percent="30"
        data-heyform-trigger-background="#1d4ed8"
        data-heyform-trigger-text="Open Form"
        data-heyform-hide-after-submit="false"
        data-heyform-auto-close="5"
      >
        <button className="heyform__trigger-button" type="button" onClick={handleOpenModal}>
            Open Form
        </button>
      </div>
    </div>
  )
}