Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Fieldset Element

The fieldset element is how I framed in my call-to-action and buy buttons when I earned my living from this site before I retired. There are many other uses though, and I’ll suggest a few later. This nice thing about it is that using a fieldset is really easy, especially for how high it rates on the coolness meter without needing any CSS styling, although that helps, too.

Here's a reduced-size screen capture of one.

As an aside, you'll find several articles from my paid products in the Articles section of this website. Since I am now retired and don't have to earn a living from the site, I've started piecing some of it out as articles where it makes sense without the context of the full product.

There are two parts to a complete fieldset. There’s the fieldset element itself, and there’s the legend.

The legend is merely the label that is added to the box, in this case, it's the green text at top that reads, "Get Sales Letter Secrets Today!" What makes it unique, and way cool in my mind, is that the label is added within the border.

It’s really very easy to create a fieldset. Here’s the basic code:

That’s all there is to it . . . totally simple!

It can be more complicated if you want to change the default values. I like to change the border style of the box to the double line, which has to be at least 3 pixels wide in order to see two lines (one for each line and one pixel of space between them).

The border options are:

dashed | dotted | solid | double | groove | ridge | inset | outset | none | hidden

You can also set the width and color of the border. Here’s an example:

Change the width, line style, and color to suit. Really, it’s OK.

The legend can aslo . . . no, not aslo, also . . . the legend can also be controlled using CSS. I usually make the font a bit bigger and change the color to complement the site it’s on. Here’s an example:

Both of the previous two CSS examples are for use in embedded or external style sheets. You could use inline CSS as well. If you need to learn more about inline, embedded, and external CSS, it’s all explained in my Introduction to CSS, CSS Style Sheets and CSS Cascading Order tutorials.

Important Note!

It seems if your site uses Bootstrap Javascript the fieldset doesn't work properly, or at all. Without editing the Bootstrap file, which I didn't want to mess with, I've come up with a workaround to restore the proper display. You can edit the styles to suit, of course, but here's the basic workaround I used in the examples below.

<style>
    fieldset {
    border: 3px double green;
    max-width: 400px;} 

legend {
    margin-left: 22px;
    padding: 0 10px;
    font-size: 1.7vw;
    width: auto;}
</style>

• The border style needs to be included in the fieldset code, but you can change the values as you see fit.
• The max-width can be removed, but the fieldset will stretch across the page, which isn't usually desirable on wide screens.
• The margin-left creates some space between the upper left corner and the left side of the legend. Otherwise the legend text pretty much butts up against the left corner of fieldset, which doesn't look right. It can be removed.
• The padding creates a little breathing room between the legend text and the border lines. It can be removed.
• The font size can be changed or removed. Using "vw" for the length makes it scalable to small screens.
• The width: auto is necessary or the whole thing falls apart.

You can put whatever content you want inside a fieldset. As I stated in the beginning, the fieldset was originally created as a way to organize forms, but you don’t have to use them exclusively for forms, or for that all, for that matter. Your code will validate just fine using them like this or in many other ways.

Here are a few ways to use a fieldset that come to mind:

• Use it as I used to and make your "buy" content stand out.
• Use it as a testimonial box. The legend could read Testimonial, or cite the testimonial supplier’s name, or mention the best benefit that the person’s testimonial is about.
• Use it in place of a blockquote as a way to highlight an important idea or as a unique way to quote someone in an article.
• Use it as a way to call attention to anything. This isn’t used much, so where it is used tends to draw in the eyeballs.
• You can set the width using CSS, so you could use fieldsets as “mini-boxes” to organize side-bar content with the legend as the label for the content.
• You can also use an image instead of text for the legend. To do that, simply code a link to the image where’d you otherwise type in the text for the legend.

Fieldset Examples

As a Testimonial Holder

Albert Einstein Testimonial...

BoogieJack.com is my favorite website, and I'm not just pontificating platitudes!

It's colorful in a fun way and the content greatly appeals to my massive intellect and often overlooked funny bone. It's a masterful job of mastering the unmasterable, according to me.

As a Quotation Frame

As a Content Feature

Use the fieldset with my daily content rotator to have a daily joke, tip, trivia question, scripture, history note, freebie, riddle or other daily content that automatically updates.