Embed on a webpage

Embedding NeetoForm on a webpage allows you to collect form submissions seamlessly from your website. This integration provides a convenient way for your audience to interact with the form without being redirected to an external link.

Embedding NeetoForm on a webpage

  1. Click on the form you wish to embed.

  2. Click on the Share tab.

  3. Click on Embed in a webpage.

  4. NeetoForm provides the following embed/widget options to choose from:

    • Inline Embed

    • Popup via sticky button

    • Popup via custom trigger

  5. Copy the code based on your needs in embedding options and embed your form on your webpage.

Inline embed

Inline embedding loads the NeetoForm page directly inline with the other website content. It will look like this.

A floating popup will be seen on your website. When a user clicks on this, NeetoForm page will pop up in a modal like this.

When a user clicks a button on your website, you can make NeetoForm page pop up. It will look like this.

  1. Choose the specific element on your webpage that should open the form.

  2. Set this element's 'id' attribute to match the 'Element Id' you configured in NeetoForm.

  3. Add the NeetoForm script to your website.

Note: The script does not add an element to your webpage. The above 2 steps must be done correctly for the script to work.

Example

Let's say you want to add the NeetoForm to your website as a popup when you click a button.

  1. Add the button to your website. Assign an ID to the button, which can be anything you prefer. In this example, we'll use the "popup button":

<button id="popupButton" name="popupButton">Click here to open the form</button>

  1. Open NeetoForm and go to the form you want to display in the popup. Navigate to the Share tab. Select the Embed option and choose Popup via element click.

  2. Add the ID popup button to the Element Id field.

  3. Copy the script provided on the right side of the share page and paste it onto your website.

Pre-filled embedded forms

Pre-filled embedded forms allow you to streamline form submissions by automatically populating certain fields with predefined values. This reduces manual input, minimizes errors, and enhances the user experience.

With NeetoForm’s pre-fill feature, you can specify default values for form fields while embedding the form. This is particularly useful when you want to personalize the form for different contexts, ensuring users see relevant information right away.

To use this feature, follow the steps below:

  1. Follow all the steps mentioned above to embed NeetoForm on your webpage.

  2. Locate the Query params section under Embed options.

  3. Add the necessary keys and values for the fields you want to pre-fill, ensuring the keys follow the format mentioned in the URL Parameters section. The embed script will automatically update to include the specified query parameters.

  4. Copy the code and embed your form on your webpage.

Use case: Simplifying event registration

When hosting multiple events, organizations often use a single registration form for all events. However, requiring attendees to manually select the event can lead to mistakes, drop-offs, and poor user experience.

By embedding a pre-filled registration form with the event name already selected, businesses can streamline the registration process, making it faster and more intuitive for attendees.

React and NextJS integration

If you want to embed NeetoForm to your React or NextJS app, check out the following examples:

  1. React app integration

  2. NextJS app integration

Can't find what you're looking for?