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
- All services must have a corresponding action, and hence an action button.
- 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.
- 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:
- has its button set to "Center"
- has the correct email address of the person you want the email to go to
- 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