Change Page Break Button Color

Snapshot

When building a multi-page form in Formidable Pro, the Page Break Field offers minimal options on its Field Options tab. In fact, there are only three options, the Button Label, the Field Key, and the ability to use Conditional Logic. There is no option for changing the button's color by adding a custom class.

So when a client asked us to add an instructional page to a complex multi-page form, he specified that he wanted the button to display in green to signify "Go!". The page, as rendered by Formidable, is:

EnergX Assessment Instruction Page.
EnergX Assessment Instruction Page.

Problem

To understand the challenge with what should otherwise be a simple task, we first have to understand how Formidable renders the Page Break Field button(s). One way to do this is to search through the rendered page's source code in your browser.

Using your browser's "View Source" tool, search for the Page Break Field's Field Key, in this case, "vglyp", and what do we find…

Note: If you're following along with this tutorial by creating your own multi-page form, use the Field Key from your Page Break Field.

Oops! The field key isn't found! Normally, Formidable renders all fields with an id of field_[field key]. With Page Break Fields, the rendering is a little different. Let's use our browser's inspection tool to discover exactly how different. Inspect the page's button. The Page Break Field is rendered as the form's submit button:

The code above is for "first page" buttons. If you are beyond the first page and have both previous and next buttons, the HTML is rendered as:

Changing the colors of the buttons for specific purposes becomes a challenge. We can't apply a single class to the submit button code on the form's Customize HTML page otherwise it will apply to every submit button rendering, nor can we apply a class to the Page Break Field because there's no option that allows us to do so.

Solution

Luckily, Formidable does give us a way of isolating the individual pages' submit buttons. The first div element after the form element includes a class for the page number. The line of rendered source code is:

This means that we can qualify CSS for each of the buttons rendered for a Page Break Field with the following classes:

.frm_form_fields.frm_page_num_1 .frm_submit input

Further, you can apply CSS effects to the buttons using the :hover and :focus pseudo-elements:

.frm_form_fields.frm_page_num_1 .frm_submit input:hover,
.frm_form_fields.frm_page_num_1 .frm_submit input:focus

Using the completed CSS above, our form page now renders as:

EnergX Assessment Instruction Page with green button
EnergX Assessment Instruction Page—Green Button

Button color when hovered:

EnergX Assessment Instruction Page Button when hovered
EnergX Assessment Instruction Page—Button Hover

Reader Interactions

Leave a Reply

Your email address will not be published.