Widget Guide : Version 7

Forms

Xara Designer Pro 7, Web Designer 7 Premium and Web Designer 7 allow you to click and drag a huge range of forms to your website using a selection of in-built widgets.

Below we give a step-by-step guide to inserting three very popular types of forms, Google, JotForm and Wufoo, so that you can insert and customize the right type of form to suit your needs when capturing your website visitors' details and feedback.

JotForm

JotForm forms are highly customizable. Choose a form from a wide range of templates and edit it to suit your tastes, or create your own form from scratch.

Below is an example Customer Survey form built with JotForm.

1

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

JotForm opens in the Create New Widget: JotForm window.

2

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

The New Form Wizard opens.

3

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.

Click and drag the form components that you want from the Form Tools menu on the left into the blank form-building panel.

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.

4

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

5

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.

6

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

7

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

9

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.

11

Click Preview to view the form.

Google

The Google forms widgets offer a quick and easy way to drag and drop a form on to your website.

Here's an example Google contact form that you can put on your web page in seconds.

4

Click Insert.

The program displays a placeholder for the Google 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 Google gadgets and repeat steps 2 -4.

5

Click Preview to view your form.

Wufoo

Wufoo offers a wide range of ready-made forms you can easily customize. Here we outline how to add a form and adapt it to your website needs.

Limit form use such as adding a captcha, restricting number of entries and scheduling form activity.

9

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.

10

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.

11

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.

12

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.

13

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.