Move Submit Button to Top of Form

The Requirement

Steve G asked the following question in the Formidable Community Slack how-to channel:

Hey, all! Wondering how to add a FORM CLASS to my styles.css that puts the submit (and maybe update?) button at the top of a form. Then add the FORM CLASS to the Settings>Customize HTML>Form Classes field to a specific form. Thanks in advance for any suggestions or other solutions to the get the same effect.

Steve G—https://formidablecommunity.slack.com/archives/CGMRP9RRN/p1567623203075800

The Resolution

This question really has two parts to it. The first is what CSS do you use? The second is how do you add the class(es) to the form?

The CSS

Moving the button container to the top of the form requires absolute positioning. To use absolute positioning on an element, it's parent element has to specifically use relative positioning.

First, let's look at the submit button code on Formidable's Settings > Customize HTML page:

You can see all the button code is wrapped in a div with the class "frm_submit". This is the target element to which we want to apply absolute positioning. For the CSS, we're going to create a class named "button-at-top":

Since Steve G asked about both the submit and update buttons, we're going to apply this new class to the div, the container that wraps all the buttons. To add the new class to the div, simply add a space and the new class name after the div's frm_submit class:

Now for the parent element. To find the parent element for the submit button's container div, you have to use your browser's built-in inspection tool.

If you don't know how to use your browser's built-in inspection tool, please see this article: How To Use Your Browser’s Inspect Tool.

The code for the parent element is generated directly in Formidable and cannot be found on the Settings > Customize HTML page.

By viewing this source code, we can see that the parent element for the submit button's div is a div with the class of "frm_fields_container". Since this code is hidden to us within Formidable, we can't add a class to it as simply as we did with the submit button's div. So the best approach without writing additional jQuery code is to leverage the current class.

One thing to be careful of though, is that if we additional CSS for frm_fields_container class, it will be applied to every form we build. If that's the result you want, then fine. But if you only want to apply the CSS to a single form, then the frm_fields_container class needs to be further qualified by nesting it in the form, in this case the form's ID:

You're probably wondering why I added padding-top to the parent element's class. Because the submit button is positioned absolutely, it will sit on top of any elements underneath it. In this example, the button sits on top of the name fields, effectively hiding the first and last name fields beneath it. The padding-top moves everything down so the button appears to be positioned correctly as in the image below.

Working Example

Here's a working example of a form. Toggle the radio button to move the submit button to the top or bottom.

Note: Submit button is disabled to prevent triggering form actions.