Express Form Styling

Apr 11, 2024

Express Form Styling

There are three ways to style Express forms:

  1. Add a custom ID or class and use Concrete's custom design tools (can be done by end users)
  2. Create a custom Express Form Block template (requires access to the server)
  3. Create custom attribute form templates (requires access to the server and provides the finest-grained control)

This tutorial will explain how to accomplish the customizations by leveraging the custom design tools.

Add a custom ID or class and use Concrete's custom design tools

For this example, first create an Express object and an associated form to be used on the front end. In this example, we're adding users and phone numbers to a Members object (a contrived example):

Place the Express Form block on a page and choose the form for the Express object as the existing form:

Save the block and you'll see the form with some basic styling:

Now that we have the Express form, we will need to target this specific form with CSS by adding an ID or class in the Design & Template block options:

This will add a wrapper div containing the custom ID or class:

<div class="ccm-custom-style-container ccm-custom-style-main-23" id="member_form">
    <div class="ccm-block-express-form">
        <div class="ccm-form">
        <!-- form elements here -->
        </div>
    </div>
</div>

Now there are a few different places where some custom CSS can be added. Only one of the follow methods needs to be used.

  1. the page's Header Extra Content attribute
  2. an HTML block
  3. a site-wide attribute which is output in the header such as Tracking Codes
  4. if a theme is customizable, custom CSS can be added to the theme

Header Extra Content attribute

Add the Header Extra Content attribute to the page and enter the styles wrapped in <style/> tags. The CSS will be applied to only that page:

HTML block

Add an HTML block above the form and enter the styles wrapped in <style/> tags. Like the Header Extra Content attribute, the CSS will be applied to only that page, but this method can be hard to change or can cause confusion as the HTML block is not obvious even when editing the page.

Site-wide attribute

Go to Dashboard > System & Settings > Tracking Codes and enter the styles wrapped in <style/> tags:

Theme custom CSS

Go to Dashboard > Pages & Themes and select the Customize option of the active theme. Select the skin and select Add Custom CSS. Add the rules to the modal window and save the changes. If customizing the default skin, save the changes as a new skin.

Recent Tutorials
WebOps Tutorial on Running and Upgrading a Concrete CMS Website
May 2, 2024
By myq.

Describes how to deploy, manage, and upgrade a Concrete CMS website

Using the Concrete Migration Tool Addon
Apr 27, 2024

How to use the Concrete CMS Migration Tool

Create custom Site Health tasks
Apr 19, 2024
By myq.

This tutorial will guide you through the creation of a new Site Health task

Reusing the same Express entity in multiple associations
Apr 11, 2024
By myq.

How to create and manage multiple associations in Express

Express Form Styling
Apr 11, 2024
By myq.

Different ways to style Express forms

Setting addon/theme version compatibility in the marketplace
Jan 9, 2024

For developers worn out with setting the latest addon or theme version manually across too many core versions, here is a JavaScript bookmarklet to do it for you.

Improvements?

Let us know by posting here.