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
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 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
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.
- Text added at the top with the
- A divider added using the
- Help text added using the
- Inline help with the