ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
Easily Style Your Gravity Forms!
ฝัง
- เผยแพร่เมื่อ 7 ส.ค. 2024
- Leveraging a little bit of CSS you can easily modernize your gravity forms style. Simply copy and paste the CSS from the link below to use it as a baseline for your next form!
CSS Resource: buildingonwp.com/resources/mo...
Hi, this is a grat tutorial! I've been trying to change the font family of the form in this code, but it doesn't seem to have any effect. Is there a way to change the form's font family with this code?
Thanks. This is what I was looking for.
Glad you found it useful!
Love your tutorials as ever! It's always good to see tips and tricks for Pro. If you're taking suggestions on videos to create, I'd love to get your opinion and help on another styling subject using cornerstone and Pro
Glad you've found my videos useful :) That's the goal. What is it that you are looking to style?
@@buildingonwordpress sorry for the late reply, and thanks for getting back to me previously. I have solved the styling issue I previously had, but if I can think of anything else I'll send some suggestions! thanks again Josh
It was really great. Thank you for providing us. But unfortunately on the drop down field. It does not work well and title will be placed under that field. what's the solution ? 🙄🙄🙄🙄
Hi @babakmehrzad8998 -- not sure I'm following. My examples in the video are with text fields and many dropdowns. Is there a different format / field type you are referring to?
@@buildingonwordpress I did not see a drop-down field in your tutorial.
Yes, unfortunately, the title is not displayed correctly in some fields
I uploaded the screenshot here
www.linkpicture.com/q/Screenshot-2023-06-30-173001.jpg
Does this affect all forms or can you customize individual forms differently?
Hi @bobbyburtonphotography - if you're using Cornerstone or a similar builder you can simply add this to your page level CSS and it would only affect forms on that page. If this is applied to global CSS it will apply to all forms. You could get more specific and identify a form ID in the CSS as well.
Mr josh i really need that css, but i can't access to your website, can you send it to me? Please
/*GRAVITY FORMS CUSTOM STYLES*/
/* Form input and select styles */
select,
textarea,
input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=color],
.uneditable-input {
display: inline-block;
height: 4.5em !important;
border: 1px solid #7e86aa;
padding: 1em;
font-size: 12px !important;
line-height: normal;
color: #051143;
background-color: #ffffff;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
/* Focus styles for form fields */
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=number]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password]:focus,
body .gform_wrapper .gform_body .gform_fields .gfield select:focus,
body .gform_wrapper .gform_body .gform_fields .gfield textarea:focus {
border: 1px solid blue !important;
box-shadow: 0em 0.5em 2em 0em rgba(0,0,0,0.1) !important;
}
/* Form field labels */
body .gform_wrapper .top_label .gfield_label,
body .gform_wrapper .left_label .gfield_label,
body .gform_wrapper .right_label .gfield_label {
color: #7e86aa;
font-size: 0.65em;
text-transform: uppercase;
position: absolute;
background: white;
padding: 0.25em 1em;
margin-top: -8px;
margin-left: 5px;
transition: color 0.3s ease;
max-width: fit-content;
border-bottom: none;
}
/* Form field labels in focus */
body .gform_wrapper .gform_body .gform_fields .gfield:focus-within .gfield_label {
color: blue;
}
/* Spacing */
.gform_wrapper.gravity-theme .gform_fields {
grid-row-gap: 30px !important;
}
/* Additional styles for Gravity Forms theme */
.gform_wrapper.gravity-theme input[type=color],
.gform_wrapper.gravity-theme input[type=date],
.gform_wrapper.gravity-theme input[type=datetime-local],
.gform_wrapper.gravity-theme input[type=datetime],
.gform_wrapper.gravity-theme input[type=email],
.gform_wrapper.gravity-theme input[type=month],
.gform_wrapper.gravity-theme input[type=number],
.gform_wrapper.gravity-theme input[type=password],
.gform_wrapper.gravity-theme input[type=search],
.gform_wrapper.gravity-theme input[type=tel],
.gform_wrapper.gravity-theme input[type=text],
.gform_wrapper.gravity-theme input[type=time],
.gform_wrapper.gravity-theme input[type=url],
.gform_wrapper.gravity-theme input[type=week],
.gform_wrapper.gravity-theme select,
.gform_wrapper.gravity-theme textarea {
padding: 1em !important;
}
/* Submit button styles */
.gform_wrapper.gravity-theme #field_submit .gform-button--width-full,
.gform_wrapper.gravity-theme .gform_footer .gform-button--width-full {
height: 4em;
}
/* Large input and select styles */
.gform_wrapper.gravity-theme .gfield input.large,
.gform_wrapper.gravity-theme .gfield select.large {
height: 4em;
}
.gform_wrapper.gravity-theme .gfield_required {
color: #c02b0a;
display: inline-block;
font-size: 0.85em;
padding-left: 0.5em;
}
@@buildingonwordpress thankkk you soo much
i need css pleaseeeeeee
buildingonwp.com/blog/simple-gravity-forms-css-to-easily-modernize-the-style-of-fields/
website is not working i want css
Hi @thenima6373 -- website is working on my end. What's not displaying on your end? Here is the updated url: buildingonwp.com/blog/simple-gravity-forms-css-to-easily-modernize-the-style-of-fields/
@@buildingonwordpress its not working ,it says The connection has timed out , ive tried by other internet and other device but its not working