Please refer to the goverenment's 18F Content Guide opens in a new window created by 18F opens in a new window to write user-centered, accessible and responsive content.

Service Page

 

Content Area

Action Button + Actions (with & without popups)

Rules

  1. All services must have a corresponding action, and hence an action button.
  2. The default interaction when you click on an action button is to open up a modal (popup) window where the user can perform the action that needs to be performed.
  3. The only exception to (2) is when the action to be performed is really long (for example, needs several pages in a form) or is something that is external to our site (for example: an eventbrite registration)
 

Headings (such as "What is this service?") should use Heading 2 style.

Adding an action button and corresponding popup

1. Add the action button
First, add a "spacer" after the last line of the content to add space between the content and the button. Next, add an action button by copy/pasting the code below into a Squarespace 'CODE' block. NOTE: You must use this code block over other methods of adding a button for the popup to work.

<div href="#test-popup" class="sqs-block button-block sqs-block-button open-popup-link" data-block-type="53" id="block-yui_3_17_2_9_1443482462660_10291">
<div class="sqs-block-content">
<div class="sqs-block-button-container--center">
<a href="" class="sqs-block-button-element--medium sqs-block-button-element">Contact us to get started</a>
</div></div></div>

2. Open the popup by clicking on the button (after hitting "save")
In the edit mode, open the action popup by clicking on the button you just added.

3. Add a header and the required form into the popup
Once you open the popup, you should be able to use it as any other Squarespace content area. Add a header (use Heading 2 for the header) and a form into your popup and you should be all set. Make sure the form:

  1. has its button set to "Center"
  2. has the correct email address of the person you want the email to go to
  3. and has an appropriate confirmation message

To link to an email address, use the external links form and add mailto: in front of an email address.

To make a button link to a URL or content such as a PDF: Add a button via the content block option (not by using the coding above), then add the URL or file as usual.

To link to an email: Click the "link" tool and add the email address witih mailto: in front it. Like mailto:asmithru@umich.edu