Guides
Tutorials
Pop Tags

Text Fields

There are two kinds of basic text fields to chose from in the form builder. The Single Line Text is a typical <input type="text"> field, like the default title field any content has. The Text Area field is, like the name says, a standard <textarea>.

Any field you add to a content type has a name and a label. The label is for the field in the form used for editing the content, while the name is what you’ll use to refer to the field in your templates. By default a name will be auto-generated from the title, by lowercasing and replacing spaces_with_underscores.

How Escaping Works

When you’re using a text field in a template it will be HTML escaped. Any tags will be converted to html entities. That is, <b> would be turned into &lt;b&gt;. Quotes will also be escaped, so text fields are safe to use within HTML attributes. Take the following code for example:

<img alt="<pop:title/>" src="...">

The above will not break even if the title of the content has double quotes. You can freely turn off HTML escaping by using the escape attribute if you so choose. The following will not encode html entities:

<pop:title escape="false"/>

By default a text area field is outputted as is when inserted (apart from the escaping). So if a text area contains line breaks, they will simply be line breaks in the HTML and not <br/> or <p> tags. If you want the text to be formatted as HTML you can use the following format attribute, which in this case would output the text with double line-breaks interpreted as <p> tags and single line-breaks as <br />'s.

<pop:description format="html"/>
Personalized Instructions

Each field conveniently features a box for adding instructions for the users filling out the form. All fields, with the exception of the title field, can be marked as optional.

Character Length

Both text fields can have a minimum number of characters and a maximum number of characters. This can be useful if your design requires the text to be of a certain length.

Truncation

Texts can also be truncated when used in a template. If you have a text area with a long description that you need to show a small snippet from, you can use the truncate attribute:

<pop:description truncate="100" ellipsis="..."/>

The above would show the description truncated to 100 characters (or as close as possible without cutting any words in half). The ellipsis attribute would also append "..." to the end of the truncated text.

Line Breaks

There are two ways to add line breaks to a pure text area.

  1. Use the format="html" attribute:

    <pop:text format="html"/>

    This wraps double line breaks in paragraph tags and inserts <br/> tags for single line breaks.

  2. Use <pop:lines/> to get a collection of each line of text in the text area. Use the break attribute to insert <br/> tags or wrap lines in <li>s or similar use cases:

    <pop:text.lines break="br"/>
Continue to Rich Text Area »