Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 5, 2017 at 9:04 pm #730071
    mark2mrktng

    Hi,

    I have created a form using Gravity Forms & looking to apply the styling that’s used in Enfold’s native forms to the Gravity Form. The Gravity Form is using the same text however the input boxes are styled slightly differently & the field labels don’t have the same color on the astrix… the styling of the submit button is slightly different as well.

    I assume this is a fairly quick fix via CSS, but I’m not sure what CSS class names to apply to the Gravity Form.

    I’ve provided a link to the contact form in question in the private section (the Gravity Form & native Enfold form are side by side for comparison)

    Thanks!

    January 5, 2017 at 11:20 pm #730109
    Basilis

    Hi mark2mrktng!

    Please follow Yigit advice here
    https://kriesi.at/support/topic/gravity-forms-styling-2/
    let us know if it works

    Regards,
    Basilis

    January 5, 2017 at 11:32 pm #730111
    mark2mrktng

    Hi Basilis,

    I did come across this posting earlier & tried utilizing it but it doesn’t get the form input field boxes the same as the Enfold native form or change the astrix text. Is there not a CSS class name that is being used by the native form that I can apply to the Gravity form?

    January 8, 2017 at 5:39 pm #730881
    mark2mrktng

    Hi Basilis, just wondering if you’d been able to make any progress on this? Thanks.

    January 9, 2017 at 4:38 am #730945
    Ismael

    Hi,

    Please add this code in the Quick CSS field.

    #top .gform_wrapper input, #top .gform_wrapper select {
    margin-bottom: 0;
    min-width: auto;
    width: 100%;
    margin-bottom: 0;
    display: inline;
    min-width: 50px;
    padding: 13px;
    border-radius: 2px;
}

#top .gform_wrapper .gfield_required {
    color: #109bc5 !important;
}

    Best regards,
    Ismael

    January 9, 2017 at 4:19 pm #731182
    mark2mrktng

    Thanks Ismael, that seems to have the input fields!

    Only issue is that it also stretches the button full width as well. What CSS change would I have to make to get the button back to normal size? Thanks!

    January 11, 2017 at 4:22 am #731822
    mark2mrktng

    Hi Ismael,

    Just wondering if you’ve found a CSS fix to not make the buttons full width? Thanks!

    January 11, 2017 at 5:36 pm #732170
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    #top .gform_wrapper .button { max-width: 150px; }

    Best regards,
    Yigit

    January 12, 2017 at 3:15 pm #732666
    mark2mrktng

    Great, that’s perfect – Thanks!

    January 12, 2017 at 3:30 pm #732672
    Yigit

    Hi!

    You are welcome!

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Cheers!
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Apply Enfold Contact Form Styling To Gravity Form’ is closed to new replies.