Autogenerate layout

media_1344519714298.jpg

The first time you click on Design Surface, a form layout will be auto-generated for you.

If you have made some changes but want a new autogenerated layout:

  1. Right click in your form and press Select All
  2. Press Delete to Delete all widgets
  3. Press refresh button

Note, hand designing web forms can be tedious and time consuming. Where possible use the autogenerated layout to save yourself time when your form gets a new question later down the line

Use Palette to add items manually

media_1344519906196.jpg

Select the Palette for the left window to see the available graphical widgets that can be added to your design surface.

 

Use Widget Properties to edit widgets

media_1344520038694.jpg

Select the Widget Properties for the left window to edit all the parameters for the widget you have selected including tooltips, fonts, height and width

Select multiple items at once for a group edit

media_1344520208565.jpg
  1. While holding left mouse click down, drag an imaginary rectangle around a group of items – a dotted rectangle will appear
  2. You can then edit items in the left window and it will apply to all items

Use tool bar tools for tidying

media_1344520498522.jpg

The toolbar icons are explained in Introduction to the Form Designer

Use these to tidy your form

Guiding users through skip logic – options

If you have lots of skip logic in your form and want to hide questions from your users in a helpful way, there are a number of possible methods.

  • 1 – Hidden overlay
  • 2 – Fake Pages
  • 3 – Real pages

1/3 – Hidden overlay

This only works if your question sets are genuinely exclusive – that is there’s no chance that the will appear on top of one another.

To do this:
1) Set your questions to visible and have openXdata autogenerate a layout for you.
2) Set your questions to not visible and make sure your skip logic is set – to show and make required depending on a previous answer
3) Go to form layout, select the questions in the second batch and drag them over the questions in the first batch. Then repeat for the questions in the third batch so that all the questions are on top of each other.

Pros – this method makes it easy for users to enter data & works nicely on phone
Cons – this method is time consuming to change the form

2/3 – Fake Pages

In this method we keep the questions as one long list, but we add fake pages on the web capture.

To do this:
1) Set your questions to visible and have openXdata autogenerate a layout for you.
2) Set your questions to not visible and make sure your skip logic is set – to show and make required depending on a previous answer
3) Return to form designer and with cursor highlighted at the top, right click and “Add Tab” – add as many tabs as you need
4) On the first page, select the questions for one tab, right click and “Cut”, go to the new tab and “Paste”
5) Save when complete.

You’ll notice that when you try and press submit on the first page you get thrown to the tab with required questions.

Pros – this will still work nicely on the phone
Cons – using the form designer like this can sometimes be a little buggy, I’ve had the occasional ugly error with manually adding tabs

3/3 – Real Pages

We use openXdata’s built-in page function to generate pages for us.

To do this:
1) Add your questions to individual pages – you make a new page by selecting Page 1 and clicking Add New
2) Leave the questions as visible
3) Go to Design Surface and openXdata will autogenerate a layout with tabs and with the questions on
4) Return to properties and set the questions as hidden and add skip logic.

Pros – uses openXdata’s functionality to build a tabbed layour
Cons – does not translate well on a phone – a user will have to go through a series of blank pages to find the ones with questions