How do I add enfold form styles to gravity forms?

Hey geraldinetay27,

Can you give us a link to your page with gravity forms?

Best regards,
Nikko

Hi geraldinetay27,

https://cl.ly/4c2f6e570801 Here is what I am seeing, how do you need to change it?

Best regards,
Victoria

Hi geraldinetay27,

You need to set a background image for the color section where the form is added. And then we can help you to change the css.
Here are the docs for you:

Best regards,
Victoria

Hi geraldinetay27,

The image needs to be set up so that we can see which colors the form should have. If you use a gray image, the white colors will be invisible. What background is the color section going to have?

Best regards,
Victoria

Hi geraldinetay27,

We have added this css code in Quick CSS, located in Enfold > General Styling:

#top .gfield_label,
#top .ginput_container label,
#top .gform_fields ::placeholder {
    color: white;
}

#top .gfield_required {
    color: red;
}

#top .ginput_container input[type="text"], 
#top .ginput_container select, 
#top .ginput_container textarea {
    color: #fff;
    border-color: #fff;
    border-width: 2px !important;
    background-color: transparent;
}

Let us know if you need further assistance.

Best regards,
Nikko

Hi geraldinetay27,

We could suggest a css code for it but we don’t have an image (white dropdown arrow) that’s suitable for your form, here’s the css code that you can add:

#top .entry-content-wrapper select {
    background-image: url(image_url);
}

Just replace image_url with a suitable image.
You can upload the image in Media > Add New.
Hope this helps.

Best regards,
Nikko

Hi geraldinetay27,

I replaced the code I gave to this one.

#top .gfield_label,
#top .ginput_container label,
#top .gform_fields ::placeholder {
    color: white;
}

#top .gfield_required {
    color: red;
}

#top .ginput_container input[type="text"], 
#top .ginput_container select, 
#top .ginput_container textarea {
    color: #fff;
    border-color: #fff;
    border-width: 2px !important;
    background-color: transparent;
    background-image: none;
}

#top .ginput_container select option {
    color: #333;
}

#top .ginput_container_select {
    position: relative;
}

#top .ginput_container_select::after {
    content: '\e883';
    display: block;
    color: white;
    font-family: 'entypo-fontello';
    position: absolute;
    right: 12px;
    top: 6px;
    z-index: -1;
}

1. The two code blocks at the bottom of the new code I gave is the answer to this. #top .ginput_container_select and #top .ginput_container_select::after

2. The answer is the 3rd to the last block: #top .ginput_container select option

3. I have added this code, the first code block centers it, while the 2nd one adds the white outline.

#top .gform_wrapper .gform_footer.top_label {
    text-align: center;
}

#top .gform_wrapper input.gform_button {
    border: 2px solid white;
}

Best regards,
Nikko

Hi geraldinetay27,

Please add this css code and just replace the background color:

#top .gform_wrapper input.gform_button:hover {
    background-color: blue;
}

Best regards,
Nikko

Hi geraldinetay27,

Try adding this css code, place it above the last code I gave.

#top .gform_wrapper input.gform_button {
    background-color: transparent;
}

Best regards,
Nikko