Drupal 7 Help Guide

Welcome to Drupal 7

Drupal is a content management system (CMS) used by a number of organizations to build and maintain websites. Drupal's users, permissions and roles allow you to delegate some of the management of your site to your colleagues. Users are assigned roles with permissions to perform tasks such as adding or editing all of the content of your site.

This guide aims to give users a strong foundation in Drupal by providing in-depth explanations and a collection of detailed how-to guides.

This guide was written for Drupal version 7.

Drupal 7 at a Glance

Drupal 7 at a glance graphic

This is a brief explanation of key content areas and features of a Drupal website:

  1. Admin menu: Main administration menu for adding and editing website content
  2. Main menu: Main menu for site navigation, displayed horizontally and/or vertically
  3. Block: Area provided for supporting page content
  4. Header images: Header photos configurable for each page
  5. Content tabs: View, edit, outline, revisions and accessibility tabs for accessing and editing website content
  6. Page title: Title for the web page
  7. Content: Main page content
  8. Footer: Information that repeats throughout the site at the bottom of the page

Signing In

NOTE: This is different than the way that you log in to a Drupal 6 site.

To log in to a Drupal 7 site, go to your website (i.e. http://SITENAME.appstate.edu).

Scroll down to the Footer section of the page and click yellow Login.

Login link in footer section of page

On the Shibboleth Single Sign-On page, enter your university username and password and click Sign In.

Shibboleth sign on page

If this is the first time you are logging in to a Drupal site, you will need to complete the Request Drupal Website Access form.

NOTE: Sometimes, when signing in to the site, a message appears that says, "You are not authorized to access this page." This is a bug that we are working to correct. If you see the Admin menu at the top, then you are logged in to the site.

Types of Content

Introduction

  • Page: A page is a simple method for creating and displaying information that rarely changes, such as an "About Us" section of a website.

Intermediate

  • Book Page: A book page is a page of content, organized in a hierarchical order. A book page automatically displays links to adjacent pages, providing built-in navigation.
  • Panels: A panel page is a page with a custom layout, allowing for columned or stacked column layouts.
  • Webform: A webform is an online form that allows you to collect information from your website's visitors. Results can be viewed or downloaded.

Features 

  • News: A news entry adds a post to the website's News page and block for informative updates.
  • Calendar: Provides the ability to display Google Calendars.
  • Image Gallery: An image gallery entry adds a gallery of images to the website, thumbnails that are individually clickable or viewable as a slideshow.
  • YouTube Video: Provides the ability to embed YouTube video content in the pages of your site.

Photo Usage

Images from the Virtual Toolbox have all been vetted for use on university communications.

Virtual Toolbox

University Communications has a database of hundreds of photos available for download in a variety of formats. These images were taken by our university photographers, and are the property of Appalachian State University. They may be used for any official university communications.

Other Photos

Images not taken by our university photographers must be approved by your department's Communications Liaison to ensure all copyright, licensing, and release issues have been complied with.

Caching

Have you ever noticed that sometimes updates you make to your website do not display online immediately?

This is because hourly caching is set up on all our supported campus websites. Enabling caching offers a significant performance boost. The website can store and send compressed cached pages requested by anonymous users. By caching a web page, the website does not have to construct the page each time it is viewed.

So if you have made updates on your website that do not display right away, wait at least an hour to see if the updates post after the cache is flushed with cron.

Dashboard

The Dashboard displays a list of Recent content, as well as several Default shortcuts.

  • Add Content - add content to your site - from the Admin menu, select Content > Add content
  • Find Content - displays Content list - from the Admin menu, selct Content
  • Manage Blocks - displays Blocks list - from the Admin menu, select Structure > Blocks
  • Manage Contact Form - access Contact Form - from the Admin menu, select Structure > Contact Form
  • Manage Taxonomy - displays Taxonomy - from the Admin menu, select Structure > Taxonomy
  • Manage Your Site - displays fields to add information in the footer section - from the Admin menu, select Structure > Manage Your Site
  • My Account / File Browser - displays File Browser

Dashboard

Manage Your Site/Footer

The Footer contains information that repeats throughout the site at the bottom of the page. To edit the Footer, use the Manage Your Site shortcut in the Dashboard. Here, you can add/update Site Contact and Social Networking information. 

You may also access the Manage Your Site section from the Admin menu by selecting Structure > Manage Your Site

Manage your site

Create a Page

From the admin menu on the top, select Content - Add content. On the Add content page, click Page to start adding your new page to the website.

Title

Enter a page title in the Title field.

Title field

The title is what appears at the top of your webpage, and it:

  • defines a title in the browser toolbar
  • provides a title for the page when it is added to favorites
  • displays a title for the page in search-engine results

NOTE: The title is the single most important on-page SEO element (behind overall content).

Body

The Body field is where you will enter all of the content for your new page - text, links, images, etc. The formatting toolbar (also known as the Editor) at the top has a variety of formatting options.

Body field

Editor Options

The formatting toolbar (also known as the Editor) at the top has a variety of formatting options.

Bold, Italic

bold, italicAllows you to format your text as bold or italic.

Select the text to be formatted and click the toolbar icon to toggle on the preferred formatting.

Insert/Remove Bulleted, Numbered List

bulleted list, numbered list iconsAllows you to insert a bulleted or numbered list.

Select the text to be formatted and click the toolbar icon to toggle on the preferred list formatting. Use the drop-down menu next to the list icon to select different number Types for the list. Bullet types are set by the theme.

Bulleted List

  • Item One
  • Item Two
  • Item Three

Numbered List

  1. Item One
  2. Item Two
  3. Item Three

Decrease, Increase Indent

decrease indent, increase indent iconsAllows you to indent a list item or a section of text to the left or right.

Select the text to be formatted and click the toolbar icon to toggle on increase or decrease indent.

  • Item One
    • Indented Item One
    • Indented Item Two
  • Item Two

Undo, Redo

undo, redo iconsAllows you to undo or redo tasks you have performed in the body field.

Click the appropriate toolbar icon to undo or redo a recent task.

Insert/Edit Link

insert/edit linkAllows you to create different types of links in your content.

Select the text or image you want to make a link and click the Insert/Edit Link icon on the toolbar to open the properties window.

NOTE: Always check the links you are including on your website - both when you are adding them for the first time, and periodically throughout the life of your site. Links frequently change or are removed as websites are modified over time, and it's a good rule of thumb to not have broken links on your website.

External

Enter the external link URL in the Link URL field; be sure to enter the entire URL, including the initial http://.

External link

Click Insert to create the link.

NOTE: External links do not open in an new tab. This allows users to be in control of their experience, and they will always have the option to use the Back-button to return to the previous page.

Internal

Enter your page path in the Link URL field.

To obtain your page path for the internal link:

  • Browse to the page to which you would like to link (NOTE: Be sure to open a new browser tab or window - if you navigate away from the page you are editing, you will lose your work.)
  • Select and copy everything AFTER the .edu, including the initial forward slash, from the URL in the address bar of your browser
  • Paste this text into the Link URL field

Internal link

Click Insert to add the link.

Email

Enter the email address in the Link URL field; choose OK when you are prompted to add the required mailto: prefix.

email link

Click Insert to create the link.

A pop-up message will appear: "The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?"

Click OK.

File

Click the Browse icon next to the Link URL field.
Browse icon 

Click the first Upload button.
First upload button

Click Choose File to browse to your file and click Open.

Click the second Upload button to upload the chosen file to the web server.
Second upload button

With the file highlighted in the file browser, click the Insert file button.
insert file button

Click Insert to create the link.

NOTE: When linking to PDF, DOC or other types of files, it's a good idea to note what type of file the text is linking to, as well as the file size. This helps users know that they will be viewing a file different than a web page, as well as about how long they can expect it to take to load the file. 

File Upload Limit

On most Drupal websites, there is an individual file upload limit of 5MB. This limit ensures that we maximize the amount of server space we are limited to on the web server. We currently host and support over 400 websites on this server, and need to ensure that everyone has enough room for their site files.

If you have a PDF file that is over 5MB that you need to upload to your website, you have a couple options:

  • Use Adobe Acrobat Pro to save it as a reduced file size PDF and/or an optimized PDF.
  • Be sure the dimensions of the document are optimized for screen viewing.
  • If the file is a multi-page document, save it as multiple files for groups of pages (i.e. pages 1-10, pages 11-20, etc). Be sure each file is under the 5MB limit.

Feel free to contact us for assistance if you need help with optimizing your files. 

 

Insert/Edit Anchor

Create Anchor

  • Place the cursor where you want the anchor on the page.
  • Click the Insert/Edit Anchor button.
    anchor icon 
  • Enter a name in the Anchor Name field (do not use spaces or symbols).
    anchor name window 
  • Click Insert

Link to Anchor

  • Select the text you want to link to the anchor location created above.
  • Click the Insert/Edit Link icon.
    insert edit link icon 
  • Select the appropriate anchor from the Anchors menu (the Anchors menu will not appear until you have created at least one anchor). The Link URL field will be populated with the appropriate anchor link.
    anchor link 
  • Click Insert.

Link to Anchor from Another Page

  • Go to the page where you want to create the Link to Anchor
  • Select the text you want to link to the anchor location.
  • Click the Insert/Edit Link icon.
    insert edit link icon 
  • Type the Page Name and Anchor Name in the Link URL field (Example: /test-page-1/test-page-2#test_anchor).
  • Click Insert.

Unlink

unlink iconAllows you to remove a link from text or an image.

Select the linked text or image and click the Unlink icon on the toolbar.

Insert/Edit Image

insert edit image Allows you to insert an image on the page. Learn more about photo usage.

Upload/Add an Image

Position the cursor at the beginning of the text/paragraph where the image should be placed.

Click the Insert/Edit Image icon on the toolbar.

insert edit image 

Click the Browse button next to the Image URL field.

browse

Click the first Upload button.

first upload link

Click the Choose File button to browse to your image file and click Open.

Click the second Upload button to upload it to the web server.

second upload link

With the file highlighted in the file browser, click the Insert File button. The Image URL field will be populated with the appropriate image path.

insert link

Image Description

Enter brief text to summarize your image in the Image Description field.

image description field

NOTE: In order to comply with ADA laws, it is important that any images containing text or links also include Image Descriptions. This text ensures that any information displayed in the image can also be read by screen readers.

Alignment, Dimensions, Border, Vertical Space, Horizontal Space

The Alignment, Dimensions, Border, Vertical Space and Horizontal Space fields are deprecated and should NOT be used. Always resize your images to the size you want them to display on the page PRIOR to uploading them to the site.

Insert

Click the Insert button to place the image in the body field.

Align Image

To align your image, make sure the image is selected and choose Image Right Border or Image Left Border from the Styles menu 

styles menu

Be sure to align images using the Styles menu on the toolbar; DO NOT use the alignment menu within the Image Properties box, as this has been deprecated.

Resizing

When you are adding images to your web pages, it is important that you use a photo editing program (like Adobe Photoshop) to resize the image to the dimensions you want it to display at BEFORE you upload the image to your site for placement. The image properties width and height settings should NEVER be used to resize an image on a web page.

Uploading a large image (i.e. 1200 pixels wide) and then forcing it to resize using the Image Properties settings for width and/or height to display the image smaller (i.e. 200 pixels wide) causes two main issues:

  • The image quality will suffer, causing a blurry, pixelated or distorted looking image.
  • The page load time will be affected; since the image has not actually been resized, the web page still has to load the larger image.

Superscript, Subscript

superscript, subscriptAllows you to format your text slightly above or below the standard text line.

Select the text to be formatted and click the toolbar icon to toggle on the preferred formatting.

Textsuperscript

Textsubscript

Block Quote

blockquoteAllows you to indent a section of text on the page, as well as to format it with larger text.

Select the text to be formatted and click the Block Quote icon on the toolbar.

This text has been formatted with Block Quote.

Insert Horizontal Line

horizontal lineAllows you to insert a horizontal line on the page.

Position the cursor where the horizontal line should be placed and click the Insert Horizontal Line icon on the toolbar.

This is an example of a horizontal line:


Styles

stylesAllows you to position images, aligned to the right or left.

Select the image to be aligned and choose the desired option from the Styles drop-down on the toolbar.

Format

text formatAllows you to select different type formatting for titles, subtitles and text. Heading 3 defines the most important heading. Heading 6 defines the least important heading.

Typically we recommend that you use Heading 3 for paragraph titles, Heading 4 for paragraph subtitles and Paragraph for body text.

Select the text to be formatted and choose the desired option from the Format drop-down on the toolbar.

Heading 3

Heading 4

Paragraph

Remove Formatting

Remove formatting iconAllows you to remove text formatting that you have added, using the Editor options, in the Body section. Select the text that you would like to remove the formatting from, and click the Remove formatting icon on the editing toolbar.

Insert/Edit Table

insert tableAllows you to insert a table on the page.

Inserting a Table

Position your cursor where the table should be placed on the page.

Click the Insert/Edit Table icon on the toolbar.

insert table 

Enter the Columns and Rows for your table.

Cell Padding, Cell Spacing, Alignment, Border, Width and Height are all formatted by the theme styles, so these fields can be left as their defaults.

Click Insert to create a blank table on the page.

Insert table

An empty table will be inserted into the body field.

Empty table

Adding Content to a Table

Position your cursor in each cell to enter content into each table cell. Cursor keys can be used to move between cells within a table.

Formatting Cell Headers

To create column or row headers for the table, enter the text into these cells and select the cells with the cursor.

table with columns

Click the Table Row Properties icon in the toolbar. (You may also perform this action using the Table Cell Properties icon.)

table cell properties icon

Select Header from the Row Type (or Cell Type) drop-down and click Update.

table header properties

Table Properties

You also have additional Table Properties options. Select the cells you want to modify in your table and use the additional table formatting icons in the toolbar as desired.

table row properties Format Table Row Properties

table cell properties icon Format Table Cell Properties

insert row before Insert Row Before

insert row after Insert Row After

delete row Delete Row

insert column before Insert Column Before

insert column after Insert Column After

delete column Delete Column

split merged table cells Split Merged Table Cells

merge table cells Merge Table Cells

Video Filter

video filterAllows you to embed video on your page.

Position cursor where video should be positioned on the page. Click the Video Filter icon on the toolbar to open the Insert Video properties window.

Enter link in Video URL field. Expand the Instructions section for information on formatting video links based on source (YouTube, Vimeo, ASU Streaming Server, etc).

video url field

Set player Width and Height in appropriate fields if desired. Entering Width only will cause Height to default to correct dimension. If entering both Width and Height, be sure to use proportional dimensions.

width field, height field

Set Align left, right or center if desired. The player will default to align left if Align menu is set to None.

align drop-down

Check Autoplay box if you would like video to play when the page loads. It is recommended to leave autoplay disabled, to allow users to control video playback.

autoplay setting

Click the Insert button to insert the formatted video link into the body field.

Click Save to see the video displayed on the page.

Paste as Plain Text

paste as plain textAllows you to strip any formatting from the source prior to pasting into the body field.

Copy the text from the source (Word file, Excel file, other web page, etc) and click on the Paste as Plain Text icon to toggle the feature on. Paste the text into the body field using standard keyboard shortcuts: CTRL-V (PC) or CMMD-V (MAC). Format text as desired using the Editor Options.

NOTE: Always use this option when pasting content into the body field; stripping source formatting prior to putting it into the web page prevents display and validation errors.

The most common issues arise from pasting content directly from Microsoft Word into a web page. Word is a document and word processing application that uses different formatting than a website, which uses HTML to format text and images. When content is pasted from Word directly into a website, sometimes the formatting cannot properly be converted to HTML. Here is a sample of the display errors that may occur from pasting content directly into the body field:

Normal 0 false MsoNormalTable error text

The Paste as Plain Text tool allows you to strip any external formatting from your content before pasting it into the body field of the website. While this does require you to format your text using the website formatting toolbar, it ensures that your text and images will be properly displayed on your website.

Find, Replace

find and replaceAllows you to Find or Find/Replace a word or phrase throughout the text in the body field.

Find

To search for a word or phrase in the body field, click the Find icon on the toolbar. The Find tab displays by default.

Find What

Enter the word or phrase in the Find What field.

Direction

Select the Direction for the search, up or down.

Match Case

Check the Match Case option if the search should include case.

find window

Find Next

Click the Find Next button to start the search.

Find/Replace

To find and replace a word or phrase in the body field, click the Find/Replace icon on the toolbar. The Replace tab displays by default.

Find What

Enter the word or phrase in the Find What field.

Replace with

Enter the new word or phrase in the Replace with field.

Direction

Select the Direction for the search, up or down.

Match Case

Check the Match Case option if the search should include case.

replace window

Find Next, Replace, Replace All

Click the Find Next button to start the search, the Replace button to replace the selected instance of the word or phrase, or Replace All to replace all instances of the word or phrase in the body field.

Spacing

Single-Spacing

To create single-spacing within your body text, use a soft return (SHIFT+RETURN keys on your keyboard).

Single spaced text

Double-Spacing

To create double-spacing within your body text, use a regular/hard return (RETURN key on your keyboard).

Double spaced text

Header Image

The Header Image section allows you to upload header photos for a web page. Learn more about photo usage.

Header photos should be sized larger than 1155 pixels wide by 400 pixels tall and less than 1MB.

Upload a New Header Image

In the Add a new file field, click the Choose File button and browse to your image. Double-click to select the image.

Click the Upload button.

Enter a descriptive name in the Alternate text field. Leave blank to use the filename.

Add an Existing Header Image

Click on the File browser link, then click browse.

Click on the image in the File browser window to select it, then click Insert file button in top left corner. 

Enter a descriptive name in the Alternate text field. Leave blank to use the filename.

Multiple Header Images

Upload additional Header images using the instructions above for Uploading a New Header Image or Add an Existing Header Image. Adding multiple header images will allow the header image to scroll from one image to the next.

Remove a Header Image from a Page

To remove a header image from displaying on a certain page, edit the page, go to the Header image section, and click the Remove button next to the image you no longer want displayed on the page. Then Save the page.

NOTE: Changes made to the attached images are not permanent until you save the page.

Menu Settings

In the Menu settings, check the Provide a menu link option. The Page Title will be displayed In the Menu link title field, or you may enter the text you want to appear on the menu button for your page.  

Menu settings

Under the Parent Item drop-down, select the section of the site you where want your new page's menu button to display.

For example, if you would like your page to be a child or sub-page of Test Page 1, then choose Test Page 1 as the Parent item for the menu settings.

Select Main menu to have it appear on the main navigation. 

NOTE: All pages, unless part of a custom content type or feature, should have a menu item. The menu settings assign a menu item in the navigation to your new page, giving it a logical "home" on the website.

The URL path alias is created based on the menu settings for the page, which is important for usability. This is the feature that automatically creates the URL for your new page. For example, the Web Hosting page on our site has a path alias of http://webservices.appstate.edu/services/department-websites/platform. When viewing this link, the user can see immediately that this page is in the Department Websites Platform section, under the main Services section of the website. So a user could conceivably navigate to this page manually, if needed, just by knowing the path. 

The breadcrumb is also created based on the menu settings for the page, which is another important usability feature. If a user clicked on the link and was taken directly to the Web Services page, the breadcrumb links at the top tell them where they are specifically in the site - Home > Services >Department Websites > Platform. The user can also click on any of those section links in the breadcrumb to be taken up individual levels within the site. Below is an example of a breadcrumb.

Example of a breadcrumb

If your website has pages that have URLs along the lines of http://sitename.appstate.edu/node/##, then the page was created without a menu setting. This can be resolved by editing the page, adding a menu setting, and making sure automatic alias is checked under URL path settings.


Revision Information

If Create new revision is checked, the site will automatically save each version of a page when you make edits to it. You have the option of including a Log message to note what your revision included. If no Log message is included, the site will save the date/time and username of the revision.

Revision information

See Revisions for additional information.

Authoring Information

The site will automatically log the username and the date/time a new page is created.

Authoring information

Publishing Options

Published will be checked by default; this means when you Save the page, it will be live on the site for viewers to see.

publishing options

Promoted to front page and Sticky at top of lists are not configured in the ASU theme by default. This means these items can be checked or unchecked with no effect on the website.

NOTE: If these options have been enabled for custom functionality on your website, you will be notified about what types of content they affect.

To save the work you have done on the page without making it visible to users of the site, uncheck the Published checkbox before you Save the page.

Save

Click the Save button to save your new page.

NOTE: None of the content entered on the Create Page form will be saved until you click the Save button. If you browse away from the Create page form before you have saved it, all entered content will be lost.

Edit a Page

There are two ways to edit a page. You can either browse to the page and click the edit tab, or navigate to the Content List and use the edit link. 

Browsing

Browse to the page on the website to be edited, and click the Edit tab. 

 Edit menu

Make your changes and Save the page.

NOTE: You must be logged in to the website in order for the content tabs to be available. 

Content List

From the Admin menu, click on Content. This displays all content that has been created.

From the Content list, you can Filter your results using the options at the top of the page.

You can view pages by clicking on their Title links, or you can delete pages by clicking on the delete link next to the page title you want to remove.

content list

Revisions

Revisions provide a way for users to view and revert to earlier versions of content that have been archived. Each time content is modified, a version of it prior to the modifications will be saved (if revisions are enabled for the content type).

To view the revisions, browse to the page and click on the Revisions tab.

 Revisions tab

A list of the revisions made to-date will be displayed. The list will display the date, time, and author username of the revision. The current revision will be at the top and noted as current revision in the Operations column.

If a Log message was added to a revision, it will be displayed under the revision.

View

Under the Revision column, click on the date/time link of a revision to view it.

Revision date

Revert

To revert a page of content to an earlier version, click on the revert link under the Operations column.

You will then be prompted to confirm your request by clicking the Revert button again.

revert

Delete

To delete a saved version of the page, click on the delete link under the Operations column.

You will then be prompted to confirm your request by clicking the Delete button again.

Once you delete a revision it is permanently deleted from the website.

Revisions delete

Accessibility

Special attention should be paid to the construction of web pages so that they can be easily "viewed" by people using computer software and equipment such as screen readers, Braille output devices, or non-standard input devices. 

The Accessiblity tab allows you to check for accessibility issues on your pages (i.e. missing "alt" tags for images) so that your content will be available to all audiences.

 Accessibility

Learn more about Accessibility, Section 508 Standards and ADA Guidelines.

Delete a Page

There are two ways to delete a page. You can either browse to the page and delete using the edit tab, or navigate to the content list and click delete. Please note that it is highly recommended that you unpublish a page, as opposed to deleting in case you need to reference the page content in the future.

Browsing

Browse to the page on the website to be deleted, and click the Edit tab.

 Edit menu

Scroll to the bottom of the page and click the Delete button. You will then be prompted to confirm your request by clicking the Delete button again.

Once you delete a page, it is permanently deleted from the website.

It is recommended to use the Publishing options to unpublish the page to hide it from view on the website, instead of permanently deleting the page. This ensures that the page content is available in the future if it ever needs to be referenced. 

NOTE: You must be logged in to the website in order for the content tabs to be available. 

Content List

From the Admin menu, click on Content. This displays all content that has been created.

From the Content list, you can Filter your results using the options at the top of the page.

You can view pages by clicking on their Title links, or you can go directly to the edit page by clicking on the edit link next to the page title you want to update.

Scroll to the bottom of the page and click the Delete button. You will then be prompted to confirm your request by clicking the Delete button again.

 content list

Once you delete a page, it is permanently deleted from the website.

It is recommended to use the Publishing options to unpublish the page to hide it from view on the website, instead of permanently deleting the page. This ensures that the page content is available in the future if it ever needs to be referenced. 

Custom Content Types

custom content type is programming set up on a website to input and display certain types of content. These types of content are built as custom content types and views to make it easier and more efficient for you to add and edit these particular types of content. For example, when you have a custom news type and view, it allows you to add a news post just once, and the website programming will automatically make it appear everywhere news posts are displayed (i.e. on the news page and on the news teaser block on the home page).

If you are editing content on your site and find that there is no "edit" tab, it is probably a custom content type or feature. Some popular examples of content types and views include:

  • News
  • Photo Galleries
  • Calendars
  • YouTube Videos
  • Staff Directories

More information on these custom content types can be found in the Features section.

Adding Custom Content

To add new content to a custom content type and view, simply go to Content - Add content in the admin menu.

Choose the type of content you want to add to the website (News, Calendar, etc).

Complete the fields, just as you would for a standard page, and click Save to add the new post to your site in the appropriate section.

Editing Custom Content

To edit content that is part of a custom content type and view, click on Content in the admin menu to access the Content list. See Content List for instructions.

Filter by the type of content at the top, and then use the edit link next to the content listing you want to change to access the "edit" page for that particular post.

Click Save when you are done with your edits and your content will automatically be updated everywhere that post appears on your website.

Deleting Custom Content

To delete content that is part of a custom content type and view, go to Content - Add Content in the admin menu to access the Content list. See Content List for instructions.

Filter by the type of content at the top, and then use the delete link next to the content listing you want to remove. Click Delete again to confirm. (Be certain you want to delete this content and not just unpublish it from view.)

NOTE: If there is text/content above or below the content listings on the view page, it is likely hard-coded into the view programming. Changes to this content should be emailed to webmaster@appstate.edu to complete.

Menus

The Menus section is used to sort or change the order of the menu items that appear on a website.

In the admin menu, select Structure and then select the Menus link.

Select List links to edit the main menu of the website. An outline of all the pages of your site is displayed here.

Change the order of your menu buttons by moving the drag-and-drop handle next to each menu title into the preferred location. To make a menu link a child link of another item, move the drag-and-drop handle to the right to indent it and designate it as a child or sub-page.

If you want the menu item to not be displayed, uncheck the check box in the Enabled column.

NOTE: Disabling the menu item simply removes the menu item from view on the site - the page itself will still be publicly viewable to users who have the link. See Publishing Options or instructions on how to hide a page from public view.

For usability, menu links should be used for internal links only (links to page on your website). Users expect the menu of a site to navigate only that site - adding links to external pages on the menu can cause confusion. 

Menu screenshot

Blocks

Blocks are generally used for linking to content to that is not part of your site or for easy navigation. Below is an example of a left sidebar block.

Sidebar block

Add a Block

In the admin menu, select Structure - Blocks. The Block Overview page is displayed.

Click the Add block link to begin adding a new block.

Add block

Block title

Enter a title for your block to be displayed in the black block title bar of the block.

Block Title Bar

Block description

Enter a brief description of your block to be used on the block overview page.

Block Description Bar

Block body

Enter the content for your block as shown to the user.

Block Body

Region Settings

Determines where the block is displayed. Under ASU Theme drop-down menu, select where the block should appear on the page.

Page specific visibility settings

Set the pages where the block should appear on the website.

Enter one page per line as Drupal paths. The * character is a wildcard. Example paths are "blog" for the blog page and "blog/*" for all sub-pages of the blog page.

Enter <front> for the home page of the website. When entering paths here, include everything after ".appstate.edu/". For example, if you wanted to set your block to only appear on the About page, you would enter "about" in the pages field.

Selecting All pages except those listed and leaving the Only the listed pages field blank will set the block to appear on all pages of the website.

Block Specific Visibility Settings

Click the Save block button.

Move a Block

Drag and drop cross iconTo change the region or order of a block, grab a drag-and-drop handle under the Block column and drag the block to a new location in the list. (Grab a handle by clicking and holding the mouse while hovering over a handle icon.)

You may also use the drop-down menu in the Region column to move your block.

Remember that your changes will not be saved until you click the Save blocks button at the bottom of the page.

Click Save blocks at the bottom of the page.

Disable a Block

To remove a block from view, move it to the Disabled region of the block overview page.

From the drop down menu next to the block, select <none> to disable the block from view.

Click Save blocks at the bottom of the page.

Edit a Block

Edit Block on Page

Hover over the block to be edited. A gear icon will appear in the upper right corner. Click on Configure block to edit existing block content. Make your changes and click Save.

Configure block

Edit Block on Block Overview Page

From the admin menu, select Structure - Blocks to access the block overview page.

Click the configure link next to the block you want to edit. Make your block changes and click Save block at the bottom of the page.

See Add a Block and Editor Options for additional information on editing block content.

Configure block

File Browser

The File browser allows you to upload, view, and delete files and images you have uploaded to the website. To access the File browser,  from the admin menu, select Dashboard and then select the My Account/File Browser link located in the Default shortcuts box in right column.

My Account Dashboard

Select the File Browser tab in upper right. The <root> directory of the File browser window will display the list of files and images you have uploaded to the website with linking to a file, or adding an image to the site.

File Browser

To upload a file directly to the website, click the Upload button.

upload button

Browse to your file and click Open.

Click the second Upload button to upload the chosen file to the web server.

Second upload button

To delete a file from the File browser, select the file in the file list and click the Delete button.

NOTE: Be sure the file is not being linked to from anywhere on the website before you delete it; otherwise the link or the image will be broken!

Features

feature is programming set up on a website to input and display certain types of content. These types of content are built as features to make it easier and more efficient for you to add and edit these particular types of content.

For example, when you have a news feature, it allows you to add a news post just once, and the website programming will automatically make it appear everywhere news posts are displayed (i.e. on the news page and on the news teaser block on the home page).

If these features are enabled on your site, you will see them as an option when you select Content > Add content from the Admin menu. If you don't see them as an option, and would like to have them enabled, please email webmaster@appstate.edu.

If you are editing content on your site and find that there is no "edit" tab, it is probably a custom content type or feature.

News

The News feature allows you to create news listings for your site. Listings are organized in descending order by date posted, with the most recent listing appearing at the top of the News page. In order to create news, the News feature must be enabled on the website. If you do not currently have the News feature on your site but would like to have it set up, please contact webmaster@appstate.edu.

View a sample of the News page and Latest News block

Create News

To create News, from the admin menu, select Content - Add content. On the Create content page click News.

Title

Enter the Title for your News item.

News feature title bar

Image(s)

Upload a thumbnail image to be displayed with this news item on the news list, page, and block. Use the File browser link to use an image already uploaded to the website. Be sure to input Alternate text for screen readers. Text entered in the image Title field will be displayed as a caption with the image on the news page. Click Choose file to browse to an image and then click the Upload button.

Once an image has been uploaded you can add Alternate Text and Title  details.

  • Alternate Text: This text will be used by screen readers, search engines, or when the image cannot be loaded. See Insert/Edit Image for details on when Alternate Text is required for ADA compliance.
  • Title: The title is used as a tool tip when the user hovers the mouse over the image, and as the caption for the image during the slideshow.

News feature upload image

Body

The Body field is where you will enter all of the content for your new page - text, links, images, etc. The formatting toolbar (also known as the Editor) at the top has a variety of formatting options. See Editor Options for more information.

News feature create body field

Existing Link

Enter the external link (including the initial http://) for this news item if one already exists. Otherwise leave this field blank. 

Categories

Select categories for this news item. Learn more about adding and editing News Categories to the website.

News Categories

Header Image

Upload an image that will display in the header of this page.

Upload Header Image graphic

 Once an image has been uploaded you can add Alternate Text, Title and Caption details.

  • Alternate Text: This text will be used by screen readers, search engines, or when the image cannot be loaded. See Insert/Edit Image for details on when Alternate Text is required for ADA compliance.
  • Title: The title is used as a tool tip when the user hovers the mouse over the image, and as the caption for the image during the slideshow.
  • Caption: The caption will appear with the thumbnail on the news page.

Click the Add another item button to add additional images to the gallery for the News post. Use the drag-and-drop handle to change the order of the images in the News gallery.

 

Authoring Information

The site will automatically log the username and the date/time a new page is created.

Authoring Information

Menu settings

Since the News post is part of a feature and the post will automatically be added to the News page and the Recent News block, there is no need to assign a Menu link title to the News post.

For information on Revision informationAuthoring information, and Publishing options, see their respective instruction pages on this website.

Save

Click the Save button when you have completed entering the News content.

Edit News

There are two ways to edit a News post - by Browsing or via the Content list. See the Edit a Page section on this site for more information.

News Categories

You can manage Categories for News by adding or editing the terms in Taxonomy.

From the Create News page, in the Categories section, click on Manage news categories.

Manage news categories

You can also access News Categories from the Admin menu, select Structure - Taxonomy - News Categories.

To add a category, click +Add term. In the Name field, type the category you would like to add and then click Save.

Calendar

The Calendar feature allows you to diplay public Google calendars on your site. Calendars can be displayed in a variety of formats, including a calendar block format (by week, month or agenda.) You can also combine multiple calendars to be displayed as one calendar. In order to add calendars, the Calendar feature must be enabled on your site. If you do not currently have the Calendar feature on your site but would like to have it set up, please contact webmaster@appstate.edu.

View a sample Calendar page.

Add Calendar

From the Admin menu, select Content - Add content - Calendar.

Enter the name of your calendar in the Title field.

Enter the Calendar ID for this calendar.

To find the Calendar ID, click the drop-down to the right of the calendar name in Google calendar. Click Calendar settings. Find the Calendar Address and you will see the Calendar ID. Copy and paste the Calendar ID into the Calendar ID field.

You may add multiple calendars to be displayed by clicking the Add another item button and entering the Calendar ID.

Select the Calendar View mode for this calendar. 

NOTE: Web Services recommends choosing the Agenda display option for the Calendar View, since this is the most accessible one for users with visual impairments.

You may set a Custom Calendar Title, if desired.

Select any Display Options that you would like to disable.

Click Save.

Embed Calendar

After you have saved the calendar, click on the Edit tab. It will create a node/##, like this: https://sitename.appstate.edu/node/##

Note the number at the end of the URL.

Go to the page where you want the calendar to appear and click the Edit tab. Put your cursor where you want the calendar to appear and type the nid:## within double brackets - for example, see screenshot below. This tells Drupal to embed node 123 on this page.

Node content example

Click Save.

Image Gallery

The Image Gallery feature allows you to display galleries of images on your site. Galleries are linked as thumbnails from the Image Galleries page. In order to create an image gallery, the Image Gallery feature must be enabled on the website. If you do not currently have the Image Gallery feature on your site but would like to have it set up, please contact webmaster@appstate.edu.

View a sample of the Image Gallery feature.

Create an Image Gallery

To create an Image Gallery, from the admin menu, select Content - Add content - Image Gallery.

Title

Enter a Title for your Image Gallery.

Title field

Add Images

The Images field allows you to upload images for your Image Gallery. Click the Browse button under Attach media. You can either upload new file or choose an image from the media module library. Maximum file size is set by default to 6 MB. Allowed file types include jpg, jpeg, gif, and png.

You can also add images, using the Photo content type on the Add content page.

Add New Image

To upload a new file, click Choose File button to browse to your image and double-click to select it. Click the Upload button to upload the file. Click Next once the upload is complete. Enter a description of the image in the Alt Text field. If you would like a description of the image to be displayed in the gallery, enter that text into the Title Text field. Click Save.

Add Image from Library

To select an image already in the library, click on the Library tab in the top right corner. Click on an image to select it, then click Submit.

Use the drag-and-drop handle to reorder the images.

Click the Save button to save the Image Gallery.

Menu settings

Since the Image Gallery is part of a feature and the post will automatically be added to the Image Gallery page, there is no need to assign a Menu link title to the Image Gallery.

For information on Revision informationAuthoring information, and Publishing options, see their respective instruction pages on this website.

Photo

To add a photo to an Album, from the Admin menu, select Content - Add  content - Photo.

Type your caption text in the Caption field.

Add New Photo

In the Photo field, click Choose file button to browse to your image. 

Double-click to select the image.

Click the Upload button.

Enter a descriptive name in the Alternate text field. Leave blank to use the filename.

Add Existing Photo

Click on the File browser link, then click browse.

Click on the image in the File browser window to select it, then click Insert file button in top left corner. 

Enter a descriptive name in the Alternate text field. Leave blank to use the filename.

Select Album

Use the Album drop-down to select the Album for your photo.

Add Photo to Multiple Albums

Click the Add another item button, and follow the instruction above for selecting album.

Save

Click Save. Your photo will be added to the Album(s) that you selected.

YouTube Videos

The YouTube Video feature allows you to add YouTube video content and display it on your site. In order to add YouTube content, the YouTube Video feature must be enabled on the website. If you do not currently have the YouTube Video feature on your site but would like to have it set up, please contact webmaster@appstate.edu.

View a sample page that includes YouTube video content.

Add YouTube Video Content

From the Admin menu, select Content - Add content - YouTube Video.

Enter a Title for your video. 

Enter the Video ID.

The Video ID is the code at the end of the URL, so for https://www.youtube.com/watch?v=CzZqDYvGHLU, the ID is CzZqDYvGHLU.

Click Save to create the YouTube Video.

Embed YouTube Video

After you have saved the YouTube video, click on the Edit tab. It will create a node/##, like this, https://sitename.appstate.edu/node/##

Note the number at the end of the URL.

Go to the page where you want the video to appear and click the Edit tab. Put your cursor where you want the video to appear and type the nid:## within double brackets - for example, see screenshot below. This tells Drupal to embed node 123 on this page.

Insert a node content screenshot

Click Save.

Taxonomy

Taxonomy is used for categorizing content. Terms are grouped into vocabularies. Taxonomy is often used to set up categories for News or other features that can be enabled on a site.

Click on the list terms link to view categories for a particular type of content.

Taxonomy - categories

To add a term (category), click the + Add term link

Add term

Type the term (category) you would like to add in the Name field and click Save.

Contact Form

The contact form facilitates communication via e-mail, by providing a simple way to direct messages to a set of recipients. Users specify a subject, write their message, and (optionally) have a copy of their message sent to their own e-mail address.

The contact page provides a simple form for visitors to leave comments, feedback, or other requests. Messages are routed by selecting a category from a list of options; each category has its own set of e-mail recipients. The actual e-mail addresses defined within a category are not displayed.

From the admin menu, select Structure - Contact Form. The current contact form categories are displayed.

NOTE: It is important to use the contact form on a website, in addition to email addresses/links, to provide a user-friendly method for emailing site contacts.  The contact form allows webmail users to e-mail site contacts in one easy step.

View a sample contact form.

Add Category

Click the + Add category link to set up your site-wide contact form. You can associate different recipients with each category to route e-mails to different people. 

+ Add category

Category

Enter the title of the category to be displayed on the contact form. Example: 'website feedback' or 'general inquiries'

Category field

Recipients

Enter the e-mail address(es) to receive messages for the specified category. To specify multiple recipients, separate each e-mail address with a comma.

Recipients field

Auto-reply

Optional auto-reply. Enter the message to be sent as an auto-reply to all messages sent to the specified category addresses. Leave empty if you do not want to send the user an auto-reply message.

Auto-reply field

Weight

When listing categories, those with lighter (smaller) weights get listed before categories with heavier (larger) weights. Categories with equal weights are sorted alphabetically.

Weight drop-down

Selected

Set this to Yes if you would like this category to be selected by default.

Selected drop-down

Save

Click the Save button when you have completed entering the category.

Edit or Delete a Category

Edit a Category

To change the settings for an existing contact form category, click the Edit link in the Operations column, next to the category to be updated.

Operation - Edit or Delete

Make the desired category changes and click the Save button to save the new settings.

Delete a Category

To delete a contact form category, click the Delete link in the Operations column, next to the category to be removed.

You will then be prompted to confirm your request by clicking the Delete button again.

Books

Book consists of a number of related book pages which may be organized in a hierarchical order, making it suitable for creating manuals, FAQ, resource guides, etc. The book module offers built-in navigation so that users may quickly access adjacent book pages, providing a simple system for organizing and reviewing structured information.

In order to create book pages, the book module must be enabled on the website. If you do not currently have the book module on your site but would like to have it set up, please contact webmaster@appstate.edu.

View a sample book

Create A Book Page

To create a Book, from the admin menu, select Content - Add content. Then click on Book page

Title

Enter the Title for the Book page.

Title field

Body

The Body field is where you will enter all of the content for your new book page - text, links, images, etc. (see Editor Options).

body field

Menu Settings

Only the top-tier page of a book should be given a menu item. If this if the first page in your book, check the Provide a menu link box and enter the name if the menu item in the Menu link title field.

Under the Parent Item drop-down, select where you want your new page's menu button to display.

Select Main menu to have it appear on the main navigation.

Book Outline

Click on the Book outline tab.

book outline

Book

In the Book menu, select <create a new book> to create a new book and make this Book page the top-level page in the new book.

create a new book

Weight

The Weight drop down is used to set the order of Book pages, however using the Books section is a much easier way to sort book pages on the website. To change the order of your Book pages, see the section on Managing the Book Outline.

weight

Other Settings

For information on Revision informationAuthoring information, and Publishing options, see their respective instruction pages on this website.

Save

Click the Save button when you have completed entering the Book page content.

Create a Child Page

There are a couple methods for creating the child pages of a book - from the current Book page and from the Create content page.

From the Current Book Page

While viewing the Book page that you just created, click the Add child page link.

Add child page

See Create a Book for instructions on entering content in the Title and Body fields.

Book outline

Click on the Book outline tab. 

Book: The Book option is already selected with the previously created Book page.

Book outline menu

Parent item: The Parent item option is already selected with the previously created Book page. If desired, select the Parent item in the book for the new Book page. For example, if you would like the Book page to be a child or sub-page of the top-level page Book, then choose Book as the Parent item

book parent menu

Weight: The Weight drop-down is used to set the order of Book pages, however using the Books section is a much easier way to sort book pages on the website. To change the order of your Book pages, see the section on Managing the Book Outline.

weight


From the Create content page

From the admin menu, select Content - Add content. On the Add content page, click Book page to add a new Book page to the website.

See Create a Book for instructions on entering content in the Title and Body fields.

Book outline

Click on the Book outline tab. 

Book: From the Book menu, select the Book the new Book page should be a part of.

book outline

Parent item: Select the Parent item in the book for the new Book page. For example, if you would like the Book page to be a child or sub-page of the top-level page Book, then choose Book as the Parent item

book parent menu

Weight: The Weight drop down is used to set the order of Book pages, however using the Books section is a much easier way to sort book pages on the website. To change the order of your Book pages, see the section on Managing the Book Outline.

weight


Menu settings

Since the child page is part of a Book and will automatically be added to the Book outline, there is no need to assign a Menu link title to the Book page.

For information on Revision informationAuthoring information and Publishing options, see their respective instruction pages on this website.

Save

Click the Save button when you have completed entering the child page content.

Manage Book Outline

The Book outline section is used to sort or change the order of Book pages within a particular Book on a website.

From the admin menu, select Content - Books. The Books Content Page displays a list of existing Books.

Book content

Click on the edit and order titles link to view or edit contents of a Book. The Book Content page lists all pages in the particular Book.

For each page of content, you have the option to viewedit or delete the page.

Book titles

To rename a Book page, type a new name in the Title field and click the Save book pages button at the bottom of the page.

You can also change the order of the Book pages by using the drag-and-drop handle next to each page. To make a Book page a child page of another item, move the drag-and-drop handle to the right, to indent it and designate it as a child or sub-page.

Book Navigation Block

After creating a Book, the Book navigation block will become available in the Disabled section of the block overview page.

Disabled Block Screenshot

See the Blocks section for more information on moving and editing the Book navigation block.

Edit a Book Page

There are two ways to edit a Book page - by Browsing or via the Content list. See the Edit a Page section on this site for more information.

Panels

Panels allow you to create custom layouts for pages on your site. A panel is made up of multiple regions, or panes, that allow you to define areas on the page where content can be displayed.

In order to add a panel page to your site, the panels module must be enabled on the website.

NOTE: Before you create your panel, the content that you will use to populate the regions of your panel page may be created or already exist (i.e. pages or blocks). Be sure to make a note of the titles of each of the pages you will be pulling into the panel page. 

View a sample panel page.

Choose Layout

To begin creating a Panel, from the admin menu, select Content - Add content. On the Create content page, click Panel.

Choose Layout

From the Category drop-down, select the layout type. Options include:

  • Columns: 1
  • Columns: 2
  • Columns: 3
  • Columns: 5

Category specific layout options will display when you select a Category option. Click the desired layout for the Panel.

columns for panel layout

Create Panel

Title

Enter the Title for your Panel.

Title field

Menu Settings

See menu settings for more information on providing a menu link.

Other Settings

For information on Revision informationAuthoring information and Publishing options, see their respective instruction pages on this website.

Save

Click the Save button when you have completed entering the Panel content.

Panel Content

To begin adding content to a Panel, click the Panel content tab.

Panel Content

The regions of the Panel Page are displayed.

Panel Regions

To add content to a Panel region, click the gear icon in the upper left corner of the region to which content is to be added.

Gear icon

Click the Add content link that displays to view the Add content window.

Add Existing Node Content

To add an existing page as content for a Panel region, click the Existing node link.

Existing node

Enter the title or NID of a node

Begin entering the title of the existing page you are adding to the Panel region; select the desired page title from the drop-down that appears with matching results.

Existing node title

Override title

Leave Override title unchecked and blank to use the Page title as the Panel region title.

Check Override title and leave the field blank to display no Panel region title.

Check Override title and enter a different title to change the Panel region title.

Override title

Leave node title

Leave node title should remain unchecked.

Leave node title

Link the node title to the node

Check this box if you would like your pane title to link to the page.

Link node title

Include node links for "add comment", "read more" etc.

Checking this box will put add comment (if comments are enabled for the page) and read more (useful if Build mode is set to Teaser) links on the bottom of the panel region.

Uncheck this box if Build mode is set to Full node, since the entire page content will already be displayed on the Panel, and a read more link will be unnecessary.

Include node links

Template identifier

Leave the Template identifier field blank. The Panel template is set by the ASU/RCOE theme.

Template identifier

Build mode

Select a Build mode for the page to be displayed on the Panel:

  • Full content: Entire page content will be displayed
  • Teaser: Only initial page content will be displayed 

Build mode

Finish

Click the Finish button to return to the Panel content page.

Save

Click the Save button to save the Panel page.

Add Custom Content

To add custom content for a Panel region, click the New custom content link.

New Custom Content

Administrative title

Enter the Administrative title of the existing page you are adding to the Panel region. This title will be used administratively to identify this pane. If blank, the regular title will be used.

Administrative title field

Title

Enter the title of the existing page you are adding to the Panel region. This Title will apear on the panel page.

Title field

Body

The Body field is where you will enter all of the content for your new custom region - text, links, images, etc. (see Editor Options).

Body field

Finish

Click the Finish button to return to the Panel content page.

Save

Click the Save button to save the Panel page.

Add Block Content

To add an existing block as content for a Panel region, click the Miscellaneous link from the Add content window.

Add Miscellaneous content

Select the Block to be added to the Panel from the options listed.

Add block

Override title

Leave Override title unchecked and blank to use the Page title as the Panel region title.

Check Override title and leave the field blank to display no Panel region title.

Check Override title and enter a different title to change the Panel region title.

Override title

Finish

Click the Finish button to insert the block content into the panel region.

Save

Click the Save button to save the Panel page.

Edit a Panel Page

Edit Panel Page Settings

To edit the TitleRevision informationAuthoring information and Publishing options of the Panel, see Edit a Page for more information.

Edit Panel Existing Node

When viewing the panel page, hover over the region with the content to be edited. A gear icon will appear in the upper right corner of the panel region. Click on Edit to edit existing node content.

Edit node button

Edit Panel Custom Content

Click the Panel content tab. Find the Custom region that you want to edit and click on gear icon in upper right corner of custom region. Click on Edit to edit custom content. Once changes are completed, click the Finish button.

Edit custom content

Edit Panel Block Content

When viewing the panel page, hover over the region with the block to be edited. A gear icon will appear in the upper right corner of the panel region. Click on Configure block to edit the block content. 

Configure block

Save

Click the Save or Save block button to save the changes for display on the Panel.

Webforms

Webforms are online forms that allow you to collect information from your site's visitors. After a submission, users may be sent an e-mail "receipt" as well as sending a notification to administrators. Results can be exported into Excel or other spreadsheet applications. Some basic statistical review is also provided.

In order to create a Webform, the Webform module must be enabled on the website. If you do not currently have the Webform module on your site but would like to have it set up, please contact webmaster@appstate.edu.

View a sample Webform

Create a Webform

To create a Webform, from the admin menu, select Content - Add content. On the Add content page, click Webform to start adding your new form to the website.

Title

Enter the Title for the Webform.

Title field

Menu Settings

In the Menu settings, check the Provide a menu link option. The Page Title will be displayed In the Menu link title field, or you may enter the text you want to appear on the menu button for your page.  

Other Settings

For information on Revision informationAuthoring information, and Publishing options, see their respective instruction pages on this website.

Save

Click the Save button when you have completed adding the Webform and are ready to begin configuring the form components, email, and submission settings.

NOTE: Private data or data that should be collected securely should NOT be requested on a webform (i.e. social security number, credit card number, banner ID, etc.).

Form Components

To add or edit form components, click the Webform tab; the form components tab appears by default.

Form components

Label

To begin adding the first form component, enter the field or component name in the Label text field. 

form component label

Type

Select the type of field from the Type drop-down. See Form Component Types for a description of each type of form component.

Form component type

Value

This column will display any default values set for form components.

Required

required textfield box

NOTE: Required checkbox will not display until you have created and saved the first component.

Check the Required box, if this field should be required for form submission. If the field is mandatory, the form cannot be submitted unless the field is filled out or selected by the user.

Click the Add button under Operations to add and configure the new field.

Add button

Edit component

Complete the component settings on the Edit component page. See Form Component Types for details on how to configure these settings for each type of form component.

edit button

Save component

Click the Save component button to save the new form field.

Repeat these steps until all the desired fields have been added and configured on the form.

Form Component Sorting

Change the order of the form components by moving the drag-and-drop handle next to each form component into the preferred location. 

Clone Component

To make a copy of a form component, click the Clone link in the Operations column next to the field to be copied.

Clone button

Complete the Edit components settings for the new field, making sure to update the Field Key so that is has a unique value for this webform.

Cloning can add consistency to your work and save you time.

Delete Component

Click the Delete link in the Operations column next to the field to be deleted. Then click the Delete button to permanently delete the component. The action cannot be undone.

delete button

Form Component Types

Date

Provides month, day and year drop-down fields, as well as a pop-up calendar, for date input.

Date form component

E-mail

Provides a field for e-mail address input, and validates the submitted value is an e-mail address.

E-mail form component

Fieldset

Used for grouping form components; use the drag-and-drop handle to arrange components that are part of the group as chlld items of the fieldset.

Fieldset

File

Provides a file upload for attaching files to form submissions.

File

Grid

Provides a grid formatted field for radio button (single selection) or check box (multiple selection) input. Questions are formatted as rows, and responses are formatted as columns.

All questions in the grid component have the same options for a response. Create separate grid components for differents sets of responses.

Grid

Hidden

Provides a hidden field for internal content entry. Label and text in hidden field will not be displayed on the webform, but will be included in the data saved. A Hidden field does not provide for any input by the webform submitter.

Markup

Provides a field for content entry by the form creator. Content in the markup field will be displayed on the webform. Markup fields are typically used for text, links, or images to be displayed within the webform components - i.e. for additional instructions. A Markup field does not provide for any input by the webform submitter.

Number

Provides a field for number input. 

Number form component

Page break

Provides a page break configuration to create multi-page webforms. 

Page break form component

Select options

Provides a select field for text input. Radio buttons are provided for single value selection. Check boxes and list boxes are provided for mutiple value selection.

Select Options Radio Buttons

Select Options Check Boxes

Select Options List Box

Textarea

Provides a multi-line text field for text input (i.e. descriptions, comments, etc.).

Textarea form component

Textfield

Provides a single-line text field for text input (i.e. name, address, etc.).

Textfield form component

Time

Provides hour and minute drop-downs, as well as am/pm radio buttons, for time input.

Time form component

Date

Label

The field label will be pre-filled with the value entered on the form components page. This is used as a descriptive label when displaying this form element.

Date label field

Field Key

The field label will be pre-filled with the value entered on the form components page. Enter a machine readable key for this form element. May contain only alphanumeric characters and underscores. This key will be used as the name attribute of the form element. This value has no effect on the way data is saved, but may be helpful if doing custom form processing.

Date field key field

Default value

The default value of the field. Accepts any date in any GNU Date Input Format. Strings such as today, +2 months, and Dec 9 2004 are all valid.

Date default value field

Description

A short description of the field used as help for the user when he/she uses the form. Text entered into the description field is displayed below the form component field. You may use special tokens in this field that will be replaced with dynamic values.

Date description field

Validation

Required

Check this option if the user must enter a value.

Start Date

The earliest date that may be entered into the field. Accepts any date in any GNU Date Input Format.

End Date

The latest date that may be entered into the field. Accepts any date in any GNU Date Input Format.

Date validation field

Display

Enable popup calendar

Enable a JavaScript date picker next to the date field.

Use a textfield for year

If checked, the generated date field will use a textfield for the year. Otherwise it will use a select list.

Label display

Determines the placement of the component's label.

Description above field

Place the description above — rather than below — the field.

Private

Private fields are shown only to users with results access.

Wrapper CSS classes

Do not add anything in this window - leave Wrapper CSS classes as is.

Wrapper CSS classes

Save component

Click the Save component button to save the new form field.

E-mail

Label

The field label will be pre-filled with the value entered on the form components page. This is used as a descriptive label when displaying this form element.

E-mail label field

Field Key

The field label will be pre-filled with the value entered on the form components page. Enter a machine readable key for this form element. May contain only alphanumeric characters and underscores. This key will be used as the name attribute of the form element. This value has no effect on the way data is saved, but may be helpful if doing custom form processing.

E-mail field key field

User email as default

Set the default value of this field to the user email, if he/she is logged in.

E-mail User email as default field

Default value

The default value of the field. You may use special tokens in this field that will be replaced with dynamic values.

E-mail default value field

Description

A short description of the field used as help for the user when he/she uses the form. Text entered into the Description field is displayed below the form component field. You may use special tokens in this field that will be replaced with dynamic values.

E-mail description field

Multiple

Allow multiple e-mail addresses, separated by commas.

E-mail multiple field

Format

Allow long or short format. Short format is the default choice.

E-mail format field

Validation

Required

Check this option if the user must enter a value.

Unique

Check that all entered values for this field are unique. The same value is not allowed to be used twice.

Email validation field

Display

Width

Width of the textfield. Leaving blank will use the default size.

Label display

Determines the placement of the component's label.

Disabled

Make this field non-editable. Useful for setting an unchangeable default value.

Private

Private fields are shown only to users with results access.

Wrapper CSS classes

Do not add anything in this window - leave Wrapper CSS classes as is.

Wrapper CSS screenshot

CSS classes

Do not add anything in this window - leave CSS classes as is.

CSS Class screenshot

Save component

Click the Save component button to save the new form field.

Fieldset

Label

The field label will be pre-filled with the value entered on the form components page. This is used as a descriptive label when displaying this form element.

Fieldset label field

Field Key

The field label will be pre-filled with the value entered on the form components page. Enter a machine readable key for this form element. May contain only alphanumeric characters and underscores. This key will be used as the name attribute of the form element. This value has no effect on the way data is saved, but may be helpful if doing custom form processing.

Fieldset field key

Description

A short description of the field used as help for the user when he/she uses the form. Text entered into the Description field is displayed below the form component field. You may use special tokens in this field that will be replaced with dynamic values.

Fieldset description field

Display

Collapsible

If this fieldset is collapsible, the user may open or close the fieldset.

Collapsed by Default

Collapsible fieldsets are "open" by default. Select this option to default the fieldset to "closed".

Hide label

Do not display the label of this component.

Private

Private fields are shown only to users with results access.

CSS classes

Do not add anything in this window - leave CSS classes as is.CSS Classes screenshot

Save component

Click the Save component button to save the new form field.

File

Label

The field label will be pre-filled with the value entered on the form components page. This is used as a descriptive label when displaying this form element.

File label field

Field Key

The field label will be pre-filled with the value entered on the form components page. Enter a machine readable key for this form element. May contain only alphanumeric characters and underscores. This key will be used as the name attribute of the form element. This value has no effect on the way data is saved, but may be helpful if doing custom form processing.

File field key field

Description

A short description of the field used as help for the user when he/she uses the form. Text entered into the Description field is displayed below the form component field. You may use special tokens in this field that will be replaced with dynamic values.

File description field

Upload directory

Webform uploads are always saved in the site files directory. You may optionally specify a subfolder to store your files.

File upload destination field

Validation

Required

Check this option if the user must enter a value.

Max upload size

Enter the max file size a user may upload (in KB). 

Allowed file extensions

Check the file extensions that should be allowed to be uploaded via the File form component. Click the select link next to the category title to check/uncheck all types for the specified category with one click.

File validation fieldEnter a list of additional file extensions for this upload field, separated by commas, in the Additional extensions field. Entered extensions will be appended to checked items above.

Display

Width

Width of the textfield. Leaving blank will use the default size.

Label display

Determines the placement of the component's label.

Private

Private fields are shown only to users with results access.

Wrapper CSS classes

Do not add anything in this window - leave Wrapper CSS classes as is.

Wrapper CSS classes

CSS classes

Do not add anything in this window - leave CSS classes as is.CSS Classes screenshot

Save component

Click the Save component button to save the new form field.

Grid

Label

The field label will be pre-filled with the value entered on the form components page. This is used as a descriptive label when displaying this form element.

Grid label field

Field Key

The field label will be pre-filled with the value entered on the form components page. Enter a machine readable key for this form element. May contain only alphanumeric characters and underscores. This key will be used as the name attribute of the form element. This value has no effect on the way data is saved, but may be helpful if doing custom form processing.

Grid field key field

About Options and Questions

Options and questions may be configured here, in additional nested Select Options components, or even both.

Options

Options to select across the top. One option per line. Key-value pairs MUST be specified as "safe_key|Some readable option". Use of only alphanumeric characters and underscores is recommended in keys. You may use special tokens in this field that will be replaced with dynamic values.

Grid Options fields

Questions

Questions list down the side of the grid. One question per line. Key-value pairs MUST be specified as "safe_key|Some readable option". Use of only alphanumeric characters and underscores is recommended in keys. You may use special tokens in this field that will be replaced with dynamic values.

Grid questions fields

Description

A short description of the field used as help for the user when he/she uses the form. Text entered into the Description field is displayed below the form component field. You may use special tokens in this field that will be replaced with dynamic values.

Grid description field

Validation

Required

Check this option if the user must enter a value.

Grid validation fields

Display

Randomize Options

Randomizes the order of options on the top when they are displayed in the form.

Randomize Questions

Randomize the order of the questions on the side when they are displayed in the form.

Hide label

Do not display the label of this component.

Private

Private fields are shown only to users with results access.

Wrapper CSS classes

Do not add anything in this window - leave Wrapper CSS classes as is.

Wrapper CSS classes

Save component

Click the Save component button to save the new form field.

Hidden

Label

The field label will be pre-filled with the value entered on the form components page. This is used as a descriptive label when displaying this form element.

Hidden label field

Field Key

The field label will be pre-filled with the value entered on the form components page. Enter a machine readable key for this form element. May contain only alphanumeric characters and underscores. This key will be used as the name attribute of the form element. This value has no effect on the way data is saved, but may be helpful if doing custom form processing.

Hidden field key field

Default value

The default value of the field. You may use special tokens in this field that will be replaced with dynamic values.

Hidden default value field

Display

Hidden Type

Choose from secure value (allows use of all tokens) and hidden element (less secure, changeable via JavaScript). Both types of hidden fields are not shown to end-users. Using a secure value allows the use of all tokens, even for anonymous users.

Hidden display field

Save component

Click the Save component button to save the new form field.

Markup

Label

The field label will be pre-filled with the value entered on the form components page. This is used as a descriptive label when displaying this form element.

Markup label field

Field Key

The field label will be pre-filled with the value entered on the form components page. Enter a machine readable key for this form element. May contain only alphanumeric characters and underscores. This key will be used as the name attribute of the form element. This value has no effect on the way data is saved, but may be helpful if doing custom form processing.

Markup field key field

Value

Markup allows you to enter custom HTML or PHP logic into your form (same Editor Options as Body field). You may use special tokens in this field that will be replaced with dynamic values.

Markup value field

Display

Select where markup will appear.

Save component

Click the Save component button to save the new form field.

Number

Label

The field label will be pre-filled with the value entered on the form components page. This is used as a descriptive label when displaying this form element.

Number label field

Field Key

The field label will be pre-filled with the value entered on the form components page. Enter a machine readable key for this form element. May contain only alphanumeric characters and underscores. This key will be used as the name attribute of the form element. This value has no effect on the way data is saved, but may be helpful if doing custom form processing.

Number field key field

Default value

The default value of the field. You may use special tokens in this field that will be replaced with dynamic values.

Number default field

Description

A short description of the field used as help for the user when he/she uses the form. Text entered into the Description field is displayed below the form component field. You may use special tokens in this field that will be replaced with dynamic values.

number description field

Validation

Required

Check this option if the user must enter a value.

Unique

Check that all entered values for this field are unique. The same value is not allowed to be used twice.

Integer

Permit only integer values as input, e.g. 12.34 would be invalid.

Minimum

Minimum numeric value, e.g. 0 would ensure positive numbers.

Maximum

Maximum numeric value. This may also determine the display width of your field.

Step

Limit options to a specific increment, e.g. a step of "5" would allow values 5, 10, 15, etc.

Number validation fields

Display

Element type

Choose between text field and select list. A minimum and maximum value are required if displaying as a select.

Prefix text placed to the left of the field

Examples: $, #, -. This option only affects text fields.

Postfix text placed to the right of the field

Examples: lb, kg, %. This option only affects text fields.

Decimal places

Choose the number of decimal places for the number field. Automatic will display up to 4 decimal places if needed. A value of "2" is common to format currency amounts.

Thousands separator

Choose from comma, period, space and none as the thousands separator.

Decimal point

Choose between period and comma for the decimal point.

Label display

Determines the placement of the component's label.

Private

Private fields are shown only to users with results access.

Number display fields

Wrapper CSS classes

Do not add anything in this window - leave Wrapper CSS classes as is.
 Wrapper CSS classes

CSS classes

Do not add anything in this window - leave CSS classes as is.
CSS Classes screenshot

Analysis

Check Exclude zero to exclude entries of zero (or blank) when counting submissions to calculate average and standard deviation.

Number analysis field

Save component

Click the Save component button to save the new form field.

Page Break

Label

The field label will be pre-filled with the value entered on the form components page. This is used as a descriptive label when displaying this form element.

Page break label field

Field Key

The field label will be pre-filled with the value entered on the form components page. Enter a machine readable key for this form element. May contain only alphanumeric characters and underscores. This key will be used as the name attribute of the form element. This value has no effect on the way data is saved, but may be helpful if doing custom form processing.

Page break field key field

Next page button label

Enter the text to be used for the Next Page button on the page before this page break. Default: Next Page >

Page break next page button label

Prev Page button label

Enter the text to be used for the Prev Page button on the page after this page break. Default: < Prev Page

Previous page button label

Save component

Click the Save component button to save the new form field.

Select Options

Label

The field label will be pre-filled with the value entered on the form components page. This is used as a descriptive label when displaying this form element.

Select Options label field

Field Key

The field label will be pre-filled with the value entered on the form components page. Enter a machine readable key for this form element. May contain only alphanumeric characters and underscores. This key will be used as the name attribute of the form element. This value has no effect on the way data is saved, but may be helpful if doing custom form processing.

Select Options field key field

Description

A short description of the field used as help for the user when he/she uses the form. Text entered into the Description field is displayed below the form component field. You may use special tokens in this field that will be replaced with dynamic values.

Select options description field

Options

Key-value pairs MUST be specified as "safe_key|Some readable option". Use of only alphanumeric characters and underscores is recommended in keys. One option per line. Option groups may be specified with <Group Name>. <> can be used to insert items at the root of the menu after specifying a group. You may use special tokens in this field that will be replaced with dynamic values.

Select options - Options

Multiple

Check this option if the user should be allowed to choose multiple values. Leaving this option unchecked will result in a select list of radio buttons. Checking this option will result in a select list of check boxes.

Select Options multiple field

Load a pre-built option list

Use a pre-built list of options rather than entering options manually. Choose from none, days of the week, and US states. Options will not be editable if using pre-built list.

Validation

Required

Check this option if the user must enter a value.

Select options validation fields

Display

Listbox

Check this option if you want the select component to be displayed as a select list box instead of radio buttons or checkboxes. Option groups (nested options) are only supported with listbox components.

Randomize options

Randomizes the order of options on the top when they are displayed in the form.

Label display

Determines the placement of the component's label.

Private

Private fields are shown only to users with results access.

Select Options display fields

Wrapper CSS classes

Do not add anything in this window - leave Wrapper CSS classes as is.

Wrapper CSS screenshot

CSS classes

Do not add anything in this window - leave CSS classes as is.

CSS Class screenshot

Save component

Click the Save component button to save the new form field.

Textarea

Label

The field label will be pre-filled with the value entered on the form components page. This is used as a descriptive label when displaying this form element.

Textarea label field

Field Key

The field label will be pre-filled with the value entered on the form components page. Enter a machine readable key for this form element. May contain only alphanumeric characters and underscores. This key will be used as the name attribute of the form element. This value has no effect on the way data is saved, but may be helpful if doing custom form processing.

Textarea field key fleld

Default value

The default value of the field as identified by its key. For multiple selects use commas to separate multiple defaults. You may use special tokens in this field that will be replaced with dynamic values.

Textarea default field

Description

A short description of the field used as help for the user when he/she uses the form. Text entered into the Description field is displayed below the form component field. You may use special tokens in this field that will be replaced with dynamic values.

Textarea descriptions field

Validation

Required

Check this option if the user must enter a value.

Textarea validation field

Display

Width

Width of the textarea in columns. This property might not have a visual impact depending on the CSS of your site. Leaving blank will use the default size.

Height

Height of the textarea in rows. Leaving blank will use the default site.

Placeholder

The placeholder will be shown in the field until the user starts entering a value.

Resizable

Make this field resizable by the user.

Hide label

Do not display the label of this component.

Disabled

Make this field non-editable. Useful for setting an unchangeable default value.

Private

Private fields are shown only to users with results access.

Textarea display field

Wrapper CSS classes

Do not add anything in this window - leave Wrapper CSS classes as is.

Wrapper CSS screenshot

CSS classes

Do not add anything in this window - leave CSS classes as is.

CSS Class screenshot

Save component

Click the Save component button to save the new form field.

Textfield

Label

The field label will be pre-filled with the value entered on the form components page. This is used as a descriptive label when displaying this form element.

Textfield label field

Field Key

The field label will be pre-filled with the value entered on the form components page. Enter a machine readable key for this form element. May contain only alphanumeric characters and underscores. This key will be used as the name attribute of the form element. This value has no effect on the way data is saved, but may be helpful if doing custom form processing.

Textfield field key field

Default value

The default value of the field as identified by its key. For multiple selects use commas to separate multiple defaults. You may use special tokens in this field that will be replaced with dynamic values.

textfield default field

Description

A short description of the field used as help for the user when he/she uses the form. Text entered into the Description field is displayed below the form component field. You may use special tokens in this field that will be replaced with dynamic values.

Textfield description field

Validation

Required

Check this option if the user must enter a value.

Unique

Check that all entered values for this field are unique. The same value is not allowed to be used twice.

Maxlength

Maximum length of the texfield value.

Textfield validation fields

Display

Width

Width of the textfield. Leaving blank will use the default size.

Prefix text placed to the left of the field

Examples: $, #, -.

Postfix text placed to the right of the field

Examples: lb, kg, %.

Label display

Determines the placement of the component's label.

Disabled

Make this field non-editable. Useful for setting an unchangeable default value.

Private

Private fields are shown only to users with results access.

Textfield display fields

Wrapper CSS classes

Do not add anything in this window - leave Wrapper CSS classes as is.

Wrapper CSS screenshot

CSS classes

Do not add anything in this window - leave CSS classes as is.

CSS Class screenshot

Save component

Click the Save component button to save the new form field.

Time

Label

The field label will be pre-filled with the value entered on the form components page. This is used as a descriptive label when displaying this form element.

Time label field

Field Key

The field label will be pre-filled with the value entered on the form components page. Enter a machine readable key for this form element. May contain only alphanumeric characters and underscores. This key will be used as the name attribute of the form element. This value has no effect on the way data is saved, but may be helpful if doing custom form processing.

Time field key field

Default value

The default value of the field. Accepts any time in any GNU Date Input Format. Strings such as +2 hours, and 10:30pm are all valid.

Time default field

Description

A short description of the field used as help for the user when he/she uses the form. Text entered into the Description field is displayed below the form component field. You may use special tokens in this field that will be replaced with dynamic values.

Time description field

Validation

Required

Check this option if the user must enter a value.

Start time

The earliest time that may be entered into the field.

End time

The latest time that may be entered into the field.

Time validation field

Display

Time format

Choose between 12-hour (am/pm) and 24-hour.

Minute increments

Choose from 1, 5, 10, 15, and 30 minute increments.

Label display

Determines the placement of the component's label.

Private

Private fields are shown only to users with results access.

Time display fields

Wrapper CSS classes

Do not add anything in this window - leave Wrapper CSS classes as is.

Wrapper CSS screenshot

Save component

Click the Save component button to save the new form field.

Token Values

You may use special tokens in specified fields that will be replaced with dynamic values.

Basic Tokens

  • %username - The name of the user if logged in. Blank for anonymous users.
  • %useremail - The e-mail address of the user if logged in. Blank for anonymous users.
  • %ip_address - The IP address of the user.
  • %site - The name of the site (i.e. Drupal Training)
  • %date - The current date, formatted according to the site settings.

Node Tokens

  • %nid - The node ID.
  • %title - The node title.

Special Tokens

  • %profile[key] - Any user profile field or value, such as %profile[name] or %profile[profile_first_name]
  • %get[key] - Tokens may be populated from the URL by creating URLs of the form http://example.com/my-form?foo=bar. Using the token %get[foo] would print "bar".
  • %post[key] - Tokens may also be populated from POST values that are submitted by forms.

In addition to %get and %post, the following super tokens may be used, though only with logged-in users: %server, %cookie, and %request. For example %server[HTTP_USER_AGENT] or %session[id].

Conditionals

When creating a multi-page webform, conditional actions may be used to control whether or not to show specified form elements. To add a condition, click the Conditionals tab.

Add Conditional

Click the plus-sign button to add a new condition.

Add a new condition screenshot

Select the component from the drop-down that you would like to set a condition for, and then use the following dropdowns to set the actions for that condition. 

For example, if you want the Email component to be displayed only if the Selction Options is answered yes, then you would section the following options for the conditional that you are creating:

If [Select Options] [is] [Yes]
then [Email] [is] [shown]

conditional screenshot

Click the plus-sign button to create additional conditional actions.

Add a new conditional screenshot

Click Save conditions to save the condition that you created.

Edit or Delete Components

Edit Component

To change the settings for an existing form component, click the Edit link in the Operations column, next to the field to be updated.

edit components

Complete the component settings on the Edit component page. See Form Component Types for details on how to configure these settings for each type of form component.

Delete Component

To delete a form component, click the Delete link in the Operations column, next to the field to be removed.

delete components

You will then be prompted to confirm your request by clicking the Delete button again.

Once you delete a form component, it is permanently deleted from the form, and any data saved in the results of the form component will also be permanently deleted.

E-mails

To add e-mail addresses that should receive individual form submissions, make sure you are on the Webform tab.

Webform menu

Click the e-mails tab to view e-mail settings.

Webform email tab

Custom

Address

Enter the e-mail address(es) in the Address field and click the Add button. Multiple e-mail addresses may be separated by commas.

Add email address window

E-mail to address

On the Edit e-mail settings page, the address(es) entered into the Address field on the previous step will be pre-filled in the E-mail to address, Custom field. Form submissions will be e-mailed to this address. 

E-mail to address custom field

E-mail header details

E-mail subject

Configure the e-mail subject for the form submission e-mails. Choose from:

  • Default: This option uses "Form submission from: [Webform Page Title]" as the e-mail subject text.
  • Custom: This option uses the text input in the Custom field.
  • Component: Any textfield, select, or hidden form element may be selected as the subject for e-mails.

E-mail from address

Configure the sender's e-mail address for the form submission e-mails. Choose from:

  • Default: This option uses the site's default email address, usually noreply@appstate.edu, as the sender's e-mail address.
  • Custom: This option uses the e-mail address input in the Custom field.
  • Component: Any email, select, or hidden form element may be selected as the sender's e-mail address.

E-mail from name

Configure the sender's name for the form submission e-mails. Choose from:

  • Default: This option uses the site's title as the sender's name.
  • Custom: This option uses the text input in the Custom field.
  • Component: Any textfield, select, or hidden form element may be selected as the sender's name for e-mails.

E-mail header

E-mail template

An e-mail template can customize the display of e-mails.

Default template

The Default template includes the following data:

  • Submitted date
  • Submitted username
  • Submitted values
  • Submission link

Custom template

Change the content in the template text area to customize the information sent in the form submission e-mail. You may use special tokens in this field that will be replaced with dynamic values.

Included e-mail values

The selected components will be included in the %email_values token. Individual values may still be printed if explicitly specified as a %email[key] in the template.

E-mail Template

Save

Click the Save e-mail settings button to finish adding this e-mail configuration to the webform.

Component Value

Component value

Select the Component value to be configured as the e-mail address recipient(s) of the webform submissions.

NOTE: The form component must have been configured on the form components settings before it can be selected as an e-mail recipient. 

Component Value Email field

E-mail to address

On the Edit e-mail settings page, the form component selected for the Component value field on the previous step will be pre-filled in the Component field. Form submissions will be e-mailed to this address. Any email, select, or hidden form element may be selected as the recipient address. 

E-mail to address field

E-mail header details

E-mail subject

Configure the e-mail subject for the form submission e-mails. Choose from:

  • Default: This option uses "Form submission from: [Webform Page Title]" as the e-mail subject text.
  • Custom: This option uses the text input in the Custom field.
  • Component: Any textfield, select, or hidden form element may be selected as the subject for e-mails.

E-mail from address

Configure the sender's e-mail address for the form submission e-mails. Choose from:

  • Default: This option uses the site's default email address, usually noreply@appstate.edu, as the sender's e-mail address.
  • Custom: This option uses the e-mail address input in the Custom field.
  • Component: Any email, select, or hidden form element may be selected as the sender's e-mail address.

E-mail from name

Configure the sender's name for the form submission e-mails. Choose from:

  • Default: This option uses the site's title as the sender's name.
  • Custom: This option uses the text input in the Custom field.
  • Component: Any textfield, select, or hidden form element may be selected as the sender's name for e-mails.

E-mail header details for component

E-mail template

An e-mail template can customize the display of e-mails.

Default template

The Default template includes the following data:

  • Submitted date
  • Submitted username
  • Submitted values
  • Submission link

Custom template

Change the content in the template text area to customize the information sent in the form submission e-mail. You may use special tokens in this field that will be replaced with dynamic values.

Included e-mail values

The selected components will be included in the %email_values token. Individual values may still be printed if explicitly specified as a %email[key] in the template.

e-mail template for component

Save

Click the Save e-mail settings button to finish adding this e-mail configuration to the webform.

Token Values

You may use special tokens in this field that will be replaced with dynamic values.

Basic tokens

  • %username - The name of the user if logged in. Blank for anonymous users.
  • %useremail - The e-mail address of the user if logged in. Blank for anonymous users.
  • %ip_address - The IP address of the user.
  • %site - The name of the site (i.e. Drupal Training)
  • %date - The current date, formatted according to the site settings.

Node tokens

  • %nid - The node ID.
  • %title - The node title.

Special tokens

  • %profile[key] - Any user profile field or value, such as %profile[name] or %profile[profile_first_name]
  • %get[key] - Tokens may be populated from the URL by creating URLs of the form http://example.com/my-form?foo=bar. Using the token %get[foo] would print "bar".
  • %post[key] - Tokens may also be populated from POST values that are submitted by forms.

In addition to %get and %post, the following super tokens may be used, though only with logged-in users: %server, %cookie, and %request. For example %server[HTTP_USER_AGENT] or %session[id].

E-mail tokens

  • %email_values - All included components in a hierarchical structure.
  • %email[key] - A formatted value and field label. Elements may be accessed such as %email[fieldset_a][key_b]. Do not include quotes.
  • %submission_url - The URL for viewing the completed submission.

Submission tokens

  • %sid - The unique submission ID.
  • %value[key] - A value without additional formatting. Elements may be accessed such as %value[fieldset_a][key_b]. Do not include quotes.

Edit or Delete E-Mails

To edit or delete e-mail addresses that should receive individual form submissions, make sure you are on the Webform tab.

webform tab

Click the e-mails tab to view e-mail settings.

email tab

Edit E-mail

To change the settings for an existing e-mail, click the Edit link in the Operations column, next to the address to be updated.

Operations edit

Complete the e-mail settings on the Edit e-mail settings page. See Custom or Component Value for details on how to configure these settings for each type of e-mail.

Delete E-mail

To delete an e-mail, click the Delete link in the Operations column, next to the address to be removed.

Operations delete key

You will then be prompted to confirm your request by clicking the Delete button again.

Form Settings

To configure the webform settings, make sure you are on the Webform tab.

Webform menu

Click the form settings tab to view the form settings configuration page.

Webform form settings menu

Submission settings

Confirmation message

Enter the message to be shown upon successful submission of the webform (same Editor Options as Body field). If the redirection location is set to Confirmation page, it will be shown on its own page; otherwise this displays as a message.

Submission settings

Redirection location

Choose where to redirect the user upon successful submission. Select from:

  • Confirmation page (default)
  • Custom URL (the Custom URL option supports Webform token replacements)
  • No redirect (reload current page)

Redirection location

Total submissions limit

Choose an option to limit the total number of allowed submissions. Select from:

  • Unlimited
  • Limit to a specified number of total submission(s)
    • ever
    • every hour
    • every day
    • every week

Total submissions

Per user submission limit

Choose an option to limit the number of submissions per user. A user is identified by their user login if logged-in, or by their IP Address and Cookie if anonymous. Select from:

  • Unlimited
  • Limit each user to a specified number of submissions
    • ever
    • every hour
    • every day
    • every week

Per user submission

Status of this form

Choose an option for the status of the form. Select between Open and Closed. Closing a form prevents any further submissions by any users.

Status of the form

Submission access

The submission access permissions affect which roles can submit this webform. It does not prevent access to the webform page. If needing to prevent access to the webform page entirely, contact the Webmaster's Office at webmaster@appstate.edu to request this configuration. 

Roles that can submit this webform

  • Anonymous User: An anonymous user is any user of the website.
  • Authenticated User: An authenticated user is any user signed into the site, regardless of other assigned user roles. For most ASU websites, this means any user with an ASU username and password.
  • Site Admin: A site admin is a user with editing access on the website.

Unless you need to limit access to submit the webform, leave the default settings for submission access: anonymous user and authenticated user.

Submission Access

Advanced settings

Available as block

If enabled this webform will be available as a block. See Blocks for instructions on block settings.

Show complete form in teaser

Display the entire form in the teaser display of this node. 

Show "Save draft" button

Allow your users to save and finish the form later. This option is available only for authenticated users.

Automatically save as draft between pages

Automatically save partial submissions when users click the "Next or "Previous" buttons in a multi-page form.

Show the notification about previous submissions

Show the previous submissions notification that appears when users have previously submitted this form.

Submit button text

By default the submit button on this form will have the label Submit. Enter a new title here to override the default.

Advanced Settings

Save

Click the Save configuration button to save the form settings.

Results

To view and/or download webform submission results, click the Results tab of the webform.

Results menu

Submissions

From the Results tab, the submissions tab appears by default.

Submissions tab

The submissions tab shows a paginated view of individual webform submissions, including submitted time and date, username, and IP address. Submissions may be sorted by any of the column headers by clicking on the column title.

webform submissions display

View a Submission

To view the values of a specific submission, click the View link in the Operations column next to the submission. Previous submission and Next submission links are provided for access to other submission results. 

webform submissions screenshot

Edit a Submission

To edit the values of a specific submission, click the Edit link in the Operations column next to the submission. Make desired updates and click the Submit button.

Delete a Submission

To delete a webform submission entiredly, click the Delete link in the Operations column next to the submission. 

You will then be prompted to confirm your request by clicking the Delete button again.

Once you delete a form submission, it is permanently deleted from the form.

Analysis

To view webform submission statistics, make sure you are on the Results tab of the webform; click the analysis tab.

Results analysis tab

The analysis tab displays response statistics for each component. Data is listed by form question, with the following statistical data:

  • Number of submissions where the specified field was left blank
  • Number of submissions where the specified field had a value entered by the user
  • Average submission lenth in words (excluding blanks)
  • Number of specified select options submitted
  • Average uploaded file size
  • Sum
  • Average including zeros/blanks

analysis of submissions screenshot

Table

To view all webform submissions in a tabular format, make sure you are on the Results tab of the webform; click the table tab.

webform results table tab

The table tab shows a paginated display of all submission results, including responses from each field. Submissions can be sorted by Submitted Date, User or IP Address. This view provides a quick reference to all submitted values.

webform results table tab

Download

To download webform results, make sure you are on the Results tab of the webform; click the download tab.

webform results download tab

Export format

Choose to download webform results as a Delimited text or Microsoft Excel file.

Export format list

Delimited text format

Select the delimited text format from the drop-down. This is the delimiter used in the CSV/TSV file when downloading Webform results. Using tabs in the export is the most reliable method for preserving non-latin characters. You may want to change this to another character depending on the program with which you anticipate importing results.

delimited text format settings

Select list options

Select keys

Choose which part of options should be displayed from key|value pairs.

Select list format

Separate options are more suitable for building reports, graphs, and statistics in a spreadsheet application. Compact options are more suitable for importing data into other systems.

Select list options screen

Included export components

Select the components to be included in the exported file. All components are selected by default.

Included export components screen

Download range options

Set the download range options by choosing all submissions, only new submissions since the last download, only the latest submissions (by number), or all submissions starting from/to by inputting a range starting from and optionally to specified submissions IDs. Last downloaded end SID: none.

download range options screen

Download

Click the Download button to download the webform results file. The file will be saved to your browser's default download location.

Search Engine Optimization

Many people are interested in how they can increase their website's earch engine ranking, or "optimize" their website for the search engines. 

Research Current Analytics

Check your site's Google Analytics reports to see what keywords it is currently ranked and receiving traffic for.

(If Web Services supports your site, send us your website URL and your gmail account address and we can set you up with access to your site's Google Analytics reports).

Research Keywords

Use a keyword research tool (like SEO Book's Keyword Tool) to get search terms being searched for on the top search engines.

Getting ranked for terms no one is searching for will not help drive traffic to your website. Search engine ranking is a means to and end. The goal is to generate qualified traffic to your website by being ranked - not just to get higher search engine ranking. 

Research the Competition

This will help you determine what keywords your site can likely get ranking for and to work towards achieving those first.

Type the keyword of interest into a search engine and see what sites come up on the first few pages for that term. These sites have ranking for the term already. In order to compete with them and try to get ranking for the term, your site needs to have at least as many indexed pages as these sites.

To see how many indexed pages the ranked sites have, perform a Google search for "site:" followed immediately by the URL of the site you are interested in. For example, to find the number of pages for www.appstate.edu, enter "site:appstate.edu" in the Google search field. The results will tell you about how many indexed pages the site has.

Grow Your Website

Once you know what keywords you want to try to get higher ranking for, add content about these keywords to your website. Be sure to include the keywords in the page titles and body content. Link the keywords to other pages on your site that are related or about the keyword.

Some popular ways to grow content on a website include news, blog, and calendar features. These not only allow you to help grow your site for search engine ranking, but they are also great ways to provide information to and stay in touch with your users.

The truly best approach to increasing site ranking is having a site worth being ranked, which means having good content that your users are looking for.

Use Evaluative Tools

Other online tools, like Google's Webmaster Tools, can provide even more analytics and suggestions for ways to help increase your site's optimization and ranking.

Keep At It

Search engine optimization is a constantly evolving target because the internet is constantly evolving. Websites you are competing with for top ranking for specific terms are growing their websites and improving their content as well, so to stay competitive, you have to regularly perform this support on your site.