Forms (WYSIWYG)

Overview

Note: This feature is available in the Classic Editor only.

The Insert/Edit Form tool inserts a form that allows visitors to the page to input information, and that information to be collected and viewed by site users. 

Forms Icons in the Toolbar

It should be noted that these forms are not the same as those provided with LDP Forms, and are implemented in a very different way. For ease of access and more streamlined use, it is recommended that LDP Forms be used instead. Visit the LDP Forms page for more information.

Once a form has been initially created and added to a page, the other form tools on the toolbar become available. These tools areInsert/Edit Input Element, Insert/Edit Select Element, and Insert/Edit Textarea Element. Clicking these will allow the user to input certain elements into their form. 

Insert/Edit Form

For a full tutorial on how to add a form to a webpage, visit the Forms Tutorial page.

General Tab

The General tab is displayed by default after clicking on the Insert/Edit Form tool within the WYSIWYG Editor.

General Tab of Insert/Edit Form 

Auto-validate: Checks to make sure that the information is input correctly
Name: Input a name for the form
Action: Where the data in the form will be submitted 
Method:

  • POST: The form data will be sent as an HTTP post transaction
  • GET: The form data will be sent in the URL of the resulting page

Target: Specifies where the resulting page will be opened 
Encoding type:

  • None: No encryption
  • multipart/form-data: A form only needs to be set to form-data if a file input (i.e., uploading a file by a web visitor) is being inserted

Class: Applies a defined CSS class to the form 

Advanced Tab

The Advanced tab presents further options for editing forms with the Insert/Edit Form tool within the WYSIWYG Editor.

advanced tab

Id: A unique id for the form
onsubmit: Sets a script to execute when the form is submitted
onreset: Sets a script to execute when the form is reset
Summary: Summarize the content of the form
Style: Sets any inline styling for the form

Hidden Fields Tab

The Hidden Fields tab presents a way for users to add a hidden filed for a form with the Insert/Edit Form tool within the WYSIWYG Editor.

hidden tab

Hidden Fields: Inserts an input that can neither be seen nor edited by the user
Name: Identifies the input for processing after submission
Value: Specifies the value that is submitted

Deleting a Form  

Position the cursor within the form to be deleted and click the Delete Form tool on the WYSIWYG toolbar. This will delete the content within the form as well.

delete a form button

Input Element

Once a form is created, an input element for a form can be added. As many as needed can be added.

insert/edit an input element button

Insert/Edit Input Element: General Tab

general tab

  • Name: Identifies the input for processing after submission
  • Value: Varies with the type of input
    • For text input, defines the default value
    • For checkboxes and radio buttons, defines the value that will be submitted
    • For buttons, defines the test that is shown on the button

Type:

  • text: Gives a text field
  • checkbox: Gives a checkbox
  • radio: Gives a radio button
  • button: Gives a normal button
  • file: Gives a file upload field
  • masked password: Gives a text field where the characters will be represented by bullets
  • submit button: Inserts the button to submit the form
  • reset button: Inserts a button that will empty/reset all of the form elements

Size: Specifies the size of the element. Only affects text, file, and password types 
Height: Specifies the height of the element 
Width: Specifies the width of the element 
Background image: Inserts a background image for the element 
Border color: Gives the element a border of the specified color 
Background color: Gives the element a solid background of the specified color 
Class: Gives the element a class for use in CSS or JavaScript

Inserting an Input Element: Advanced Tab

Once a form is created an input element for a form can be added. As many as needed can be added. The Advanced tab provides additional fields for defining a form element.

advanced tab

Id: Gives the element a unique id 
onfocus: Executes a script when the element comes into focus 
onblur: Executes a script when the element goes out of focus 
onchange: Executes a script when the element is changed 
onselect: Executes a script when the element is selected 
onclick: Executes a script when the element is clicked 
onkeyup: Executes a script when a key is pressed 
onkeydown: Executes a script when a key is released 
Maxlength: Specifies the maximum number of characters that can be input. Only for text and password types 
Required: Specifies whether the element is required for the form to be submitted 
Checked: Specifies whether a checkbox or radio button will be checked when the form loads 
Disabled: Specifies whether the element is disabled 
Source: Specifies an image to display as the submit button 
Summary: Summarizes the element 
Style: Specifies any styling that is applied to the element 

Select Element

In addition to input elements, select elements can also be added to a form.

insert/edit a select element button

Insert/Edit Select Element: General Tab

general tab

Name: Gives the select element a name
Name or ID: The input that is submitted for the selected option
Value: The value that is displayed for the selected option
Default Selected Value: The value that will be displayed by default
Multiple Selections Allowed: If checked, allows a user to select multiple options at once
Number of Option Rows: Specifies the number of options that are visible at any one time
Width: Specifies the width of the select element
Height: Specifies the height of the select element
Background image: Specifies an image to be shown in the background of the select element
Border color: Specifies the color for the border of the element
Background color: Specifies the color of the background of the element
Class: Specifies the class of the element for use in CSS and JavaScript

Insert/Edit Select Element: Advanced Tab

advanced tab

Id: Gives the element a unique ID
onfocus: Specifies a script which will run when the element is in focus
onblur: Specifies a script which will run when the element looses focus
onchange: Specifies a script which will run when the element is changed
onselect: Specifies a script which will run when the element is selected
onclick: Specifies a script which will run when the element is clicked
Required: Specifies whether this element is required to complete the form
Disabled: Specifies whether this element is disabled
Summary: Summarizes the content of the element
Style: Specifies any styling of the element

Textarea Element

Another type of form element that can be added is a textarea, where users filling out the form can type in text themselves.

insert/edit a textarea button

Insert/Edit Textarea: General Tab

general tab

Name: Gives the element a name
Value: Specifies the default text for the element
Rows: Specifies the number of visible rows in the text area
Columns: Specifies the number of visible columns in the text area
Background Image: Specifies a background image for the text area
Border color: Specifies the color of the border of the text area
Background color: Specifies the color of the background of the text area
Class: Gives the element a class for use in CSS and JavaScript

Insert/Edit Textarea: Advanced Tab

advanced tab

Id: Gives the element a unique Id
onfocus: Specifies a script to run when the element is in focus
onblur: Specifies a script to run when the element looses focus
onchange: Specifies a script to run when the element is changed
onselect: Specifies a script to run when the element is selected
onclick: Specifies a script to run when the element is clicked
onkeyup: Specifies a script to run when a key is released
onkeydown: Specifies a script to run when a key is pressed
Maxlength: Specifies the maximum number of characters allowed in this text area
Required: Specifies whether this element is required to complete the form
Disabled: Specifies whether this element is disabled
Summary: Summarizes the content of this text area
Style: Specifies any styling for this element