Drag the JotForm custom forms widget from the Form Widgets section of the Page Elements folder in the Designs Gallery on to your web document page.

JotForm opens in the Create New Widget: JotForm window.

Click the New Form button in the My Forms menu bar.

The New Form Wizard opens.

Do one of the following:

• To create a form from scratch, select Blank Form and click Continue. 

The Create New Widget: JotForm window displays a list of form components in the Form Tools menu on the left and a blank form-building area on the right. 

• To use an existing form as a template, select Form Samples and choose a form type from the drop-down list.

The Create New Widget: JotForm window displays a form template in the form-building area.

• To import a form from a web page or to clone one of your existing forms, select Import Form and enter the URL for the form you want or select one of your existing forms from the drop-down list.

The Create New Widget: JotForm window displays the form as a template in the form-building area.

Edit display of each form component and its label by:

• Selecting a component and clicking the relevant property buttons in the menubar at the top of the form-building panel

or

• Clicking on a selected component and choosing Show Properties, or an individual property, from the drop-down list

or

• Clicking the 'Properties' icon in the top right corner of a component, shown when it is selected, and choosing Show Properties, or an individual property, from the drop-down list

Change the display of your form by clicking the Form Style tab.

The top menubar shows a range of display attribute buttons that you can apply to your form, including pre-existing display themes, font size and color and background color. 

Click the Setup & Share tab to apply emailing, response and sharing options to your form, and also to view the form's source code. 

Click the Preview button in the top menubar and enter your email when requested to view changes to your form.

When you're happy with the form, click the Setup & Share tab and click the Share button.

The Share Form dialog shows the form's code. 

Alternatively you can click the Advanced Options in the Share Form dialog and click HTML Editor in the left-hand menubar, and then click Web Designer/Web Designer Premium/Designer Pro. The Share Form dialog shows the form's code. 

Click Insert in the Create New Widget window.

The program display a placeholder for the JotForm form. 

Click and drag the placeholder to the location on the web page where you want the form to appear.

However you cannot resize the placeholder using the selection handles as this will only truncate the form (if you reduce it) or create empty white space to two sides of it (if you enlarge it).

To resize the form, double click the placeholder to go back to JotForm and open your form by clicking on its Edit button on the right of the Create New Widget: JotForm window (or recreate the form if JotForm hasn't saved it).

Click the Setup & Share tab in the form's menubar and click the Preferences button.

In the Preferences dialog, edit the form width value to the size you prefer and click OK.

While you cannot directly edit the form's height, it adjusts accordingly when you change the form's width.

Repeat step 8 to reimport the resized form into the program.

Click Preview to view the form.

Drag the Wufoo Form Builder widget from the Form Widgets section of the Page Elements folder in the Designs Gallery on to your web document page.

Wufoo opens in the Create New Widget: Wufoo window.

Once you're signed in, click the New Form button in the upper right corner of the Create New Widget: Wufoo window.

The Create New Widget: Wufoo window displays a selection of form building tools to the left and a blank form building area to the right.

Do one of the following:

• To create a form from scratch, double-click the form components you want to add in the Add a Field tab on the left. Note: You may have to click rapidly more than twice to add the field!

          The Create New Widget: Wufoo window displays a form preview on the right. 

• To use an existing form template, click the Wufoo Form Gallery link in the form builder's New! banner.

          The Wufoo Form Gallery displays 40 different types of form templates that you can customize.

Select the type of form template you want in the scrolling list of Form Template buttons.

The form building area on the right displays a preview.

Click Customize in the upper right of the window to edit form components. 

Click a field in the preview area to edit, copy or delete it.

The field's properties are displayed in the Field Settings tab on the right.

Select and edit the settings to customize to your taste.

The form preview updates to reflect your changes. 

Click the Form Settings tab on the left to:

• Change the form's display name and description
• Add a 'successful completion' message
• Direct users to a new web page
• Send an email confirmation
• Limit form use such as adding a captcha, restricting number of entries and scheduling form activity.

When you're done customizing the form's fields, click Save Form at the bottom of the form building area. 

Wufoo displays a dialog that allows you to continue editing, set up email notifications or save your form in the Form Manager. 

If you opt to setup email notifications, Wufoo allows you to be notified of form updates via email and text, as well as customize the wording of your email notifications. 

You can also choose to integrate your form with other applications such as Twitter or Campaign Monitor, so that whenever a form is submitted, you're notified and your Twitter feed, for example, is instantly updated. 

When you save the form and opt to return to the Form Manager, for every form you create you can use the buttons underneath the form name to:

• Add field, page and form rules
• Edit the form content and notifications some more
• View your form's HTML code
• Preview the form
• View usage statistics for your form
• Assign a theme to change the form design - choose New Theme from the drop-down list to the right of the form name and use the Theme Designer to change the display of each individual form component.
  Alternatively click on the Wufoo Form Gallery link at the bottom of the Theme Designer page to choose an existing CSS theme and add it to Wufoo. Your chosen theme will now appear in the theme drop-down list in the Form Manager. 

When you're happy with the form, in the Form Manager click the Code button in your form's menubar.

Wufoo displays the Form Code Manager.

Click Embed Form Code to the left of the Form Code Manager. 

Wufoo displays the form's source code.

Click Insert in the Create New Widget window.

The program display a placeholder for the Wufoo form. 

Click and drag the placeholder to the location on the web page where you want the form to appear.

You cannot directly change the form's height without truncating it (if you reduce it) or creating white space at the top or bottom (if you enlarge it). However, you can change the form's width by clicking on the placeholder and dragging the vertical resize handles to the width you want. The height will then resize accordingly.

Click Preview to view the form.