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 a Form When…
- the web form is short — 3-4 input fields maximum
- it is self comprehensible and form filling instructions are not needed
Mailing list signup forms and simple contact forms work well embedded.
Link To a Form When…
- the form is long or complex
- the form is accessed both by web visitors and via a mailing list
- the form in intended for a large audience, that may be using a wide range of browsers and devices
- you expect a large number of form submissions
Event registration forms and survey forms perform better when accessed buy URL on their own page.
- forms accessed by URL load faster and are more scalable
- they are statistically more reliable
- they offer more flexibility
- there are no sizing issues
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.
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.
A word of warning: do not try to save the form as an HTML page, and publish that page. This will not work. You must paste the code exactly as given. Do not attempt to alter, remove, or hide the mention “web form by FormSmarts”, or the link to our Privacy Policy. This would be a breach of our Terms of Use, and your account would risk to be terminated without notice.
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. As a result of adding more fields, the frame containing the form may however not be large enough, and you will then need to re-publish the embedding code on your site. See the section about Form Sizing below.
Customizing Your Form
The frame containing the form is transparent, which means the form background color will be the same as the background color of the hosting page.
We’re working to give you more control over the look of your forms, and we welcome your suggestions. Once available, you will be able to apply most customizations straight from FormSmarts. You won’t have to change the form code on your website.
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 the number and type of fields used.
It is necessary to leave room 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.
How Do I Get Rid of the Vertical Scrollbar
With time, you may have to add more fields to your form. 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.
A vertical scrollbar may also appear if the form has many questions.
You can get rid of the scrollbar by increasing the vertical size of the form widget. To do this, increase the value of the attribute height in the HTML snippet for the form (a.k.a. form embedding code.)
Only One Form Per Page
You cannot embed more than one form in a given web page.
Posted by FormSmarts on
Wednesday, May 21, 2008 at 12:30 pm in HTML form.
Permalink
| Comment
Tags: embed, form builder, howto, web forms, widget
12 Responses to “How to Embed a Form Into Your Site”
I usually add a form at the bottom of my site, because people can directly request information from the site: my form is usually 4 to 5 fields long.
I have the feeling that adding a link to an external site will let them think that they “quit” my site.
Any suggestions?
4-5 fields is in the grey-zone. Both form embedded and linking will do. I would place the form in the same page if the space taken by your content is (much) larger than the space taken by the form. Unless the main purpose of the page is the form itself.
If your link says “register your interest for this event”, the visitors will think about completing the action proposed (registering) — not about whether this is on this page or another. You may find that some people take the decision “I want to register”, but give up immediately when they see the size of the form to fill in. If the same people take the decision and just have to click on a link, they may well complete the same form on a different page because they are already there.
About form sizing, you can change the vertical size of a form by changing the attribute “height” in the form embedding HTML given by FormSmarts.
Whenever you add more fields to a form, you have to republish the HTML code snippet to your site. I didn’t do this initially and pretty soon the frame wasn’t high enough to contain the whole form.
This embed option doesnt work with Myspace? I tried to copy it into my about me section in my profile and all it does is show the code when the profile is displayed and not the form?
Keith,
MySpace no longer allows the use of “iframes”, so you can’t directly embed a form on your profile at this time. What you should do instead is link to the form URL.
We’re looking at creating a form widget specifically for MySpace in the near future.
How can I edit space between fields?
Nunoleite,
All you can change at this time is form layout and colors.
I want to put a simple, three-field email capture form on my TypePad blog to provide free bonuses to visitors, but the form is much wider than the available column on the blog site. How can I squeeze down the size to fit?
Sarah,
First, change the form layout to “question above field”. You should then manually edit the HTML code and reduce the width of the iframe. Text fields are likely to be too wide, but the form should still be usable.
We’ve noticed that a number of users are trying to fit forms in a side column of their blog, we’ll eventually release a narrow form layout design for this purpose.
As always when modifying form embedding code, pay attention to abide by our term of service: don’t alter the credit notice.
That sounds easy enough, but I don’t see where to ‘change the form layout.’ Where is that within the code that’s generated for me; and would I replace something (what?) with “question above field”? Thanks for your help!
You can change the form layout from the form details screen, in the Forms tab. Find out more here.
Leave a Reply
- form builder (18)
- form handler (8)
- form spam (4)
- HTML form (11)
- Smarts Points (1)
| Your Account | Help | FormSmarts | ||||
|---|---|---|---|---|---|---|
|
|
|
|||||
