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

JotForm opens in the Create New Widget: JotForm window.

Click on My Forms in the top menu bar and then Create Form. The New Form Wizard opens offering you three possible options.

Do one of the following:

• To create a form from scratch, select Blank Form and click Create. The Create New Widget: JotForm window displays a list of form components in the Tools menus 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 the form by:

• Clicking on the Preferences button at the top of the form-building panel

or

• Click on a selected component - then clicking on the field Properties button in the top right corner of the component field and choosing Edit Properties, or an individual property, from the drop-down list 

The top Properties menubar shows a range of display attribute buttons that you can apply to your form, including layout properties, font size and color and background images. 

Click the Setup & Embed tab to apply emailing, response and sharing options to your form, as well as themes and colors.

Click the Preview button in the top menubar to view changes to your form - this shows a preview within the JotForm widget window.

To see the form embedded in your web document, first click Publish in the Setup & Embed tab then click on Platforms and choose Xara from the list. Then click on the Copy Code button and the Insert button at the bottom of the widget window. The form will appear in your web document. 

If you need to re-size the form - double click on it to open up the form building wizard again. Adjust the width values in the Preferences dialog 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 in your web browser.

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.