Fields

FormBlocks

Input fields for creating web forms.

Icon

Input (Textfield)

Description not available.

Icon

Input (Textarea)

Description not available.

Icon

Input (Email)

Description not available.

Icon

Select Dropdown

Deprecated. Do not use!

Icon

Select Options

The options can be rendered as single select (radio buttons), multi select (checkboxes) or dropdown. You can submit a value that is different from the label, with the Value in HTML option. Good practice if you're planning to use the value in an automated process.

Icon

Select Options (Show/Hide)

Similar to the regular Select Options, but with the ability to show/hide fieldsets on selection. For this to work, you need to give the fieldset an ID by changing its layout title. This will add an ID to the HTML. Set this ID (including the fb prefix!!) as the show/hide target, and the fieldset visibility should be toggled on select/unselect.

Tip: if you don't want to show/hide a fieldset on top level, you can add a Nested Field through CB.

And keep in mind: fields inside the show/hide target should NOT be required, as there is no mechanism in place to skip validation if the fieldset is hidden. This can be added manually though.

Icon

Select Options (Autogenerated)

Provide a snippet here to generate the options. For examples and caveats, see https://notes.romanesco.info/autogenerated-cb-field-examples. Multiple tpl chunks are available in the pattern library, for the different selection types. Make sure you change the tpl property too if you're changing the selection type!

Icon

Input (File)

Let visitors upload files from their system. These files will be attached to the email you receive. You can limit upload to a single file, or allow multiple files to be added through drag&drop or the file explorer.

IMPORTANT NOTES: if you set an upload limit higher than 1 file, you'll need to have the AjaxUpload extra installed. And because uploaded files are attached to the email, you need to make sure the total size of the files won't exceed your email limit. You can tweak the maximum file size setting if needed.

Icon

Input (Date)

A standard date selector. You can predefine what kind of date or time can be selected.

Icon

Input (Date Range)

Two date selectors, marking the start and end of a time period.

Icon

Input (Hidden)

Description not available.

Icon

Math Question

Render a math-based question in your form to prevent spam. It needs to be answered correctly in order to proceed.

Icon

Accept Terms and Conditions

Add a checkbox that blocks form submission if left unchecked. You can link to your terms by entering the corresponding resource ID and using the placeholder in the field text.

Icon

Nested Fields

Description not available.

MailBlocks

Elements for creating HTML email templates.

Icon

Heading (Email)

Description not available.

Icon

Text (Email)

Description not available.

Icon

Button (Email)

Description not available.

Icon

Image (Email)

Description not available.

Icon

Quote (Email)

Description not available.

Icon

Social Share Buttons (Email)

Description not available.

Icon

Social Connect Buttons (Email)

Description not available.

Icon

Divider (Email)

Description not available.

Icon

Accordion (Email)

Description not available.

Text

Everything related to writing and marking up content.

Icon

Heading

Description not available.

Icon

Heading (with Subtitle)

Description not available.

Icon

Heading (with Font icon)

Description not available.

Icon

Heading (with SVG icon)

Description not available.

Icon

Short Text

Description not available.

Icon

Rich Text

Description not available.

Icon

Message

Description not available.

Icon

List (Unordered)

Description not available.

Icon

List (Ordered)

Description not available.

Icon

Quote

Description not available.

Icon

FAQ

Create a Q&A section. Can be displayed as plain text, or in an accordion. And behind the scenes, structured markup is added to inform search engines that they can also use these questions in their Q&A views.

Graphics

Add images, SVGs, galleries and videos to your content.

Icon

Image

Description not available.

Icon

Icon (SVG)

Description not available.

Icon

Video (YouTube)

Description not available.

Icon

Video (Vimeo)

Description not available.

Icon

Video (Local)

Play a local video file in the browser. You can provide multiple files, to maximize compatibility. The browser attempts to play the top one first and keeps trying until a compatible file is found. Recommended to stick to .webm or .mp4 format when possible.

Layout

Various containers for arranging visual elements on the page.

Icon

Nested Layout

Description not available.

Icon

Basic Layout (Nested)

Only available in Backyard and Slider layouts. Allows you to add basic (root level) layouts as nested layout.

Icon

Divider

Description not available.

Icon

Divider (with Heading)

Description not available.

Icon

Table

Description not available.

Icon

Accordion / Tabs (Text)

Description not available.

Icon

Accordion / Tabs (Flexible)

Description not available.

Icon

Cards (Image + Text)

Description not available.

Icon

Cards (Flexible)

Description not available.

Icon

Segments

Description not available.

Icon

Slider

Turn each child element into a slide. Can also process Overview or Gallery items as slides.

Icon

Background Layers

Add images, SVGs and gradients here to be displayed as background in ContentBlocks layouts and fields. You can stack them on top of each other to create multi-layered backgrounds (for example, an image with an SVG or gradient overlay).

You can crop images for 3 display types: mobile, tablet and desktop, and even use different images for each breakpoint. And you can change the default CSS parameters.

Elements for linking content and creating overviews.

Icon

Button

Description not available.

Icon

Table of Contents

The ToC menu contains all headings on the page with an anchor (an ID in HTML). You can attach an anchor to all headings with the 'Automatic anchors' TV, or per heading by manually activating the anchor in their settings menu.

Icon

Steps

A menu to show the completion status of an activity in a series of activities. Useful in combination with multi-page forms.

Icon

Overview (Child Pages)

Description not available.

Icon

Overview (Specific IDs)

Description not available.

Icon

Overview (Publication)

Description not available.

Icon

Overview (Team)

Description not available.

Icon

Overview (Clients)

Description not available.

Icon

Overview (Testimonials)

Description not available.

Icon

Overview (Portfolio)

Description not available.

Interaction

Connect with visitors through forms, social media and CTAs.

Icon

Call To Action (CTA)

Add a CTA here. You can create and edit CTAs under Global Content > Call To Actions.

Icon

Form

Add a form here. You can build your own web forms with FormBlocks, under Global Content in the menu tree.

Icon

Social Buttons

DEPRECATED. Each option now has its own CB.

Icon

Social Buttons (Share)

Description not available.

Icon

Social Buttons (Connect)

Description not available.

Icon

Twitter Feed

Add a Twitter feed here. You need to install the TwitterX package first, before any output will appear.

Icon

Map (with Marker)

Add a map here, with a single marker on a location of choice. You can enter the lat/long coordinates of the location (separated by a ,) or write down the actual address. This address will then be geocoded to the correct coordinates for the marker.

Please note that you need a Mapbox API key for the map to be displayed, and the GeoCoder extra installed if you want to enter an address as location. This also requires an API key, for an external geocoding service of choice.

Advanced

Tools for more experienced content editors and developers.

Icon

Code (Display)

The code you paste here, will be shown exactly like that on the front-end.

Icon

Code (Execute)

Anything entered inside this code block will run first, before being displayed on the frontend.

Icon

HTML Code

Description not available.

Icon

Snippet

Description not available.

Icon

JSON to HTML

Render a JSON object as HTML table.

Icon

Included Patterns

List the smaller atomic particles included in this pattern.

Icon

Referring Patterns

List the bigger patterns that contain this atomic particle. For Electrons, you can also list which templates have that Electron assigned. NB: this doesn't mean the Electron is used in the template code itself!