Code Manager


Introduction

The Code Manager provides code snippets for you to integrate a Wufoo form into your own web page.

Using the Code Manager

To view the code manager, click on the “Code” link from the Form Manager. Note that this link is only available if you have at least 1 form. The code manager will display multiple code options related to the form you have chosen. These code options will allow you to place the form on your site, or to examine the HTML and CSS of the form for development purposes.

The code manager is divided into two halves: the left half displays the copy/paste code snippets, while the right half presents the code options available. Clicking on a code option on the right will cause the textarea on the left to update with new content.

Underneath the code options are instructions. These ordered steps are necessary in order to ensure your code functions properly. Note that not every code option is attached to your Wufoo account.

Choosing the Best Code Snippet

To place a Wufoo form on your site, simply copy one of the code snippets we provide. If you are unsure which snippet you should choose, a description of each is provided below.

code

Integrated Form Code

This option is the most commonly used option, and is ideal for placing a form within an existing site. Once on your site, everything related to the form will work: validation will occur, confirmation emails will be sent, and the data will be sent to your Wufoo account.

There are also adjustments you can make to this option. The height parameter can be changed so that it fits into your site accordingly. If you notice too much whitespace above or below the form, just adjust the height="500" figure. Also keep in mind that when someone submits your form with errors, the form height will grow because the error messages need to be displayed. When you are considering a height for your form, leave enough room for the error messages.

How is the confirmation page handled on integrated forms?

Are integrated forms still secure?

Full Page Form Code

Similar to Integrated Form Code, this option also places a working Wufoo form in a web page. The difference is that the Integrated Form Code places a form inside an existing page while the Full Page Form Code provides the code to create a web page from scratch with the form inside of it.

Are full page forms still secure?

XHTML/CSS Code Only

In the spirit of sharing, the HTML and CSS is also provided for every form created. The code contained in this option is not functional. It is intended to aid designers and developers when they have to create a form. The missing piece is a backend script, which must be created on your own. If you intend to use the Submit API then this is a good starting point.

Code License

creativecommons

All of the code is given under the Creative Commons Attribution 2.5 License. Our goal is to make form building as easy and painless as possible. We encourage the use and enhancement of the code while knowing that it cannot be claimed as your own. Significant modifications and/or our permission may alter this rule. Using our code does not suggest the we endorse your site or the usage of our code in any way.

Why isn’t the submit button showing on my form?

When you’re using the integrated form code option, we have to programatically estimate the height of your form. There is room for error because many users have different browser resolutions or font sizes. In order to accommodate for this, you will have to change the height of your iframe. Locate the code snippet, and notice the part that says height="X". Just increase the value of X until you can see everything on your form. Remember to also leave room in case there are errors that need to be displayed when the user incorrectly fills out a field. Read more from the knowledge base

Are forms on my site secure?

If you are subscribed to a paying plan that offers SSL, then your forms will remain secure. Since the forms are in an iframe, the lock may not appear in the browser window, but all data submitted will still be sent through SSL. In addition, if you use http instead of https in the src parameter of the iframe, the iframe will still load with the secure form if your account permits it.

What happens after submission with an integrated form?

What happens will depend on your form settings. A form with no redirect URL will show the confirmation message inside of the embedded iframe. A form with a redirect URL will pop out of the iframe, and load the new URL in the entire browser window. Likewise, a payment enabled form will jump out of the iframe when the user proceeds to the merchant to make the payment. Read more from the knowledge base

Updated : July 7th, 2008