Widget Guide

Forms

You can 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, JotForm, Wufoo, and Google so that you can insert and customize the right type of form to suit your needs when capturing your website visitors' details and feedback.

Find the Forms widgets in the Content Catalog under Components > Print & Web Components > Forms.

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

Import the JotForm Custom Forms widget from the Content Catalog. 

JotForm opens in the Create New Widget: JotForm window.

 

2

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

3

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. 

Click and drag the form components that you want from the 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 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 

 

5

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. 

6

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

7

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

8

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. 

9

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.

 

10

Click Preview to view the form in your web browser.

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.

The example below shows a simple To Do task list created in Wufoo.

1

Import the Wufoo Form Builder widget from the Content Catalog. 

Wufoo opens in the Create New Widget: Wufoo window.

 

2

Log in to your Wufoo account or create a new account if you're not already registered. 

 

3

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.

4

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.

5

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. 

6

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. 

7

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.
8

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. 

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.

14

Click Preview to view the form.

Google

The Google forms widget lets you add a wide range of forms to your webpages. Use pre-designed templates to create job applications, surveys, questionnaires and contact forms or create your own forms from scratch. You can also view analytical data based on response feedback enabling you to collect and organise information in a clear and meaningful way. You will need a Google account to use the forms.

Here is a simple Google form based on a contact template...  

1
Find the forms in the Content catalog. Go to File > New from Content Catalog and then look under Components > Print & Web Components > Forms. Open the Google Forms widget by clicking the Import button. The widget opens and prompts you to sign into your Google account. If you don’t have one you can create one from here as well.
2
Once you’re signed in the Google Forms page appears and you can start to create your form. There are some templates to get you started. But you can create your own form by clicking on the plus key +.
3
Let's use one of the templates to add a contact information form to a webpage. Click on the Contact Information template to open it.
 
4
Just click on a field to begin editing it. The dropdown menu on the right allows you to choose a format for the responses. 
5
You can duplicate or delete a field. Also make a response "Required" if you need to.

Preview your form by clicking the Preview button up on the top right of the form. 
6
When you've finished editing your form click on the Send button at the top right of the form. A dialog opens outlining the send options. The send options allow you to forward the form to an email address, or as a link as well. 

However to insert the form into our web document we need to click on the <> symbol to grab the HTML code for your widget. Click on the Copy button to copy the code to your clipboard.
7
You will need to adjust the size of the frame within which the widget will sit - the <iframe>. The default of 500 pixels is too short for our Contact details form so it will need adjusting. Around 1200 pixels will do. The width is ok so lets leave that at 760 pixels.
8
 Back in the widget click on Insert, and the form will appear in you webpage document.
9
Click on the preview button to view the webpage with your embedded form.
10
If you need to re-edit your form, just click on it in the workspace, and then click on Edit to re-open the widget.
11
This is just a basic guide to show you how to embed the Google forms into your Xara webpages. For information on the more sophisticated features that Google forms support have a look at Google's own support pages.

https://support.google.com/docs?hl=en&p=about_forms#topic=1360904