Code Manager
On this Page
FAQs
Introduction
The Code Manager provides code snippets for you to integrate a Wufoo form or widget from a report into your own web page.
Using the Code Manager
To view the code manager, click on the “Code” link from the Form Manager or Report Manager. This link is only available if you have at least 1 form from the form manager. The report manager requires that you have at least one public form to display the code link. The code manager will display multiple code options related to the form or report 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 for widgets will provide you code snippets that allow you to place a widget or report on your site.
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 Embed a Form
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.
Link To Form - Every form created in Wufoo has a unique URL associated with it. If you’re not looking to embed the form in a web page, and just wish to send a link to a friend via Instant Messaging or Email then this option is for you. The first snippet is just a plain URL. When pasted in an email, it will become clickable. The second snippet is a URL wrapped in HTML, so when placed on any website, it will become clickable.
Embed 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 three embed snippet choices in this area:
JavaScript Version - This should be your go-to embed choice. Using this snippet will ensure that your forms height is the height it needs to be, no more, no less. It will expand in height if necessary if the form fails form validation and has error messages to show.
iframe Version - If you are in an environment which does not allow JavaScript, this is a fallback option. You can adjust the
height="500"attribute if you find your form has too much or too little whitespace. Make sure to leave enough room for error messages!WordPress Shortcode Version - For WordPress users, this is the preferred method. For folks using the self-hosted (WordPress.org) version of WordPress, make sure you have this plugin installed.
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.
Pop-Up Form Link - This piece of code shows a link on your website that, when click, opens up a new, smaller pop-up window containing the form. In the code, you can customize the exact properties of this window, such as whether or not there is scrolling, will there be a menu bar and how tall the window should be.
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.
Choosing the Best Code Snippet to Embed a Widget
To place a Wufoo widget or report 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.
Link To Report - Every report created in Wufoo has a unique URL associated with it. If you’re not looking to embed the report in a web page, and just wish to send a link to a friend via Instant Messaging or Email then this option is for you. The first snippet is just a plain URL. When pasted in an email, it will become clickable. The second snippet is a URL wrapped in HTML, so when placed on any website, it will become clickable.
Embed Widget Code - Use this when you want to embed a single chart, graph or number widget on any web page. The widgets will show a live summary of your form data. You can even show widgets from different reports on the same web page.
Full Page Report Code - This option also places a working Wufoo report in a web page. The full page report code provides all the HTML you need for a single web page.
Code License
All of the code is given under the Creative Commons Attribution 3.0 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.
API Information
At the top right of your Code Manager, you’ll notice a button with the title API Information. Click this button to obtain your API key and the field information for the form you wish to integrate. To read more about the api, look to the API Documentation.
Why isn’t the submit button showing on my form?
When you’re using the iFrame embed code option, we programatically estimate the height of your form. Unfortunately, it’s not perfect. There is room for error because many users have different browser resolutions or font sizes.
In order to accommodate for this, you’ll have to change the height of your iframe in your code snippet. Just locate the code snippet, and find the part that says height=”X”. Just increase the value of X until you can see everything on your form. Remember, you’ll also need to leave room in case there are errors that need to be displayed when the user incorrectly fills out a field.
Alternatively, you can use the JavaScript embed method, which will automatically resize to fit a user’s browser and font size.
Are integrated 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.
Why does my widget show the error ‘no widget found’?
If your widget now shows an error ‘no widget found’ it may be that the widget no longer exist. Anytime your widget or the report it is part of is deleted it will no longer be available. Recreate the widget on a public report and copy the new embed code onto your web page.
Where is the code link for my report?
To view the code link for a report your report must be public. Check the ‘Public’ checkbox field to the right of your report name and the code link will appear.