How to Embed a Form Into Your Site
Linking or Embedding?
FormSmarts supports two ways to integrate a form into your website or blog: linking and embedding. Embedding lets you place the form on your site alongside other content. Linking gives your form its own separate web page. Both have advantages and disadvantages. Many users think embedding the form into their site gives them more control. That’s far from always being the best option.
Embed Short Contact & Feedback Forms Onto your Site
You can embed a contact form, customer inquiry form or short feedback form onto your site without affecting user experience.
Embed a Form When…
- The form is short — 10-15 input fields maximum
- It is self comprehensible and form filling instructions are not needed
There is unfortunately no way to embed a larger registration form or survey onto your site without having a negative effect on user experience. For those forms, simply link to the FormSmarts URL of the form and share that URL (or the form’s shortened URL) on social media.
If you decide to embed a form onto your site, always use the embed code snippet provided by the form builder. Do not embed a form using the FormSmarts URL of the standalone form, even if that appears to work with your browser. This conflicts with security restrictions we’re putting in place and those forms will soon be blocked by modern browsers.
Link to Registration Forms and Other Large Forms
A standalone form almost invariably gives a better, frictionless user experience. In order to protect the security and privacy of their users, browsers impose a growing number of restrictions on embedded content. These restrictions affect a form’s usability when it is embedded on your site.
Link To a Form When…
- The form is long or complex
- The form is accessed both by web visitors and via social media or a mailing list
- The form in intended for a large audience, that may be using a wide range of browsers and devices
- Your audience is likely to fill out the form on mobile device
- You expect a large number of form submissions
- Event registration forms and surveys perform better when accessed by URL on their own page
A word of wisdom: Resist the temptation to systematically embed web forms on your site for irrational reasons “because it gives you more (apparent) control”. Some web forms perform better on their own page.
- Standalone forms accessed by URL load faster and are more scalable
- They are more reliable
- They offer more flexibility
- There are no sizing or other user experience issues
Placing the Embedding Code On Your Site
To embed a form into your website, visit the Forms tab, and click Embed to see the form code.
Copy the HTML code, then paste it somewhere in the HTML source of the
host page on your website or blog. If you’re using an online service like Blogger, that’s
all you have to do. Otherwise, you need to publish the page to your web server.
Changing a Form, Once the Code Is on Your Site
Any changes you make to a form using the form builder will show up straight away on your website. You do not need to update the embedding code. However, as a result of adding more fields, or changing a text box to a larger text area, the frame containing the form may no longer be high enough to fit the form. You will then need to re-publish the embedding code to your site. See the section about Form Sizing below.
Customizing Your Form
You can customize several aspects of your forms in the Form Details screen of your account.
Web Form Sizing
Why Is There Extra Space at the Bottom of the Form?
Forms are contained within an HTML frame (“iframe” for geeks). The frame has a fixed size, which is computed for each form, based on several factors, like the number and type of fields used, and the form layout chosen.
It is necessary to leave room at the bottom of the form for error messages that may need to be displayed during a form submission. That’s the reason for the extra space at the bottom of a form.
Manually Changing the Height or Width of a Form
You can change the size of a web form widget by editing the value of the height and width attributes in the HTML snippet (a.k.a. form embed code) given by the form builder.
We do not recommend changing the height of forms. If you do, remember to allow extra space at the bottom of the form, as discussed in the previous section.
The width of embedded web forms can be resized down to 360px without side-effects, and should degrade well beyond that.
How Do I Get Rid of the Vertical Scrollbar
With time, you may need to add more fields to your forms, but forget to refresh the form HTML code on your site. Since the frame height is hard-coded into the code on your website, the form may no longer fit into the frame, and a vertical scrollbar will then appear. That is not desirable on a usability standpoint, so you are advised to update the code on your site whenever you add new fields, or change a text box to a text area.
Only One Form Per Page
It is against our terms of service to embed more than one form in a single web page.
Embed a Form to a Facebook Fan Page
The easiest way to add a form to a Facebook page is to use the FormSmarts URL that comes with each form. Click on the URL link in the Forms Tab of the form builder to show form URLs instead of embedding code. You may also embed the form into your Facebook page using an FBML Box. See instructions to embed a form to Facebook. Feel free to post your questions in the relevant thread of our forum on FormSmarts’ Facebook page if you need help.
39 Responses to “How to Embed a Form Into Your Site”