If you are one of our many customers who use form themes, then wouldn’t it be nice to stretch the themes you have to their maximum ability? In this post, we will show you how to take advantage of one Formstack theme to apply styling to multiple forms.
Before we begin, if you need a quick overview of Formstack Themes & CSS, follow this link. We will not be applying styling by simply selecting colors on the style tab. Rather we will be using CSS (cascading style sheets) to apply the styling we want on our form. You will also need to know your way around the HTML Inspect feature of your browser to follow this tutorial. If you are not sure how do find the Inspect tool, here is a quick refresher.
Chrome: Simply right-click on a page element and select ‘Inspect Element.’
Firefox: Right-click on a page element and select ‘Inspect Element.’ Or go to Tools > Web Developer > Inspect.
Safari: First, enable the developer tools in the Advanced pane of Safari preferences. Now you can right-click to ‘Inspect Element.’
IE: First, enable the develooper tools in Internet Explorer settings. Then you can right-click to ‘Inspect Element.’
To begin, let’s cover one basic of CSS. An ‘ID’ is an attribute that can be assigned to an HTML element such as a div, title, button, form field, etc. IDs are specific to the element to which they are assigned, which means they can only be used one time. The Formstack builder assigns a specific ID to most all elements on a form. What this means is that we can target one element ID from Form A and also target the same element on Form B, because they each have a specific ID applied. Let’s look at an example.
Here we are targeting the submit button for two separate forms in one single form theme. In the screenshots below, you can find through the inspect element that our ‘Form A‘ has a submit button ID of ‘fsSubmitButton1366529‘ and ‘Form B‘ has a submit button ID of ‘fsSubmitButton1366530‘. Because these IDs are specific to the form, we can write CSS for both of them in a single theme. Both forms will reference the same CSS, but only the appropriate ID styling will be applied.
We will style the button of Form A to be green & the button of Form B to be orange.
Here is the styling we have applied on our Formstack theme that targets both buttons on both forms. The single theme is applied on both forms under Settings.
If you know enough HTML & CSS, you can scale this hack and put together one complete style theme for multiple forms. Have you found any other Formstack hacks? If so, or if you have any questions, leave them in the comments below!