Create a form with FormSmarts HTML form builder and web form handler. Email forms, contact forms, feedback forms, survey forms and more.

The Form Builder Blog

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…

Mailing list signup forms and simple contact forms work well embedded.

Link To a Form When…

Event registration forms and survey forms may perform better when accessed buy 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.

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 Form Height and Width

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 against our terms of service to 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: , , , ,

23 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.

Leave a Reply

(optional)

Email will not be published.

Get Updates

Keep up with new features, ask for help.

Get updates by RSS or email:

Got a Question?

Got a question about FormSmarts Pro?
Ask FormSmarts Sales!

About FormSmarts

FormSmarts is a web form service providing all you need to create forms and publish them in minutes. Embed a form widget on your site, or link to the form on FormSmarts.com. Get form responses by email, or store them on FormSmarts and download an Excel report. Create an account now!

Categories

Your AccountHelpFormSmarts