The Online Form Builder Blog

Home > Blog > How to Embed a Form Into Your Site

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 — 10-15 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
  • your audience includes mobile phone users
  • you expect a large number of form submissions

Event registration forms and survey forms may 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.

Embed Form

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 Wednesday, May 21, 2008 at 12:30 pm in HTML form.
Permalink | Comment
Tags: , , , , , ,

37 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 | June 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 | June 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.

Posted by: Janet | June 30th, 2008 at 3:59 pm

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.

Posted by: Wang Wei | July 9th, 2008 at 6:11 am

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?

Posted by: Keith | August 17th, 2008 at 3:46 pm

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?

Posted by: nunoleite | August 24th, 2008 at 6:44 pm

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!!

Posted by: Gudrun | May 23rd, 2009 at 9:39 pm

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?

Posted by: aljora | December 24th, 2009 at 2:54 am

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

Posted by: dhiyaa | January 19th, 2010 at 2:57 am

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?

Posted by: California Solar Engineering | September 16th, 2010 at 2:27 pm

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

Posted by: Ludmil | November 21st, 2010 at 3:52 pm

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?

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

Posted by: Liz Earle | December 13th, 2013 at 4:28 am

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!

Posted by: Liz Earle | December 13th, 2013 at 6:25 am

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 a number of WordPress plugins allowing you to add an iframe to a WordPress site: here, here, here. Install the plugin, you should then be able to use the FormSmarts embed code on your 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

Posted by: Tom | March 30th, 2014 at 1:32 pm

Leave a Reply

Email will not be published.

Connect with FormSmarts


Get updates by email (~1 email/month):

Got a Question?

Got a question about FormSmarts?
Ask FormSmarts Sales!

About the Form Builder Blog

The Online Form Builder Blog is published by FormSmarts, a web form service providing all you need to create a form and publish it online in minutes. FormSmarts makes it easy to build a form and embed it on your site. You can then get form submissions by email or store them on FormSmarts and download an Excel report. Learn more about the many other benefits of FormSmarts.