Creating Web Forms / Survey
Any time a form is needed, a new form must be created. Do not attempt to copy/paste a previously built form. Because the code is so complex, copy/pasting old forms will almost always experience massive errors and become unusable. Please follow the below instructions to create a Blank
Form from scratch.
- Go into the Work Area
- Select Content (upper right screen in the Work Area). Click selected folder on left. Select New in View Contents.
- This will open a type menu. Select HTML Form/Survey
- Complete each of the five steps in the process
- The first step in the process is choosing the type of form you want to create. Select the type of form you wish to make ("Blank Form is best practice") and then click Next.
- The second step in the process will be entering the title and description. After this is complete click Next.
*Note: The title will be the end path in the URL ex.
www.ship.edu/form. Spaces will translate to underscores. Do not use slash marks.
- The third step in the process is assigning a task to a user or user group. Click Next to skip "Assign Task"; this will be done later. If you do this step, a task will be created every time a site visitor submits this form.
- The fourth step lets you determine what will happen when a user fills out the form. Leave "Display a message" checked and create a post back message. Click Next when finished.
*Note: This message is displayed alone in the content area after a form has been submitted without error. “Thank you.” Is sufficient, although you may wish to add follow up instructions.
- Once you reach the fifth step click Done to proceed to form creation where you will add content and edit properties
- The last step of the process is the creation of the form content
After you have completed the steps above, it is time to begin placing form elements. You will want to consider the type of information you are asking for and think about how the user will react when filling out your form. Many things that seem simple to the form maker do not seem as simple
to the user. Because forms are so complex and time-consuming to build, it is to your advantage to contemplate user experience before deciding on a final design layout for your form.
The same issues with copying forms apply to copying form elements. Please add brand new elements and do NOT copy/paste previous ones. All form elements MUST have different descriptors. If you copy/paste – you run the risk of having two elements with the same name, and will cause the form to
- Leaving the Submit button alone, delete the “Place form elements here...” text from the screen. You will then begin placing form elements above the Submit button.
- Use the table function to layout blocks of space where you will place form elements such as text, check boxes, drop down menus, comment boxes, etc. It helps to know your layout beforehand to avoid issues with moving cells later on.
- Build all descriptive text blocks within the table to give a basic shape to your form.
- Form elements are available to insert from the Editing Ribbon at the top of the page
(Last 11 Icons)
- Text Field
- Allows visitor to enter short words or sentence of text
- Choices Field
- Creates a list of options that a visitor will usually only one option
- Checkbox Field
- Allows visitor to select multiple options from a list you provide
- Calendar Field
- Allows pop up calendar to select date and automatically add to form
- Insert Button
- Inserts blank button (not generally used)
- Insert Reset Button
- Allows user to reset all entered information. Does not submit form
- Insert Submit Button
- Allows user to submit the form
- Field Properties
- Allows editor to add properties to the field including: field name, dimensions, option to allow multiple lines of text, validation requirements (must contain number, letters, etc)
- Check compatibility
- View Data as Field List
- Place cursor in desired spot for a form element, and click on the corresponding form element button to begin building the element.
- Things to remember while building elements:
- Add a Reset Button so that all elements can be cleared
- To make the reset button similar in size to the submit button click on the code icon
on the bottom left hand of the screen. If you attempt this, make sure to follow instructions exactly and not touch any other code. Mistakes in code will prevent you from leaving the code page and could cost you any completed work since your last save.
- Scroll to the very bottom of the code and locate the submit and reset code. Replace it with this new code so that the submit and reset match each other.
- When Finished, click the Design Button
to return to the design page
- Save, Check in, or Publish your form when you are finished. Remember to set your form properties to control where the data will be sent.
- Test your
form. Make sure you have the mail-to properties set to an email account you can access. Fill out the form as if you were a sample respondent. If there are errors in the form, the system will throw refuse to accept the form information. If there are no errors, check the email account for the data
report and make sure that it is displayed in a way that will make sense to those collecting the data. You may wish to re-arrange the design of your form elements to make the data report easier to follow.
- When you are satisfied that your form is complete and in working order, double check the mail to properties, ensuring your data is sent to the correct location before making the form accessible to the public. See Setting Form Properties for more tips on Data Retrieval