How to embed forms on your website?
You have created great-looking forms! And now, it is time to share them with people. Pick one of the many versatile embedding options and follow the simple steps below:
1. Open the Share page, and you will see all the embedding options there:
An image showing the embedding options you can check out by accessing the Share section
2. Once you choose an embed option, adjust the settings of the embed code, such as height, width, button colors, etc., to have the form complete your website design. Thanks to the preview section on the right side, you will be able to see the changes instantly:
An image showing the settings you are free to adjust on the example options, like Checkbox layout and Pop-up
3. After you are sure the form looks good both on desktop and mobile, copy the embed code by clicking on the Get the Code button:
An image showing the “Get the code button” you need to click once you are done adjusting settings, so that you can copy the embed code
4. Finally, insert the embed code into your website:
An image showing an example of how you can add the code to the website editing area for future embedding
Embedding options
Now, you know about the embedding process; however, it can be great to learn more about each embedding option in more detail. Below, you can take a look at all the embedding options we provide:
1. Standard embedding
The most common way of placing your form on your website. Don’t forget to adjust the height and width before placing the code on your website.
An image showing the screen where you can get the embed code once you select the “Standard” embed option
2. Full-page
If you like to embed a form in full screen onto a blank web page, this option is just for you. Quickly get the code and place it on your website.
An image showing the screen where you can get the embed code once you select the “Full-page” embed option
3. Chatbox layout
Place your form on your website, similar to a chatbox, to offer a more personalized experience to your visitors. If you like, you can customize the chatbox color, define when the chatbox pops up, and do more.
An image showing the screen where you can get the embed code once you select the “Chatbox layout” embed option
4. Side tab
Place your form on a side button on your website and open it when visitors click on it. This is a great embedding method for gathering more feedback, increasing sign-ups, and generating leads.
An image showing the screen where you can get the embed code once you select the “Side tab” embed option
5. Pop-up
Embed your form in a pop-up that will appear automatically or when visitors click a button. You have many options available for pop-up embedding. For example, you can choose to open it on page load, after a specific time, or with a different animation.
An image showing the screen where you can get the embed code once you select the “Pop-up” embed option
6. Slider
Want to get the attention of your website visitors to request simple feedback? Embed your form as a side tab and let the form slide into the screen.
An image showing the screen where you can get the embed code once you select the “Slider” embed option
Please note that our system provides embedding codes for both Script and HTML methods only for “Standard” and “Full-page” embedding options. For other options, the code is available only for Script embedding.
In addition to embedding your form into your website, you can also consider sharing it on social media. Learn more about it by visiting the next article: Share your forms on social media.
To be able to embed your form with the full height, you will need to enter the 'formHeight' as the height value in your embed code. Here is an example of these codes:
Original:
<div formsappId="6777ae1a7e6e9ea5b0d31e75"></div>
<script src="https://forms.app/cdn/embed.js" type="text/javascript" async defer onload="new formsapp('6777ae1a7e6e9ea5b0d31e75', 'standard', {'width':'100vw','height':'600px'}, 'https://lsn54f49.forms.app');"></script>
Full-height and no scroll:
<div formsappId="6777ae1a7e6e9ea5b0d31e75"></div>
<script src="https://forms.app/cdn/embed.js" type="text/javascript" async defer onload="new formsapp('6777ae1a7e6e9ea5b0d31e75', 'standard', {'width':'100vw','height':'formHeight'}, 'https://lsn54f49.forms.app');"></script>
Yes, you can embed your forms with the Get value from URL option applied. To learn more about it, please visit our help page: How to get value from URL when embedding your forms.