I have searched for several hours and have found nothing on how to increase the font size and change the font color of the label on the total price field. I would like to center the field, increase the font size and change the color of the label. Is this possible? The form ID is 43 and the field ID is 30. I can use css but I am unable to find anyone with this issue.
Hi Roy. Please share a link to the page on your site where we can see the form so we can give you the proper CSS. Thank you.
Thank you for responding. Here is the link:Order 10%off Internet Service – NETworx Broadband Fiber Internet – Big Lake, Becker MN
Look for this “Your new Estimated Monthly Total”
Hello Chris,
I updated the forum with a link to the site. Here it is: https://networxbroadband.com/order-limited-time-offer/
You can try this snippet:
//center field
#gform_wrapper_43 .ginput_container.ginput_container_product_calculation {
text-align: center !important;
}
//change label font size and color
#gform_wrapper_43 .gform-field-label.gform-field-label--type-sub-large.ginput_product_price_label {
font-size: 50px;
color: #365478;
}
//change font size and color of price
#gform_wrapper_43.gravity-theme .ginput_product_price, .gform_wrapper.gravity-theme .ginput_shipping_price {
color: #900;
font-size: 50px;
}
Hello Chris,
I copied and pasted this code into the child theme css area and it had no affect. Any other thoughts?
Hi Roy.
The URL you provided has Form 43 embedded in it, and when you select an Internet speed, you go to pages with other forms:
300Mbps
Form 35
1GIG
Form 40
5GIGs
Form 41
I did not notice these were different forms until I reviewed them a few times. Are you trying to change the font size and color of the “Total Monthly Payment” and then center it on all three pages/forms?
No i am just trying to make changes on form 43 on the “Your new Estimated Monthly Total” field.
The other forms are fine.
Got it.
The CSS Chris E provided earlier will work. Try changing the comment syntax like this:
/* center field */
#gform_wrapper_43 .ginput_container.ginput_container_product_calculation {*/
text-align: center !important;
}
/* change label font size and color */
#gform_wrapper_43 .gform-field-label.gform-field-label--type-sub-large.ginput_product_price_label {
font-size: 50px;
color: #365478;
}
/* change font size and color of price */
#gform_wrapper_43.gravity-theme .ginput_product_price, .gform_wrapper.gravity-theme .ginput_shipping_price {
color: #900;
font-size: 50px;
}
Result:
Hello Chris,
This still doesn’t seem to work, nothing changes when I try to make changes. I also wanted to be able to remove or modify the word “Price” if possible with these other changes. Is this possible?
Hi Roy. Can you show me where you added the CSS?
As far as changing the word Price, you need to use the gform_product_price filter:
// apply to form 26 only
add_filter( 'gform_product_price_26', function ( $sublabel, $form_id ) {
GFCommon::log_debug( __METHOD__ . '(): Running...' );
// note that the colon will be added after Cost automatically
return 'Cost';
}, 10, 2 );
This is PHP code that can be added to your theme functions.php file, or you can use a plugin such as this one to keep the code separate from the theme: Code Snippets – WordPress plugin | WordPress.org
Please see this article for additional information on placing PHP snippets: Where Do I Put This Code? - Gravity Forms Documentation
Result:
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.