Perch Tips: another way to add help to templates with notes-before

In Perch and Perch Runway 2.8.14 we added another method for inserting help information into your edit forms. Here’s how to use notes-before.

We already have the <perch:help></perch:help> tag, which insets a block of help text at the top of your form. We also have the help attribute, which enables the addition of help right alongside a particular field in a template. Update notes readers may also have spotted a line in the release notes for 2.8.14 mentioning notes-before.

The notes-before attribute allows you to add a block of text above any field. It’s an attribute just like help and works well when used with divider-before. You ca add a divider with a heading for this group of form fields, then some notes with notes-before.

The small template below includes all of these ways of adding help information.

<perch:help><p>Complete this form with details of the apartment.</p></perch:help>

<div class="apartment">
  <h3 class="<perch:if id="leased" value="yes">leased<perch:else/>available</perch:if>"><perch:content id="apartmentname" type="text" label="Name" required="true" title="true" /> <span>- <perch:if id="leased" value="yes">leased<perch:else/>available</perch:if></span></h3>
  <p>No. of rooms: <perch:content id="rooms" type="text" label="No. of bedrooms" required="true" size="s" /></p>
  <div class="description">
    <perch:content id="description" type="textarea" label="Description" markdown="true" editor="markitup" required="true" notes-before="Add a nice description here, try to make it sound habitable." divider-before="Apartment description" />
  </div>
</div>
<perch:content id="leased" type="checkbox" label="Apt. is leased" value="yes" suppress="true" help="Check this if you want the apt. to display as leased on the website." />

You can see in the screenshot each of those as used in the edit form.

1. Text added at the top with the perch:help tag
2. A divider added using the divider-before attribute
3. Help text added using the notes-before attribute
4. Inline help with the help attribute