You are here:  

Creating a new form (old) >>> new

(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)

Related topics:

Creating a new form

Embedding forms in your website

Online forms are the most important interface between the WBS and your website. It does not matter what system was used to create your website. Online forms channel website user data to your WBS, where it can be edited using all the enabled functions. Here you can learn more about how to create a form and customize it to your individual requirements.

On this page:

Selecting a form
Creating a new form
Using a form template
Using an empty form
Editing a form
The form editor (FE)
Inserting a new form field (FE)
Editing a form field (FE)
CSS settings for form fields (FE)
Basic settings for form fields (FE)
CSS settings for forms (FE)
CSS templates (FE)
Form preview (FE)
Form settings
Form processes
Script for embedding a form in your website

Any website that interacts directly with its users uses online forms for this purpose. The online form serves as a gateway to your company. Its appearance is a decisive factor for the success of your business, which is why it should have an inviting design.



Selecting a form

a) Select the path WebConnector - Forms. If forms already exist, you will be shown a list of available forms.

b) If you want to create a new form, click New form.

c) If you want to edit an existing form, click the name of the form in the field in which it appears. Continue with Edit form.

d) Use EDIT to change the name and description of the form, use the recycle bin icon to delete the form, and use the copy icon to generate a new form with the same properties as the existing form. This is useful if you want to create a series of similar forms.


Before editing the form, please read the instructions below to find out how the fom editor can help you with this task:





Creating a new form

Requesting a new form or clicking EDIT to edit an existing form opens an input window for editing descriptive form data: 

a) Enter a name for the form.

b) Enter a description for the form.

c) Select the language for the form. Only languages that were previously defined in the basic settings can be selected. Detailed instructions can be found under: Language settings

d) Save your entries.





Using a form template

After creating a new form and saving the descriptive data, the WBS will prompt you to select a template. Choose whether you would like to work with an empty template or use a predefined templete instead.

a) To use an empty template, click "Empty template" or 

b) Select an existing templete. 

Depending on your selection, this will either open an empty form which you can set up yourself, or a form already containing the necessary form fields, which you can then customize.





Using an empty form

This is the page you will land on after creating a form with the Empty form template. Before editing the form, please familiarize yourself with the Form editor





Editing a form

This is the page you will land on after clicking the form name field in the forms list for the purpose of editing the form, or after selecting an existing template for a new form that you would like to modify. In the following form editor description you will learn how to create a form starting here.




The form editor

All of the following descriptions refer to the form editor. Each section serves to explain the various elements of the editor that can be used to customize a form. You can perform the tasks in any sequence until your form is ready for use. Let us take a look at the overview first:

a) Menu with form elements - partly folded out in this example. You can fold it in or out using the arrow on the right of the respective menu item. The menu is your tool kit for generating forms, and this is where you will find all the elements that can be used in a form.

b) Use this button to customize the appearance of the form.

c) Here you can select an existing template, if preferred.

d) This selection provides an preview of the form for various end devices. Here you can also change the way it is displayed.

e) Click Update to save your changes.





Inserting a new form field

(Form editor)

a) Use drag and drop (press and hold down left mouse button to grab object and drag it into a field) to move a new form field to the form container.

b) Move the form field into the form container by dragging it to a gray shaded line. The row will turn blue as soon as the form field is located inside the line area. Release the left mouse button and position the form field inside the form container.



c) You can use drag and drop to move another new form field into the container.

d) In the example, the second form field is placed into a second line below the first field.


e) The forms of the Worldsoft Business Suite can also be used to create multicolumn forms. If you would like to add a new column to your form, move one of the form fields directly next to the existing form field.

f) The area next to the existing field will automatically turn orange when the new form field is in the right position. Let go of the left mouse button to create a new form column.




Editing a form field

(Form editor)

Moving the cursor over a form field opens new configuration options. It should be noted how these configurations options react to the position of the cursor. Field settings appear as soon as the tip of the cursor moves over the light blue shaded field container k). This extends the sensitive area of the field container outward, making the surrounding buttons visible. It is highly recommended to move the cursor out of the field container in a vertical direction after changing a setting (using the double arrows), and moving it back into the light blue shaded area if any other changes need to be made.

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

b) Use this double arrow to change the length of the label area. 

c) Use this double arrow to change the length of the input area. 

d) Use the X icon to delete the entire input field from the form.

e) Use this icon to move the entire input field to any other position in the form. 

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

g) Here you can access the CSS settings for the form field, where the font, font size, alignment etc. can be set for the form field.

h) Click the pencil tool to define settings such as the field name, field options or field validation.

i) Turquoise shaded label area.

j) Green shaded input area. 

k) Light blue shaded field container. 




CSS settings for form fields

(Form editor)

a) First select what you want to edit. In this example: field settings (turquoise)

b) Select font.

c) Select font size.

d) Choose whether you want the text to appear in bold, italic, or underlined type.

e) Define label position.

f) Select label color.



a) First select what you want to edit. In this example: field (green)

b) Select font.

c) Select font size.

d) Choose whether you want the text to appear in bold, italic, or underlined type.

e) Choose the alignment of the selected element.

f) Click a corner to round off the edges of the selected element.

g) Specify the radius of the curvature.

h) Assign a text color.

i) Assign a background color.

j) Specify the appearance of the border.




Basic form field settings

(Form editor)

Please note that the basic settings are dependent on the form field type. Two options are available for the single-line text box used in this example:

a) (Main page tab) Form field name.

b) Enter the text that should appear in the form field. If no text is entered, the field remains empty.

c) Specify the CSS class for the form field size.



d) (Validation tab) Enable checkbox if you want the form field to be a required field in the form.

e) Select the form field content. If the entered text deviates from the settings, the user will automatically be notified.

f) Specify the minimum content length for the form field.

g) Specify the maximum content length for the form field.




CSS settings for forms

(Form editor)

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.

a) Select the form properties for which you want to effect CSS settings. Different configuration options are shown depending on your selection. In our example, we will edit the CSS settings for the form.

b) Select the background color of the form.

c) Add a link for the form background image.

d) Select the position of the background image.

e) Select whether you would like to tile the background image.





CSS templates

(Form editor)

a) Another option besides defining an own CSS for the form is to choose a template. Click the Templates button to open the CSS templates.

b) Click one of the arrows to navigate to the left or right.

c) An empty CSS template is selected by default. This gives the form a "normal" appearance.

d) Select the desired CSS template. Clicking the template changes the appearance of the previously selected form you are currently editing in accordance with the CSS of the selected template. In this example, shadows were added.

e) This is what the form looks like with shadows.

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





Form preview

(Form editor)

a) Click Preview after saving the form. A new browser tab opens with a preview of the form you created.

b) The preview shows how the form will be displayed on the website. The forms of the Worldsoft Business Suite have been optimized for mobile devices, making them ideal for use in responsive web design.

After configuring all the settings and previewing the form, click Next step to go to the form settings.

You are now leaving the form editor.  





Form settings

a) Change form name.

b) Change form description.


c) Enter the form title. The form title will be displayed above the form.

d) Enter the text for the thank-you page. This is the text that appears as soon as the user has submitted the form.

e) Enter the link to your thank-you page. Instead of having the text entered above displayed, you can also specify a website that is to be shown to the user instead.

f) Choose whether you would like to link to the text entered above or to your link when the form is submitted, i.e. whether you prefer option d) or e).

g) Activate checkbox if unregistered users are to be added to the database.

h) Activate checkbox if the user is to be logged in immediately.

i) Specify the mailbox where an entry is to be made.

j) Select the WBS user to whom the completed form is to be sent. 


k) Enter the maximum form width. As all WBS forms are optimized for responsive design, size definitions are defined as max. width and max. height. Max. width/height refers to the maximum width/height that is permissible for a field.

l) Enter the maximum form height. 

m) It is possible to link the form to an own CSS. For this purpose, enter the URL of the respective CSS file here.

n) If no URL exists, it is also possible to enter CSS commands directly. 




Form processes vs. group processes

o) Processes can be attached to any form. Here you can select the processes that are to be initiated once a form has been completed. Click Add rule to create a new process.

There are two ways to auto-execute processes for forms:

Define one or more processes for a group, and define the allocation of the contact submitting the form to this group as a process for the form.

Define one or more processes directly in this form. This will allow you to respond to once-only enquiries automatically without needing to create a group for each enquiry type, which will keep the number of groups manageable.



p) Specify what the process refers to. If selection buttons or checkboxes are shown, you can attach different processes to the various items. 

q) Add another process. 

r) Delete a process. 

s) Defined processes are initiated once the form has been submitted.

t) The following processes are available: 

Add to affiliate network, 
Replace existing group, 
Assign project to lead manager, 
Include system email, 
Add affiliate, 
Add new group, 
Include email. 

Specify a separate process for each individual group for processes relating to the allocation to groups. It is only possible to select a single group in the group hierarchy tree.

u) Click Save to save your settings. Click the Next step button right on top to continue to the next step.

You are now leaving the form settings.




Script for embedding a form in your website

A link and a script are shown in the final step, which allow you to view or include the form.

a) Click this link to preview the form. 

b) Use this script to include the form on your website. Detailed instructions on how to include forms on your website can be found under: Embedding forms in your website



2017 Copyright by Worldsoft AG, All Rights Reserved
Facebook   Twitter   Wordpress  Worldsoft
User Login
Your Email