Using In-Browser Development Tools to Tweak Your Form

Written by Brian on January 14, 2013

Posted in Form Hacks

When working on your Formstack form, you may come to a point where you think you want to make some changes to how it looks. If you’re like me, when you want to experiment, you want the changes to be real-time and not permanent. If you want to see your form with a hot pink background and neon green text, you probably don’t want your users to have to see that unless you decide you like it that way.

In order to make these changes, you will need to use an in-the-browser development tool. In Chrome, Safari, Opera, and some versions of Firefox, this tool is your Web Inspector. In Internet Explorer 8 and up, this tool is the F12 Developer Tools. What I’ll focus on in this article is a third-party add-on for Firefox called Firebug (which you can get at this link). Firebug shares a lot in common, visually, with the Web Inspector in Chrome and is something of a de facto standard for in-browser development tools.

Before we get started, please note that you can use these tools all you want to test changes out, but many changes will require a knowledge of CSS to make permanent. I’m going to give an overview of the whole process, but I just want to make sure you know what to expect.

To get started, simply go to the page you want to make changes on, whether it’s the Formstack-hosted page for your form or the page you’ve embedded your form into. For this example, I’m going to test changes on a Formstack-hosted page. Next, you need to open your tool. In Chrome/Safari/Opera, you do this by right-clicking and then clicking on the option called Web Inspector, in Internet Explorer 8+ you can press the F12 key, and in Firefox you can either follow the same instructions as for Chrome or click the Firebug button.

Next, you will need to find the HTML element you’d like to modify. For this example, let’s remove the shadow from the form. To do this, you will need to find the element with the shadow. Most of these tools have a great feature where whatever HTML element you hover over in the tool will get highlighted or outlined on the page. By hovering over the <form> tag, I see that the blue box seems to line up with the box on screen that has a shadow.

If you click on that element, the style inspector on the right side of the tool updates to show the CSS impacting the element you clicked on. I’m fortunate and the first CSS command that impacts the form happens to be where it gets its shadow from. In this case, where we want to simply see what the form will look like without a shadow, all we need to do is click the “No” symbol next to the CSS property. If you click it, the CSS property should gray out and the shadow should disappear.

So what if you like this change and want to make it permanent? Then you’ll need to modify the CSS that affects your form. If your form is embedded with Javascript or a Lightbox embed, you can modify the CSS for the page it’s embedded into. Otherwise, you will need to give it a custom theme (if you’re not already using one), and add the CSS you need to disable the box-shadow property. The first piece of CSS you’ll need is the selector (which you can learn more about here). If you look at the CSS you played with in Firebug, you’ll find the selector above the CSS, before the curly brace.

You’ll want to then paste it into whatever CSS you’re modifying. You’ll either have a CSS file for your site or, if you’re using a form theme, you’ll use the Additional CSS textbox in the HTML and CSS section of your theme’s settings. Once the selector is pasted, you’ll want to open and close the curly brackets (that’s { and } ). I would then suggest you add a line of space between the brackets (that’s where your CSS property is going to go).

Then you’ll want to type in the CSS property you’re going to modify. In this case, it’s box-shadow. Follow it with a colon (:), and you’re ready to write your CSS override. To remove the shadow, the command you want is none !important:. The none removes the shadow from the selected element, and the !important tells the browser that your command is more important than any other box-shadow command on the page. The semi-colon tells the browser that your command is finished. Save your changes, and if you refresh your page you should see your changes in effect.

This is a fairly simple example, but it shows how you go from wanting to make a change on your form, testing it, and then making it permanent. In case you would like to play around with other changes, I’ll include some tips too:

– If you want to find a form field or Section quickly, you can search in your development tool and it will scan the code to find the text in the field’s label or the Section’s title

– If you want to change the color of something, you’ll need to be able to get the hexidecimal code for the color you want. A great way to get that is at this website.

– If you want to get a bit more fancy with colors and would like to do a gradient, then visit this website.

Hopefully these steps help you to tweak the form to meet your company’s branding or design goals. Have any questions or need further help? Let us know in the comments below!