Support » Plugin: Fast Secure Contact Form » style fieldset box label on contact form

  • Resolved TraciBunkers

    (@tracibunkers)


    I’ve read the FAQ and have been able to style the internal CSS style sheet for most things on my contact form. But I can’t figure out how to style the font size & color of the Fieldset box label that says “Contact Form”. I’ve styled the other labels, but it doesn’t affect this one. I want to remove the border around that label, change the grey color to the same color as the rest of the background, and change the font color & size. I’ve looked at it with Firefox Firebug, but what it’s telling me for that isn’t on the Form/Styles/Style settings.

    Here’s the link to my contact form: http://www.tracibunkers.com/blog/contact

    https://wordpress.org/plugins/si-contact-form/

Viewing 15 replies - 1 through 15 (of 22 total)
  • Thread Starter TraciBunkers

    (@tracibunkers)

    I found a workaround, but I would like to know how to style it properly.

    What I’ve done for now is under Styles, I’ve unchecked “Enable a fieldset box around the form” which also hides the Fieldset box label.
    Then under Fields, I added a new field & moved it to the top. I named it what I had as the Fieldset box label; in the Label CSS I put in the styles I wanted; and in the Input CSS I put “display: none” so that the input field was hidden, showing only the label.

    But doing it this way means I have to do this for each form instead of being able to copy the styles.

    mbrsolution

    (@mbrsolution)

    Hi TraciBunkers can you share your CSS custom code. I just would like to check it myself.

    Thank you

    Thread Starter TraciBunkers

    (@tracibunkers)

    Here’s what I put into the Label CSS for the new field to mimic the Fieldset box label: font-family:”Archivo Narrow”,verdana,arial,sans-serif;font-weight: 300;color: #cc6600; font-size:18px;

    How can I just style the actual fieldset box label? Under styles, nothing seems to be for that.

    mbrsolution

    (@mbrsolution)

    Hi did you add the following text “Contact Form” in Welcome introduction: under Basic Settings tab?

    Thread Starter TraciBunkers

    (@tracibunkers)

    Well yes–I couldn’t figure out how to style it, which is why I had to do the workaround. The background color of the fieldset box label stayed gray with a border around the label, and I couldn’t change the font color or size–it looked very odd compared to the rest of my form. There must be a way to style it with the internal style sheet, but under styles, nothing seems to be for it. I tried using Firefox Firebug to see if that would shed some light on it, but it didn’t.

    mbrsolution

    (@mbrsolution)

    Hi if you did add it as I mentioned above in reply 5, then you will know that you can add custom style in that field. The example below is based on your entry Contact Form.

    For example:

    <p style="text-align:center;">Contact Form.</p>

    In the Welcome Introduction field under Basic Settings tab, allows you to enter HTML code. You can customize your style as per your requirements.

    Thread Starter TraciBunkers

    (@tracibunkers)

    I misunderstood where you were asking if I had put it. I did not add “Contact Form” in the welcome introduction–I had it above in the Form 1 label. For “Form 1 Label”, when you click on “help” for it, it says “Enter a name for your form. This is not shown on the form, it just helps you keep track of what you are using it for.”
    So if this isn’t shown on the form, then why would you put custom coding in there?

    I understand you can use html in the welcome introduction, but that’s not for the fieldset box label.

    Also, under the Styles tab, in the Fieldset box label, I tried putting in html and it didn’t save it–when I clicked “save”, the coding I put in disappeared. So it seemed like you could only have text in it.

    mbrsolution

    (@mbrsolution)

    In you enter “Contact Form” in the Form 1 label field then that should not appear on the actual form.

    Looking at your form from the link you provided above, you have two displays of Contact Form in your form. One is added with <legend>Contact Form</legend> and the other is added with a field id=”fscf_label1_4″. Can you check to see where have you added this entries.

    mbrsolution

    (@mbrsolution)

    Can you also test one of WordPress default themes to see what happens.

    Thank you

    Thread Starter TraciBunkers

    (@tracibunkers)

    The <legend>Contact Form</legend> is from having it in the Fieldset Box Label area under the styles tab–that’s the one I couldn’t figure out how to style, so I unchecked the box “Enable a fieldset box around the form.” which also hides that label.

    The id="fscf_label1_4" is from the workaround I created that I mentioned in comment #2.

    mbrsolution

    (@mbrsolution)

    Did you try Form Fieldset Box: under Style tab? for the following comment above.

    What I’ve done for now is under Styles, I’ve unchecked “Enable a fieldset box around the form” which also hides the Fieldset box label.

    Thread Starter TraciBunkers

    (@tracibunkers)

    With WP theme 2015, The fieldset box label background is the same color as the rest and there isn’t a border around the label. I still have to check the box to have a fieldset box around the form or the label doesn’t show. So I change the border of that to 0px because I don’t want it. But, I still don’t see where I can change the font color or size of the label–it’s black and a different font.

    Thread Starter TraciBunkers

    (@tracibunkers)

    Sorry, I’m not understanding what you are asking. In that comment, I was saying that I unchecked Enable a fieldset box around the form because that also hides the label–at that point I wanted to hide the label because I couldn’t get it styled & was using the workaround.

    EDIT:
    OH, you were asking if I tried putting the styles for the fieldset box label in the styles for the form fieldset box. No–since it’s called “Alignment Divs”, I didn’t think it had anything to do with text. But I just tried it, and yes, it works. I thought that was just for the field set BOX, and not the label.

    mbrsolution

    (@mbrsolution)

    What I meant is because you could not get it to style the way you wanted. I was asking you if you tried Form Fieldset Box: under Style tab which should style the Enable a fieldset box around the form.

    Thread Starter TraciBunkers

    (@tracibunkers)

    I was editing my previous comment while you were also responding. So not sure if you saw it. While using the 2015 theme, I put the styles for the fieldset box label in the styles for the form fieldset box & it worked. But when I switched back to my theme (and had to restore my database because switching themes messes it up–my theme has areas that the default themes don’t), it doesn’t work again. So it must be something with my theme that’s causing it. I use Atahualpa.

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘style fieldset box label on contact form’ is closed to new replies.