How to Change Styling of Review Page (Part 1 of 2) [RESOLVED]

Good Day!

We have a Gravity Form that allows clients to schedule appointments.

To schedule an appointment, the client first fills out the form then clicks on a button, titled “REVIEW AND SCHEDULE”, which leads to a Gravity Forms review page.

The review page contains a summary table, a PREVIOUS button, and a SCHEDULE APPOINTMENT button.

We would like to know how to change the following (via CSS or code snippet):

(1) The background color of the alternating rows in the summary table. (click here for details)

(2) The color and size of the fonts contained inside the summary table. (click here for details)

(3) The text of the “PREVIOUS” button (to something like “< PREVIOUS” or “RETURN TO FORM”) (click here for details)

For a live demo (i.e., to generate the review page), click here to access our scheduling form, complete the form, then click the “REVIEW AND SCHEDULE” button.

Note: Tried everything! Could not find a selector nor a code snippet that would solve the above. Also, looked at this GF document, but did not help.

Perhaps one of you guys can help solve our big mystery. :confused:

Thank you!

Hi Jonathan. The text on the buttons is defined in this code. See example 2 in the docs here:

For changing the header row background color, there really is no filter for that for the review page only (using the {all_fields} merge tag). There is a filter which will change that header (label) background color, designed to be used with the Notifications. That also works for the review page when using {all_fields}. So using the gform_email_background_color_label filter will change the email and the review page label background color:

If you don’t want to change those colors on the review page and in the notification (if your notification uses {all_fields}) you could use the gform_review_page filter to do some string replacement, like this:

<?php
add_filter( 'gform_review_page_33', 'change_review_page_stuff', 10, 3 );
function change_review_page_stuff( $review_page, $form, $entry ) {
	// Enable the review page
    $review_page['is_enabled'] = true;
    if ( $entry ) {
        // Populate the review page.
        $review_page['content'] = GFCommon::replace_variables( '{all_fields}', $form, $entry );
		GFCommon::log_debug( __METHOD__ . '(): Original Review page => ' . print_r( $review_page, true ) );
		// change font family, size and color
		$review_page = str_replace( 'font-family: sans-serif; font-size:12px;', 'font-size:16px; font-family:Georgia, serif; color:blue;', $review_page );
		// change label heading background color
		$review_page = str_replace( '#EAF2FA', '#FAEBD7', $review_page );
		GFCommon::log_debug( __METHOD__ . '(): Modified Review page => ' . print_r( $review_page, true ) );
    }
    return $review_page;
}

That made my review page look like this: Annotation on 2022-02-07 at 12-58-29.png - Droplr (emoji not included)

Hi Chris,

Again, can’t thank you enough for your help. Your solutions worked, but not without some issues.

Here goes:

(1) and (2): I applied the code snippet you provided but it partially worked. The colors and font size changed; HOWEVER, when I clicked on either the “Previous” or “Submit” buttons shown on the Review Page (refer to your screenshot), nothing happened. Got a spinner but that was it. Did the same happen to you? :face_with_diagonal_mouth:

(3): Based on the information you shared, I applied the code snippet provided below and was able to change the text of the “Previous” and “Review Form” (next) buttons. Worked like a charm. And yes, the buttons worked just fine. :slightly_smiling_face:

Results:

“REVIEW FORM” (next) button successfully changed to “REVIEW AND SCHEDULE”
“PREVIOUS” (previous) button successfully changed to “<Return To Form”

Ouch:

When I used your code snippet together with the one provided below, the modified “Previous” button text I used “< Return To Form” reverted back to its original version “Previous”. Can you check me on that? :grinning:

Would be Nice:

Is their any way to combine both snippets into one (with proper code changes and comments added) to fix the above? :flushed:

Note:

Above occurred with PHP 7.4.27, 8.0.15, and 8.1.2

Thank you,

Jonathan


<?php
// Note: Update the '16' to match the ID of your affected gravity form.

add_filter( 'gform_review_page_16', 'change_review_page_button', 10, 3 );

       function change_review_page_button( $review_page, $form, $entry ) {
 
       $review_page['previousButton']['text'] = '< Return to Form';
	   $review_page['nextButton']['text'] = 'REVIEW AND SCHEDULE';
 
    return $review_page;
}

@chrishajer,

To minimize confusion and clean up things a bit, this topic continues here (Part 2 of 2).

It’s OK to close this topic as RESOLVED (Part 1 of 2).

Thank you!

Jonathan