- November 12, 2023
Full Transparency: This post contains affiliate links to Gravity Forms and Hostgator’s hosting plans. If you choose to use these links to sign up for Hostgator hosting, we may earn a small commission at no extra cost to you. These commissions help us continue to create helpful content like this guide. We only recommend services and products that we believe will genuinely benefit our readers.
Attached Materials
Welcome to Thynkdigitech, where we empower real estate professionals with cutting-edge digital solutions. In this video, we’re diving into the heart of lead generation and property valuation. Discover how to craft a dynamic Property Valuation Funnel using the Gravity Forms plugin – your key to collecting vital property details for accurate cost estimation and capturing leads for marketing campaigns.
🌐 What to Expect: Explore Gravity Forms’ features, design a user-friendly multistep form, and learn strategies to integrate it seamlessly into your marketing efforts. Elevate your real estate game by turning property details into leads, both for sellers and buyers.
🚀 Subscribe for Pro Tips: Hit subscribe to stay updated on the latest real estate tech insights, tutorials, and strategies. Let’s amplify your success in the digital landscape!
Buttonize Gravity Forms Radio and Checkbox Fields CSS
/* Buttonize Radio & Checkbox Fields
Remember to add buttonized to the CSS Class of the gravity form radio and checkbox field you want to buttonize*/
.gform_wrapper .gfield.buttonized .gfield_radio .gchoice,
.gform_wrapper .gfield.buttonized .gfield_checkbox .gchoice {
position: relative;
text-align: center;
}
.gform_wrapper .gfield.buttonized input[type="radio"],
.gform_wrapper .gfield.buttonized input[type="checkbox"] {
position: absolute;
left: -9999px;
}
.gform_wrapper .gfield.buttonized .gfield_radio label,
.gform_wrapper .gfield.buttonized .gfield_checkbox label {
display: block !important;
position: relative;
max-width: 50%;
padding: 15px;
margin: 20px; /* Adjusted margin */
font-size: 17px;
border: 1px solid #3f3f3f;
background-color: #ffffff;
cursor: pointer;
border-radius: 15px; /* Added border-radius */
font-family: 'Poppins', sans-serif; /* Added font-family */
}
.gform_wrapper .gfield.buttonized input[type="radio"]:focus+label,
.gform_wrapper .gfield.buttonized input[type="checkbox"]:focus+label {
border-color: #040404;
}
.gform_wrapper .gfield.buttonized input[type="radio"]:checked+label,
.gform_wrapper .gfield.buttonized input[type="checkbox"]:checked+label {
border-color: #040404;
background-color: #d7d7d7;
overflow: hidden;
}
.gform_wrapper .gfield.buttonized input[type="radio"]:checked+label::before,
.gform_wrapper .gfield.buttonized input[type="checkbox"]:checked+label::before {
content: '';
display: block;
position: absolute;
top: -.70em;
right: -.70em;
left: auto;
width: 1.3em;
height: 1.3em;
background-color: #e1b653;
border-radius: 5;
border: 5;
transform: rotate(45deg);
}
.gform_wrapper .gfield.buttonized .gfield_radio label::before,
.gform_wrapper .gfield.buttonized .gfield_checkbox label::before {
display: none;
}
Centering an Entire Gravity Form CSS
/* keep it mobile friendly by only applying these styles for larger viewports */
@media only screen and (min-width: 641px) {
body #gform_wrapper_1 {
max-width: 100%;
margin: 0 auto;
}
body #gform_wrapper_1 .gfield .ginput_container,
body #gform_wrapper_1 .gfield .gfield_description,
body #gform_wrapper_1 div.ginput_complex label,
body #gform_wrapper_1 input:not([type='radio']):not([type='checkbox']):not([type='submit']),
body #gform_wrapper_1 select,
body #gform_wrapper_1 textarea {
text-align:center;
}
body #gform_wrapper_1 .top_label .gfield .gfield_label {
text-align: center;
display: block;
}
body #gform_wrapper_1 .gform_footer,
body #gform_wrapper_1 .gform_page_footer{
text-align: center;
}
/* Layout Buttonized Inputs As Grid */
.gform_wrapper .gfield.buttonized .gfield_radio,
.gform_wrapper .gfield.buttonized .gfield_checkbox {
display: grid;
grid-gap: 0.5em 1em;
}
}
Support Our Channel with a Coffee
Click the cup
Love what we do? You can now support us by buying us a coffee!
At Thynkdigitech, we’re dedicated to bringing you valuable content, tips, and insights. We believe in providing our readers with the best possible experience and information. If you’ve found our articles helpful, entertaining, or informative, you can now show your appreciation by supporting us through Buy Me a Coffee.
Fuel Our Creativity: Just like your morning coffee kickstarts your day, your support fuels our creativity and helps us continue to produce quality content.
Sustain Quality: Your contribution helps us maintain the quality of our blog, invest in research, and keep the content flowing.
Stay Ad-Free: Your support allows us to keep our website ad-free, providing a clean and enjoyable reading experience for you.
Click the “Buy Me a Coffee” button below or visit our Buy Me a Coffee page.
Choose the number of coffees you’d like to buy to support our work.
Share a message or simply show your support.
Your contribution, no matter the size, means the world to us. It’s a fantastic way to show that you value what we do and want to see more of it.
We genuinely appreciate your support, and it motivates us to keep delivering the content you love. Thank you for being part of our journey!
Buy us a coffee.
At Thynkdigitech, we’re passionate about the digital world and the boundless opportunities it offers. Our mission is to harness the power of technology and creativity to help businesses and individuals thrive in the digital landscape. With a team of experienced professionals, we’re dedicated to delivering innovative solutions, exceptional designs, and top-notch services. Join us on this journey of digital transformation and let’s make your ideas come to life.
