How to Change Styling of Review Page (Part 2 of 2)

Get Help
, ,
1

Good Day!

Based on what we learned in Part 1 of this topic, we came up with two nice-looking code snippets to change the styling of the Review page. See below.

Only thing left is to find a way to change the size and color of the fonts contained in the Review page (summary table) while retaining the functionality and text of the modified buttons. As a minimum, we would like to know how to change the font size.

We tried the suggestion provided by @chrishajer – and – by using every imaginable CSS selector we could find but, unfortunately, they did not work.

Any takers that can help with this? Much appreciated!

Cheers,

Jonathan

Code Snippets:

Change Styling of Review Page (Add Text to Top of Page, Change Text of Page Buttons)

<?php
// Change the Review page styling and contents
// Note: Replace "16" with your affected Gravity Form ID number and the change the button text below to suit your needs

add_filter( 'gform_review_page_16', 'add_review_page_16', 10, 3 );
 
function add_review_page_16( $review_page, $form, $entry ) {

    // Enable the review page
       $review_page['is_enabled'] = true;
	
	// Add text to top of review page
       $review_page['content'] = '<p style="font-size:16px;">Please review your information before submittal. To make any changes, click the "<span style="color:#278dc5">Return to Form</span>" link below.</p>';
	   
	// Change the text of the Review and Previous buttons
	   $review_page['previousButton']['text'] = '< Return to Form';
	   $review_page['nextButton']['text'] = 'REVIEW AND SCHEDULE';
	
	// Populate the review page
	   $review_page['content'] .= GFCommon::replace_variables( '{all_fields}', $form, $entry );
	
    return $review_page;
 }

Change Color of Summary Table Displayed in Email & Review Page

<?php
// Change the color of summary table displayed in email & review page
// Note: This snippet affects applicable gravity forms contained within a website.

add_filter( 'gform_email_background_color_label', 'set_email_label_color', 10, 3 );
        function set_email_label_color( $color, $field, $lead ){
            return '#d0e2f2';
        }
2

@AeroStar This is default HTML table styling. Although it seems the best approach is by adding inline styles but you can try the ones below. Sorry, your form configuration is a bit complex for me to duplicate so below is my best guess. Hope it helps.

table td {color:red;}

font {color:red;}

table td font {color:red;}
3

Hi Derek,

Thank you for your help. We tried your proposed solution (for the review page) but didn’t work. No worries. We got the color covered with the code snippet provided above.

Note: Not sure you know this, but to use the code snippets, simply install the plugin, Code Snippets, and add them per the developer’s plugin instructions. Quite easy and effective.

Again, thank you.

Jonathan