Use Firebug to Adjust the Look of Your Form

Written by Formstack on July 27, 2011

Posted in Form Hacks

Today, I’m going to show you how to use a Firefox Plugin called Firebug to adjust how your embedded form looks using style templates.

I created this tutorial as a video because I am a visual learner, but not to worry, I have listed the steps under the video as well.

The steps are as follows:

1. Get Firebug, install it, and re-start your browser.

2. Navigate to the page you are having style issues on.

3. Right click on the object you are having issues with and choose “Inspect Element”

4. Adjust the CSS to get the desired effect, then “copy” your CSS.

5. “Paste” your CSS into the forms Style Template under HTML and CSS > Additional CSS.

6. Save your Style Template.

7. Navigate back to your page and refresh to see the changes. If you are satisfied with the look, you’re done. If not, repeat steps 3 through 7.

Enjoy!