Adding Form Elements

Now that you have your blank form, you can start to populate it with lots of form elements to obtain the answers you require.

• Inserting a Block of Text or Section Heading
• Inserting a Textbox
• Inserting a List
• Inserting Rateable Options
• Inserting a table
• Inserting an Upload Button
• Inserting a Date Picker
• Inserting a Time Picker 
• Adding a Page Break
• Saving

Inserting a Block of Text or Section Heading

With the Text button, you can insert a block of descriptive text or emphasise sections with headings.  The Rich Text option allows you to style your content, as well as add images or links.

• Navigate to your form and click the Text button from the Edit tab.  A Default Text element will appear. Left-click on the element to open its settings, or click and drag to change the order of your question fields
  
  
• The Field Settings sidebar will open to the right of your screen.
   
  • Text Type 
    • Heading 
    • Plain Text
    • Rich Text
      
      
  • Text - Enter the text that you would like to appear on your form
    
    
  • Class - For forms with specific styling, you may have been given a CSS Class name to enter by a member of our team.  If so, enter the text here.

Inserting a Textbox

With the Textbox element, you can add a field for users to input some data.

• Navigate to your form and click the Textbox button from the Edit tab.  A new text-box element will appear with the default user prompt text, Please enter.  Left-click on the element to open its settings, or click and drag to change the order of your question fields
  
  
• The Field Settings sidebar will open to the right of your screen.
  
  
  • Type of text box - Specify if the textbox should appear as Single Line or Multiline.
    
    
  • User Prompt - Enter a message or question for the visitor to respond to.  For example, Please enter your name.
    
    
  • Default text - Type text which will populate the textbox.  For example, if requesting a date of birth, you could enter DD/MM/YYY to state the required formatting.
    
    
  • Class - For forms with specific styling, you may have been given a CSS Class name to enter by a member of our team.  If so, enter the text here.
    
    
  • Height of the text box (in rows) - Enter the textbox height by typing the number of expected rows.
    
    
  • Width of the text box (in characters) - Enter how wide the textbox should appear by typing a number of expected characters.
    
    
  • Requires an answer - From the drop-down, specify if this Textbox is a required field (True) or not (False).  If you have selected True, an asterisk (*) will appear at the end of the user prompt. The form cannot be submitted without an answer for the required fields.
    
    
  • Validation Type - Validate text entered into this field.  For example, if the field is asking for an email address, you can select Email Address from the validation list to ensure the information being entered is in the expected format.  You can also apply validation rules for a UK Phone Number and UK Postcode.
    
    
  • Must contain a specified value - This allows you to apply a keyword/password to the form.  The user will not be able to submit the form until they have entered the correct word into the field.
    
    
  • Required value - If the setting Must contain a specified value to Yes, enter a value that the user must type in order for the form to be submitted.
    
    
  • User tip/instructions - Enter text to assist the user.  If a tip has been added, the textbox will have a question mark (?) appear directly below.  Hovering over the question mark will reveal your tip message in a pop-up.

Inserting a List

Lists are a great way of displaying a range of selectable data, whether you require one answer or a number of answers to be selected, there are options for dropdowns, lists, radion options or checkboxes. 

• Navigate to your form and click the List button from the Edit tab.  A new radio button element will appear with the default user prompt text, Select one of the following. Left-click on the element to open its settings, or click and drag to change the order of your question fields
  
  
• The Field Settings sidebar will open to the right of your screen.
  
  
  • Type of list - Select what type of list you require:
    • Radio Buttons - Only one answer can be selected.
    • Drop Down - Only one answer can be selected.
    • List - Only one answer can be selected.
    • Checkboxes - Multiple answers can be selected.
      
      
  • User Prompt - Enter a message or question for the visitor to respond to.  For example, Please select your title.
     
  • Class - For forms with specific styling, you may have been given a CSS Class name to enter by a member of our team.  If so, enter the text here.
     
  • If this field represents a type of booking, select which field represents the number of attendees - Leave this option blank for standard forms.  
     
  • Values available in the list - Displays all values in your list.  If required, each option can be configured, by clicking the cog icon, to set the maximum number of times an option can be selected, and email addresses to notify when the selection is made.
     
  • Option Text - You can add more values to your list by typing text in the Option Text field and by pressing Add Option.
     
  • Requires an answer - From the drop-down, specify if this Textbox is a required field (True) or not (False).  If you have selected True, an asterisk (*) will appear at the end of the user prompt.  The form cannot be submitted without an answer for the required fields.
     
  • User tip/instructions -  Enter text to assist the user.  If a tip has been added, the list container will have a question mark (?) appear directly below.  Hovering over the question mark will reveal your tip message in a pop-up.

Inserting Rateable Options

If you would like to obtain user feedback, rateable options are an efficient means to do so.  

• Navigate to your form and click the Rateable button from the Edit tab.  A new rateable radio button element will appear with the default user prompt text, Please rate the following. Left-click on the element to open its settings, or click and drag to change the order of your question fields
  
  
• The Field Settings sidebar will open to the right of your screen.
  
  
  • Initial Prompt - Enter an initial user prompt for the block of rateable questions.  For example, Please rate the following in relation to our school newsletter.
    
    
  • Class - For forms with specific styling, you may have been given a CSS Class name to enter by a member of our team.  If so, enter the text here.
    
    
  • Response Headings - Select response values from a predefined list or create your own.  These headings will apply to all questions in your rateable container.
    • 0-5
    • 0-10
    • V.Poor - Excellent
    • V.High - V.Low
    • Custom
      
      
  • Questions - Display all questions in your list.  You can drag to reorder questions using the arrows icon.  To delete a question, click the cross icon 
    
    
  • New Question - Enter a question for each rateable block of values.  For example, "Please rate the content of our school newsletter from 0 to 5 (0 = Poor, 5 = Excellent)".
    
    
  • Requires an answer for each - From the drop-down, specify if this container is a required field (True) or not (False).  If you have selected True, an asterisk (*) will appear at the end of the user prompt.  The form cannot be submitted without an answer for the required fields.
    
    
  • User tip/instructions - Enter text to assist the user.  If a tip has been added, the list container will have a question mark (?) appear directly below.  Hovering over the question mark will reveal your tip message in a pop-up.

Inserting a Table

Tables can be a handy and organised way of obtaining a list of responses to the same question, for example, employment history for job applications, or a list of previous schools for an admissions form. 

• Navigate to your form and click the Table button from the Edit tab.  A new table element will appear with the default user prompt text, Please rate the following. Left-click on the element to open its settings, or click and drag to change the order of your question fields
  
  
• The Field Settings sidebar will open to the right of your screen.
  
  
  • Initial Prompt - Enter an initial user prompt for the block of rateable questions.  For example, Previous employment.  Please include all full and part-time positions starting with the most recent first.
    
    
  • Class - For forms with specific styling, you may have been given a CSS Class name to enter by a member of our team.  If so, enter the text here.
    
    
  • Input Type - Specify if the input boxes should appear as Single Line, Multiline or Radio buttons
    
    
  • Custom Headings - Give each column heading a name.  For example, Employer, Start Date, End Date, Job Title, Salary/Grade, Reason for leaving, etc.
    
    
  • Text - To add further column headings, type the column name in the Text field and click Add Option.
    
    
  • Items to rate - For each row, enter text or type a number to identify the specific row.
    
    
  • Text - To add further row headings, type the row text or number in the Text field and click Add Option.
    
    
  • Requires an answer for each - From the drop-down, specify if this container is a required field (True) or not (False).  If you have selected True, an asterisk (*) will appear at the end of the user prompt.  The form cannot be submitted without an answer for the required fields.
    
    
  • User tip/instructions - Enter text to assist the user.  If a tip has been added, the list container will have a question mark (?) appear directly below.  Hovering over the question mark will reveal your tip message in a pop-up.

Inserting an Upload Button

You might like users to upload documents in response to your form.  

• Navigate to your form and click the Upload button from the Edit tab.  A new upload button will appear with the default user prompt text, Please enter. Left-click on the element to open its settings, or click and drag to change the order of your question fields.
  
  
• The Field Settings sidebar will open to the right of your screen.
  
  
  • User Prompt - Enter a message or question for the visitor to respond to.  For example, Upload a CV and covering letter.
    
    
  • Class - For forms with specific styling, you may have been given a CSS Class name to enter by a member of our team.  If so, enter the text here.
    
    
  • Requires an answer - From the drop-down, specify if this container is a required field (Yes) or not (No).  If you have selected Yes, an asterisk (*) will appear at the end of the user prompt.  The form cannot be submitted without an answer for the required fields.
    
    
  • Max file size - Set a maximum file size for uploaded documentation.
    
    
  • Allowed file types - Specify acceptable file types to be uploaded.  By default, the allowed file types are pdf, rtf, txt, xls, xlsx, ppt, doc, docx, pps, pptx, png, jpg, jpeg, gif.
    Note:  If you would like to add additional file types, they must be separated with a comma and no spaces.
    
    
  • User tip/instructions - Enter text to assist the user.  If a tip has been added, the list container will have a question mark (?) appear directly below.  Hovering over the question mark will reveal your tip message in a pop-up.

Inserting a Date Picker

The date picker option allows users to select a date using a calendar.  The range of dates available can be set, to make this easier for them to make their selection and all the responses will be in the correct date format.

• Navigate to your form and click the Date Picker button from the Edit tab.  A new date picker element will appear at the bottom of your form.  Left-click on the element to open its settings, or click and drag to change the order of your question fields
  
  
• The Field Settings sidebar will open to the right of your screen.
  
  
  • User Prompt - Enter a name for your date picker field.  For example, "Start Date" or "Date of Birth".
     
  • Class - For forms with specific styling, you may have been given a CSS Class name to enter by a member of our team.  If so, enter the text here.
     
  • Start Date - If this is left empty, the user will be able to go back to any date in the past.  If you would like to limit how far the dates can be selected in the past, select a date here.
    
    
  • End Date - If this is left empty, the user will be able to go back to any date in the past.  If you would like to limit how far the dates can be selected in the past, select a date here.
    
    
  • Requires an answer - From the drop-down, specify if this Textbox is a required field (True) or not (False).  If you have selected True, an asterisk (*) will appear at the end of the user prompt.  The form cannot be submitted without an answer for the required fields.
    
    
  • Date Format -  by default the date format will be set to dd/mm/yy.  If you would like a different format, enter one of the options listed:
    
    • d - day of month (no leading zero)
    • dd - day of month (two digit)
    • o - day of the year (no leading zeros)
    • oo - day of the year (three digit)
    • D - day name short
    • DD - day name long
    • m - month of year (no leading zero)
    • mm - month of year (two digit)
    • M - month name short
    • MM - month name long
    • y - year (two digit)
    • yy - year (four digit)
  • User tip/instructions - Enter text to assist the user.  If a tip has been added, the list container will have a question mark (?) appear directly below.  Hovering over the question mark will reveal your tip message in a pop-up.

Inserting a Time Picker

The time picker option allows users to select a time in 15-minute increments.  The range of times available can be set so that dates can only be selected from your chosen range.  For example, if you wish, users could only select a time during the school day.

• Navigate to your form and click the Time Picker button from the Edit tab.  A new date picker element will appear at the bottom of your form.  Left-click on the element to open its settings, or click and drag to change the order of your question fields
  
  
• The Field Settings sidebar will open to the right of your screen.
  • User Prompt - Enter a name for your time picker field.  For example, "Start Time"
     
  • Class - For forms with specific styling, you may have been given a CSS Class name to enter by a member of our team.  If so, enter the text here.
     
  • Start Time - If this is left empty, the user will be able to select any time.  If you would like to set the earliest time that can be entered by the user, select it here.  
    
    
  • End Date - If this is left empty, the user will be able to select any time.  If you would like to set the latest time that can be entered by the user, select it here.  
    
    
  • Requires an answer - From the drop-down, specify if this Textbox is a required field (True) or not (False).  If you have selected True, an asterisk (*) will appear at the end of the user prompt.  The form cannot be submitted without an answer for the required fields.
  • User tip/instructions - Enter text to assist the user.  If a tip has been added, the list container will have a question mark (?) appear directly below.  Hovering over the question mark will reveal your tip message in a pop-up.

Adding a Page Break

If you would like to have your form broken down into smaller pages, which the end user will click next to access, add page breaks to your form.

• Navigate to your form and click the Add Page button from the Edit tab.  A new Page Break element will appear at the bottom of your form.  Click and drag the Page Break element to move it into a different position.
  
  
• When the user views the form for completion, they will be prompted to click next at the point in the form where you have added the page break. To continue to the next page, all of the validation criteria for the previous questions must be met.

Saving

Once you have added your questions and updated the settings, you will need to save your form. 

• Click the Edit Tab
• Select Save, then Save Now