*
nav-pos
blockHeaderEditIcon
You are here:  

Form editor

(WebConnector - Online forms)
 

Topics in overview:

Online forms
Surveys (requires EMS)
Quick-Shop (requires Factura)
Affiliate (requires Factura)
Customer administration (requires EMS)
Interface documentation (API)
arrow

Related topics:

Creating a new form Form editor Embedding forms on a website
arrow

The form editor is an important tool for enhancing your website. The forms on your website are a representative gateway to your online business. They are also the only way in which your website users can interact with you directly on the website. The WBS form editor can be used to create appealing forms without HTML programming skills. The form editor offers everything you need to easily create forms with state-of-the-art functions and features.

On this page:

Form structure
Form element layout
Learning by doing
Advanced editing options
The editor window
Inserting a new form field 
Inserting additional form fields 
Form field action markers 
Editing a form field
CSS settings for forms
CSS templates
Form preview

<

arrow

Form structure

(Form editor)

Each form contains at least one input field and a "send" button. In the example you can see the most simple form version, as can be created with the WBS in mere seconds.

a) An input field - in this case a single-line text box. The content of this field is the message which the website user filling out the form sends to the website operator who is using the form on his website.

b) Send button. This is the button used by the website user to send the data entered on the form to the website operator.  

 

<

arrow

Form element layout

(Form editor)

There are two important aspects which need to be considered when arranging the elements on a form. Firstly, the position of the input field label: In the previous example, the text was displayed above the input field, in this example it is displayed to the left of the field.

The second aspect which needs to be considered is how the fields are to be arranged on the form. They can be positioned underneath each other or next to each other. As a rule, one or two columns are used, but more are possible in exceptional cases. 

The width of the elements must also be taken into account. By default, the elements take up the entire width of the form, as can be seen in the example, where the send button appears oversized.

 

a) Use this setting to determine where the input field labels are to be positioned. 

b) The input field label is displayed next to the input field.

c) Use the field slider on the left to change the ratio of input field label width to input field - for all the fields.

d) Use the field slider on the right to reduce the width of the input field without changing the width of the other fields.

e) Use the field length slider to change the width of all the fields (input fields and input field labels).

These three sliders, which can all be dragged with the mouse, are only available if Field label on top has been deactivated. 

 

<

arrow

Learning by doing

(Form editor)

The width of each form element can also be changed individually.

a) Drag the cursor over a field to unhide the field container and all the action markers.

b) Use this slider to move the entire field to the left or right.

c) Use the bottom slider to change the overall field width individually. If the form structure permits, this will also change the position of the top slider.

 

In this example, another field was added.

a) Another field was added by drag and drop and positioned next to the existing field, which was previously scaled down with the width slider to create extra space. A detailed description on how this is done can be found further down under Inserting additional form fields.

b) A second field was added.

Create a smiliar scenario and experiment with the various sliders to get an idea of how the system reacts and which options exist to customize the form.

The best way to learn in this case is simply learning by doing. This will help you to quickly gain an indepth understanding of all the functions and features of the form editor and allow you to use this powerful tool to your best advantage.

 

<

arrow

Advanced editing options

(Form editor)

The form editor offers two different ways of editing a form layout. In the basic option, the elements are adapted to the size of the form almost automatically. The above-mentioned control elements can be used to change the layout quickly and easily - within seconds - using only the mouse. How this is done is described in the first part of these form editor instructions. In the advanced editing options, you can change, position or set each form element individually, which means you can design the form in any way you like. At the same time, the form will always have an uncluttered look due to the WBS imposing overall design parameters - e.g. alignment to the grid, distances between fields etc.

 
a) After selecting a form template with four input fields and a send button, certain elements were modified using these sliders. To gain a more indepth understanding of the changes which were effected, please read the section Inserting additional form fields on this page.

b) The send button was moved to the center.

c) The advanced editing options have now been activated.

 

 
d) The field container takes on two colors. The green area allows for changes to be made to the input field labels, while the blue area is for effecting changes to the actual input field.

e) Now click Reset changes. This means that the fields will be scaled to the width of the form again.

 

 
f) The fields will once again be positioned below each other instead of next to each other, and the width of the send button has also increased proportionally. This shows that the WBS ensures that the correct proportions are maintained as far as possible.

g) Click Update to save these settings.

 

 
h) This completes the advanced editing, and the field container - when hovering with the mouse pointer - returns to the uniform blue color it had at the beginning of the procedural sequence.

i) This button can be used to restart the advanced editing, if necessary.

 

<

arrow

The editor window

The following editor elements are always visible. First, take a look at the overview: 

a) Menu with form elements - partly unfolded in this case. Use the arrow to the right of the respective menu item to fold or unfold. This menu is your tool kit and library for creating the form. It contains all the elements that can be used on a form.

b) Use this button to customize the appearance of the form. A detailed description can be found on this page under CSS settings for forms.

c) This checkbox controls where the field labels are placed in relation to the input field. This influences the layout of the form and allows for two different ways of proceeding.

d) The Templates button opens a small gallery with various options for changing the appearance of your input fields.

e) The Advanced editing button activates the above-mentioned Advanced editing option. 

f) Use this button to update the form after effecting changes.

 

 
g) See item c). 

h) Sliding bar with sliders for changing the field or column width in the form. 

i) Field container - in an empty form, this is the only place where you can deposit a form field. More deposit options become available as soon as the first element has been inserted into the form.

k) Here you can preview the form in a new browser window after updating your changes.

 

<

arrow

Inserting a new form field

(Form editor)

Use drag and drop to insert a new form element into the field container. Always start with the send button when creating a new form. Updating a form is only possible once a send button has been inserted, otherwise you will be shown an error message. 

Drag the send button from the library to the container. The cursor turns blue when hovering over the container area. Now drop the element into the container area.

 

 

 
Another container will appear above and below the send button, where subsequent elements can be deposited.

a) Another element - in this case a single-line text box - is being dragged from the library to the container.

b) The top container turns blue. 

c) The bottom container is not affected, and remains available.

 

<

arrow

Inserting additional form fields

(Form editor)

The form elements can either be placed underneath each other or next to each other. If you want to place them next to each other, you first need to create extra space. This is done by dragging the column width slider to the left.
 

 
  
When dragging the slider, you will notice that both the text field and the send button are scaled down. This is because both elements are located in the same column, and the slider changes the width of the entire column. This creates space for additional elements in a second column.

 
When inserting a new element next to an existing element, the available area of the partly used container turns orange when the new element is dragged there.

 

<

arrow

Form field action markers

(Form editor)

Hovering the cursor above a form field automatically opens new configuration options. Take note of how these configuration options react to the position of the cursor. The configuration options become visible once the tip of the cursor reaches the light blue field container b), which extends the sensitive area of the field container to the surrounding buttons. 

a) Use the double arrow to move the entire input field in a horizontal direction.

b) The central field container is shaded light blue. 

c) Use the 'x' symbol to delete the entire element from the form.

d) Here you enter the text that is to be displayed until the website user enters own text. 

e) Use this symbol to drag the element to another position in the form.

f) Use this double arrow to change the overall length of the field container.

g) Click here to access the CSS settings for the form field, where you can change the font, font size, alignment etc. for the form field. 

h) Click the pen symbol to define field settings such as labels, options or validations.

 

 

<

arrow

Editing a form field

(Form editor)

First, let us edit the display of the field.

a) Click the CSS button.

b) This opens the window for editing the style.

c) Select the area you want to edit. In this example we are editing a single-line text box, where you can either change the display of the field description or the display of the field itself.

d) to k) are self-explanatory.

The specifications for changing the display of the field are also self-explanatory. Simply follow the instructions in the respective window to edit the CSS details. In the case of other field types, an editing window opens, whose content immediately indicates in which way the element can be modified. 

 

 
 

 
Here we can edit the field settings. The main page is open.

a) Click the button with the pen symbol.

b) This opens the window for editing the settings.

c) to e) are self-explanatory. 

 

The second tab of the window is concerned with validation. Here you can activate a check which validates whether a required field has been filled in by the user.

a) Click Validation.

b) Activate the checkbox if the field is to be a required field.

c) to e) are self-explanatory. 

 

<

arrow

CSS settings for forms

(Form editor)

a) Click "Form style" to change the CSS settings for the entire form. In the settings, you can define the CSS for the form, the labels, the fields and the placeholders.

b) Select the form attribute for which you want to customize the CSS settings. Different configuration options exist for each selection. In this example, we will be editing the CSS settings for the form.

 

 

<

arrow

CSS templates

(Form editor)

a) Apart from defining an own CSS for the form, it is also possible to choose a template. Click the Templates button to open the CSS templates gallery.

b) Select the desired CSS template. Clicking a template changes the appearance of the form in accordance with the CSS of the selected template. In our example, shadow was added.

c) This is what the form looks like with shadow added.

Click the Templates button again to close the templates gallery. Click the Update button to save your form.

 

<

arrow

Form preview

(Form editor)

After saving your form, click Preview. This opens a new tab in your browser with a preview of the form you created.
 
Footer-03
blockHeaderEditIcon
Backtotop
blockHeaderEditIcon
Footer-06
blockHeaderEditIcon

Languages

coypright
blockHeaderEditIcon
2017 Copyright by Worldsoft AG, All Rights Reserved
social-media
blockHeaderEditIcon
Facebook   Twitter   Wordpress  Worldsoft
Username:
User Login
Your Email