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.
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.
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
- 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
- Things to remember while building elements:
- Add a Reset Button so that all elements can be
make the reset button similar in size to the submit button click on the code
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.
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.
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