Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #287932

    Hi – I’m just trying to style a couple more things on my Gravity Forms – could you tell me if I can apply CSS code to:

    1) Change the colour and size of the steps that show across the top of the form for each page.
    2) Change the colour of the the field boxes.
    3) Change the colour and size of the text entered into the field boxes.

    Also, on the first page of my form here: I seem to have ended up with a double line at the top of the first page of the form – I can’t see anything in the form admin – do you know how I can move one of the lines back down to the bottom of the page?

    Thank you!


    Hi kathrynmichaud!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed

    .gform_wrapper .gf_step { color: red; }


    #top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select { border-color: red !important; }


    #top .main_color .input-text, #top .main_color input[type='text'], #top .main_color input[type='input'], #top .main_color input[type='password'], #top .main_color input[type='email'], #top .main_color input[type='number'], #top .main_color input[type='url'], #top .main_color input[type='tel'], #top .main_color input[type='search'], #top .main_color textarea, #top .main_color select { color: blue; font-size: 18px; }



    Hi – that’s all brilliant – exactly what I needed – thank you!

    You don’t happen to have an idea why I’ve got two border lines showing at the top of the first page of the form?



    You can remove one by adding following code to Quick CSS

    .gform_wrapper .gf_page_steps {
    border: none;



    Hi – thanks – all sorted – last couple of queries:

    1) CSS to change colour of the Form Title?

    2) CSS to change size of the Next/Previous buttons at the bottom of the form?

    Many thanks for all your help.



    Please add following code to Quick CSS

    .gform_wrapper h3.gform_title { color: red; }
    #top .gform_page_footer .button { font-size: 18px; }

    Best regards,


    Brilliant – thank you!



    You are welcome, glad we could help! :)

    Best regards,


    Hi – just installed Gravity Forms for the first time and tried a few test polls and surveys. Here’s the test page: As you can see, the Enfold theme over-rides the in-built styles of the forms, and the results aren’t nice, particularly the bullet points added in front of the questions and radio buttons. How do I remove these bullet points? How do I get the Forms styled as shown in the Forms preview window?




    Thank you for using the theme.

    I’m sorry but I think you left out the link to the actual page. If you have the access to the Gravity Forms css file, edit it then copy the form styles. Add it on css > custom.css file.



    Hi Ismael – thanks for your quick response.

    I solved the problem with the Enfold theme putting bullet points in front of Gravity Forms – in the settings of Gravity Forms, I had selected Output ‘HTML5’ styling and de-selected ‘Output CSS’ styling (this was suggested by a video I had watched re: styling Gravity Forms polls). Once I switched those setting back to the original, then the forms/polls/surveys displayed just fine in Enfold.

    Thanks again for your quick response – I’m impressed with your support!


Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Gravity Forms Styling’ is closed to new replies.