Adding Form Elements

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

• 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 Block of Text or Section Heading

With the Text button, you can insert a block of text or emphasise sections with headings.

• Navigate to your form and click the Text button from the Edit tab.  A Default Text container will appear.  Left-click on the container to open its settings.
  
  
• The Field Settings sidebar will open to the right of your screen.
  • Heading - Select True or False to specify if the container is a heading field (True) or a block of text (False).
  • Text - Enter a heading or message text for the user to respond to.
  • 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.
    
    
• See below for how to Save your changes.

Inserting a Textbox

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

• Navigate to your form and click the Textbox button from the Edit tab.  An example container will appear with the default user prompt text, Please enter.  Left click on the container to open its settings.
  
  
• 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.
    
    
• See below for how to Save your changes.

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.

• Navigate to your form and click the List button from the Edit tab.  An example radio button container will appear with the default user prompt text, Select one of the following.  Left-click on the container to open its settings.
  
  
• 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.
    
    
• See below for how to Save your changes.

Inserting Rateable Options

If you would like to obtain user feedback, rateable options are an efficient means to do so.  With a few quick clicks, users can give an open day, school play and lots of other events, occasions, products, etc a score.

• Navigate to your form and click the Rateable button from the Edit tab.  An example rateable radio button container will appear with the default user prompt text, Please rate the following.  Left-click on the container to open its settings.
  
  
• 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 on 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.
    
    
• See below for how to Save your changes.

Inserting a Table

If you advertise vacancies on your website, tables can be a handy and organised way of obtaining a list of previous employment history. 

• Navigate to your form and click the Table button from the Edit tab.  An example table container will appear with the default user prompt text, Please rate the following.  Left-click on the container to open its settings.
  
  
• 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.
    
    
• See below for how to Save your changes.

Inserting an Upload Button

If you advertise vacancies on your website, you might like users to upload supportive material for their application.  With the Upload, you can!

• Navigate to your form and click the Upload button from the Edit tab.  An example upload button will appear with the default user prompt text, Please enter.  Left-click on the container to open its settings.
  
  
• 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.

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