Can I speed up my embedded form's load time?
Embedding
Can I add a form as a pop-up button on my site?Can I embed a form without the background?Can I speed up my embedded form's load time?What is oEmbed and how can I use it with Paperform?Embedded form JS API (draft)How can I embed my form in a React app?How do I embed my form with AMP?How do I embed my form?How do Paperform forms look when they are embedded?Can I use special HTML attributes (e.g. pre-filling) when embedding?Is the form mobile-friendly when it is embedded?The standard Paperform embed code is built to not impact the overall load speed of the page. To do this, it doesn’t actually start loading the form until the page has finished loading the essentials of the page. However, if the form is an integral piece of the page content, you can do a few things to speed up the speed at which the form loads.
1. Use a standard script
One of the simplest and effective changes you can make to speed up the loading of the form is to replace the script part of the embed code with a standard script code, instead of inline javascript.
A standard Embed Code
<div data-paperform-id="newsletter"></div><script>(function() {var script = document.createElement('script'); script.src = "[https://paperform.co/__embed](https://paperform.co/__embed)"; document.body.appendChild(script); })()</script>
Replace this script
<script>(function() {var script = document.createElement('script'); script.src = "https://paperform.co/__embed"; document.body.appendChild(script); })()</script>
With a standard script
<script src="https://paperform.co/__embed"></script>
The end result will look like
<div data-paperform-id="newsletter"></div><script src="https://paperform.co/__embed"></script>
2. Place the standard script as high in the HTML document as you can (preferably in the head)
The earlier the script is loaded, the faster the form can begin to load. This means if you move the script from step 1 higher in the HTML document, it will prioritize the loading of the form over other third party inclusions on the page.
To do this, move <script src="https://paperform.co/__embed"></script> into the <head> of the page, or as high as you can if you do not have access to the full page HTML.
3. Use the iFrame fallback embed
The fastest way to load an embedded form is by using the iFrame fallback method as outlined in the embedding help article. However, there are distinct disadvantages to using the iFrame fallback method;
- The form cannot be dynamically resized to take up the space needed by the form.
- PayPal payments are not supported.
- The form cannot control the scroll position of the page, which means if the form changes height drastically, like on changing pages, or on submission, the user may not be scrolled to the right place on the page.