Form Builder

If you have an e-Promotion or e-Commerce website and require a form (or several forms) you may do this in two ways:

1. Purchase the Zeald Form Builder add-on for your website at our Online Store.
2. Commission Zeald to setup and publish a one-off form for you. Contact our Support team for this.

IMPORTANT: Do not touch any of the existing forms which appear in the Forms tab. These are system forms which should not be edited or deleted, as this may break your website, and you will need to pay us to rebuild the forms. You should only be creating new forms. If you are unsure please contact our Support team for assistance.

If you have an e-Profile website, this does not support form builder - please talk to Zeald about upgrading to an e-Promotion website.
   

Creating a new form

  1. To create a new form navigate to the Forms tab under Content
    contentforms
  2. Enter the name of the new form in the box on the right side of the page and click New
  3. The edit form page will open. Now you can give a main title to the form, then click the Save button
    Step3
  4. To add questions to the form click on the Add question button
    Step4
  5. You can now enter the question text and make some other adjustments:
    step5
  • The Label is the text of your question, e.g. “What is your preferred charity for donation?”
  • Widget - this is where you can select which type of answer you are expecting, e.g. "Select one (radio)"
    Some examples:
    Radio buttons are used when you want the user to select one of a limited number of choices
    Checkboxes are used when you want the user to select one or more options. More than one can be chosen
    JS Calendar is used to enter a date
    Learn more about forms and different types of answers
  • Enter your options in the Option box, e.g. “Give a duck”, “others”
    Important: Each option has to be on a new row! When you chose a type of question where no options are required you can leave this box empty (e.g. "What is your email-address?)
  • Consistency check - this is where you can chose to apply limited error checking to your question, e.g. you want the answer to be a date or an email-address
  • The Filter will normally be set to none by default
  • Some more text associated with your question can be entered in the Explanation text box
  1. Click Save
  2. You'll now need to add the form to a page on your website.
     

Adding a form to your page

  1. Go to the page in "Live Edit" and then click on Add Component button addcomponent (top right hand side)
  2. Find the Form Builder Form component in the list, and click on the Add Component button
  3. Find the form you created earlier, e.g. "charityform"
    addform1
    addform2
  4. The Form code will always be set to Email. The results of the form will be emailed to you, and also stored in the website's database which you can view if you have the Form Builder addon.
  5. If you want to lead your users to a new page after submitting the form (e.g. to a "Thank you for submitting this form" page), you can specify this page by clicking on the Select a link button next to Submit page (but firstly you have to create this Thank you page in the Content tree and then hide the page).
  6. The spam control should be set to yes by default. 
  7. In the Email Settings you can enter the 'to' address where you would like to receive your response emails. Add a 'from' address so you can tell the email has come from your form and you can also specify the subject line of the email.
  8. Click Save
  9. The form will now appear on the page you specified. Here is an example of how it could look like:
    form added
  10. Run a test to make sure everything works as it should
 

Editing the form


As part of ongoing improvements to our Form Builder Addon we've upgraded the form editor so that you can now edit forms in Live Edit. If you have any trouble with this, you can still use the editor in Website Manager.
Either browse to the form you want to edit in Live Edit mode, or  if you're editing a form under Content > Forms you'll notice this at the top of the page:

form liveedit links
 

Adding new questions or headings


You can click the "Add heading" or "Add question" buttons at the top of the component to add a new question or heading to the form. 
 

Editing existing questions or headings

If you move your mouse over a field you will see icons to edit it:

form liveedit component

If you prefer to use the Website Manager form editor you can use this to edit your form instead, see the instructions below.
 
  1. To add another question to your form, just click on the Add question button.
  2. If you want to edit a question, just click on the question text on the edit form page
  3. The order of your questions can be changed by clicking on the arrows next to the question
  4. To add a heading just specify a name in the text box and click the Add as heading button, e.g. “We are interested in your opinion!”
  5. Click Save
Please note: It is no problem to use different kinds of widgets in one form! You can specify this for every new question you add to the form
 

Editing the text format

 
  1. on Live Edit mode, hover over the question or entry, and click the pencil icon.
    Step1-208
     
  2. Enter the html tag of the preferred text format.  

    Bold <b> Text Here </b>
    Underlined  <u> Text Here </u>
    Italic <em> Text Here </em>

    Step 2
     
  3. Click Save.  

    Step 3
This will result to:
result-931
 

Exporting data from forms

  1. To export data from forms you need to navigate to the Survey Result tab under the Forms tab. You will see a list with all the Forms you currently have on your website, which have submissions. Click on the one you are interested in and a page with the results will appear. You can also download the Results in Excel format:
 

Multi-file upload widget

 

We've created a new file upload component that takes advantage of new features in modern browsers (generally referred to as "HTML5") to allow you to upload multiple files at a time.  
We've added multiple file upload support in for forms, which gives users the ability to upload one or more files on a form that you can then download.

To add a multi-file upload to a form, add a new question to your form in Live Edit (as per the instructions above). Under 'field type', select one of the upload widget options:

form_liveedit_upload.png