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:

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…

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:

Button color when hovered: