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.
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. 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.
Posted by FormSmarts on
May 21, 2008 at 12:30 pm in HTML form.
Permalink
· Comment
Tags: embed, facebook, form builder, form design, howto, web forms, widget
40 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?
Posted by: Fred | Jun 27th, 2008 at 6:34 am 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.
Posted by: FormSmarts | Jun 27th, 2008 at 6:38 am 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.
Is there no other way to post Formsmarts onto mypace profiles? Embedding does not work, and this is the only option you give besides linking. We all know linking is lame, as no one will follow the external link.
Dean,
There is at this time no ways to embed a form widget directly onto your MySpace profile. That is because the standard HTML embedding mechanism (iframes) is not supported by MySpace. We’re looking at possible MySpace-specific mechanisms.
Many users happily link to forms from their MySpace profile. Anyone using MySpace is aware of the external link warning screen, and that doesn’t seem to be an issue.
I’m trying to fit the form into a column narrower than 540 (making it 500 would be ideal) my problem is not the length of the fields, its the length of the form filling instructions that goes at the top of the form. If there was an auto wrap feature that would make it wrap around or a way to manually insert line breaks it would fix my problem. I know I could always write the instructions before I inserted the form, but it would look nicer to do it inside. is there a way to do this that i’m missing?
I’m trying to incorporate my form on my webpage at Google Sites. I do get an error message pop up when copying the source code saying “HTML content will be modified. Your html either contains unsafe tags (iframe, embedded, styles, script)or extra attributes. They will be removed when the page is viewed”. After updating the html, I only get the link “Can’t see your form? Click here!” I would much rather have the form embedded than having a link from my website. How can I best accommodate that?
thanks!!
Gudrun,
Google doesn’t allow iframes (the standard embedding mechanism on the web) on “Google Sites”. They did on their retired product “Google Pages”, so one of the reasons is quite understandably that they prefer to favor their own embedding format “Google Gadgets”. We will release Google Gadget forms in the coming months. You can use linking in the meantime.
Please, could you tell me an approx. release date of the Google Gadget to embed a form in Google Sites?
We’ll try to release this in the first quarter of 2010. Subscribe to our twitter feed to be notified when this feature becomes available.
Is there any easy way to center my entire form on my page?
Jen,
You could place the form’s HTML code shown in your account in a div:
<div style=”text-align:center” >
<!– Form HTML code goes here –>
</div>
I embed the form to my site but why does the form title not appear? only the form
Dhiyaa,
The form title only shows on standalone forms. When you embed a form into a web page, the title will be on that page, not on the form itself.
How do I embed the form in a simple email document?
In a email you should use the form URL provided in the Forms Tab of the form generator. Embedding a form in an HTML email would prevent anyone who’s email client doesn’t support HTML to use the form. I could also trigger a spike of computing resource usage in our systems as many people load the form at the same time when they get the mail, and is therefore prohibited.
Hi,
I am trying to embed the code to my facebook page but is not working. I have copied to my Static FBML, but nothing. Could you help me with that and what did i do wrong?
Regards
Lyudmil
Hi,
To embed a form to Facebook you need to use these Facebook-specific instrctions.
I am trying to embed a form on a Facebook Fan page and all I get is the FormSmart logo – no form.
Is it possible to use this app on Facebook? If so any hints on how this is done?
Mike,
See instructions to embed a form to your Facebook fan page.
Where is the code?
Nick, you can grab the HTML code snippet in the Forms Tab, under “Embed/URL” (2nd column). You can also hit on the relevant button in the Forms Tab, or in the top toolbar in the Fields Tab.
I have tried embedding a 4 field form onto my website however it comes up as “cant see the form? click here” what am I doing wrong? http://www.partnersinpregnancy.co.uk/index.php/natural-birth
Secondly I do intent to integrate paypal at some point and want to know what info I receive from paypal. Eventually I will expand the form to include name, postcode, email, tel, EDD, class date, paratiy and age. If I get contact details from paypal I wont ask for them on the form (aside from name). Thanks
Liz, Joomla, the CMS you use on your site, has stripped out the HTML code (iframe) that embeds the form onto your site. There is plenty of online material covering inserting an iframe with Joomla, here is a tutorial.
Fab thanks!
I am trying to use the embedded code option to place a form on a WordPress site. For some reason the page will not show the form only a link to the form. Is there something special I need to do when working with FormSmarts and WordPress?
Tom, if you only see the link to the form, that means the iframe tags were stripped out by WordPress. There are specific instructions to embed a form on a WordPress site.
Hi Thanks for the info. Unfortunately it seems that I do not have have the option to add plugins. The option does not appear in on the left under “Appearances”. I have been given administrator options for the site but still can’t access the plugin option. I am doing this work for a friend so from what I am seeing on-line it might be a matter of the account type they set up that is causing the restriction. Will keep plugging along at this but at the moment no idea of how to test the options you gave. Thanks for the help.
Cheers
I’m using the Redirect to Return URL choice for the On Submission action. When the user submits the form, the browser loads the Return URL page into the iframe where the form was rather than loading a new page.
Is there a fix?
Ray, the Redirect to Return URL option is an HTTP-level, server-side redirect. HTTP is a communication protocol that doesn’t know about frames. The frame into which the new page is loaded is chosen by the client browser, not by us. For this reason, the redirect option makes most sense with the standalone version of a form, not when a form is embedded onto your site.
You could add the following JavaScript code to your thank you page to reload the page in the top window if it loads in the iframe:
<script>
if (window != top) top.location = window.location;
</script>
Please submit a support ticket at https://f8s.co/fs. Include the URL of the page where you embedded the form in the Inquiry section.
Leave a Reply
About the Form Builder Blog
Categories
- booking (1)
- collaboration (6)
- event registration (3)
- file upload (2)
- form builder (52)
- form handler (9)
- form spam (5)
- HTML form (11)
- mobile form (1)
- online form (9)
- payment form (13)