├── Redirect code
├── set field to disabled with css class
└── Base Code


/Redirect code:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * populate_product_link_gf
 3 |  *
 4 |  * @function renders the acf field on the frontend in a gravity form field
 5 |  * @author Taylor Drayson
 6 |  * @since 20/01/22
 7 |  * @usage Replace 'your_parameter' with your gravity form field name
 8 |  * Also replace 'field_name' with acf field name for the post
 9 | */
10 | add_filter( 'gform_field_value_link', 'populate_product_link_gf' );
11 | function populate_product_link_gf( $value ) {
12 |     $id = get_the_id();
13 |     return get_field('product_redirect',$id);
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/set field to disabled with css class:
--------------------------------------------------------------------------------
 1 | add_filter( 'gform_field_css_class', function ( $classes, $field, $form ) {
 2 | 
 3 |     if ( $field->cssClass == 'read-only' ) {
 4 |         $classes .= ' gfield_readonly';
 5 |     }
 6 | 
 7 |     return $classes;
 8 | }, 10, 3 );
 9 | 
10 | add_action( 'gform_enqueue_scripts', function ( $form, $is_ajax ) {
11 | 
12 |     ?>
13 |     <script type="text/javascript">
14 |         document.addEventListener( 'DOMContentLoaded', function() {
15 |             var readOnlyFields = document.querySelectorAll( '.gfield_readonly input, .gfield_readonly textarea' );
16 |             Array.prototype.forEach.call( readOnlyFields, function( field ) {
17 |                 field.setAttribute( 'disabled', 'disabled' );
18 |             } );
19 |         } );
20 |     </script>
21 |     <?php
22 | 
23 | }, 10, 2 );
24 | 


--------------------------------------------------------------------------------
/Base Code:
--------------------------------------------------------------------------------
  1 | 
  2 | /*** MAIN WRAPPER ***/
  3 | .gform_wrapper {
  4 | 
  5 | }
  6 | 
  7 | /*** FIELD STYLING ***/
  8 | .gform_wrapper ul.gform_fields li.gfield,
  9 | .gform_wrapper .top_label li.gfield.gf_right_half {
 10 |     padding-right: 0;
 11 | }
 12 | 
 13 | 
 14 | 
 15 | input[type=text], textarea, input[type=password], [type="search"], [type="date"], [type="tel"], [type="email"] {
 16 |     background: #ffffff;
 17 |     border: solid 1px rgba(225,225,225,0.85);
 18 |     border-radius: 0;
 19 |     color: #4d4d4d !important;
 20 |     font-weight: 400 !important;
 21 |     padding: 15px 12px !important;
 22 |   	font: inherit; 
 23 | }
 24 | 
 25 | 
 26 | 
 27 | .gform_wrapper .gform_body .gform_fields .gfield select {
 28 |     background: #ffffff;
 29 |     border: solid 1px rgba(225,225,225,0.85);
 30 |     border-radius: 0;
 31 |     color: #4d4d4d !important;
 32 |     font-weight: 700 !important;
 33 |     letter-spacing: 1px !important;
 34 |     padding: 17px 15px !important;
 35 | }
 36 | 
 37 | 
 38 | /*** FIELD FOCUS STYLING ***/
 39 | 
 40 | input:focus,
 41 | input[type=text]:focus,
 42 | input.text:focus,
 43 | input.title:focus,
 44 | textarea:focus {
 45 |     box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2);
 46 | 	border: solid 1px rgba(225,225,225,0.75);
 47 | }
 48 | 
 49 | /*** MESSAGE BOX TRANSITION ***/
 50 | .gform_wrapper textarea.medium {
 51 |     margin-top: 6px;
 52 |     height: 10em;
 53 |     transition: height .3s ease-out;
 54 | }
 55 | 
 56 | /*** MESSAGE BOX FOCUS HEIGHT ***/
 57 | .gform_wrapper textarea.medium:focus {
 58 |     height: 25em;
 59 | }
 60 | 
 61 | /*** BUTTON STYLING ***/
 62 | .gform_wrapper .gform_footer input.button,
 63 | .gform_wrapper .gform_footer input[type=submit] {
 64 | 
 65 |   
 66 | }
 67 | 
 68 | .gform_wrapper input[type=submit] {
 69 |     cursor: pointer;
 70 |     text-transform: capitalize;
 71 |     font: inherit;
 72 |     font-weight: 300;
 73 |     padding: 12px 25px;
 74 |     width: 150px;
 75 |     border-radius: 0;
 76 |     background: #137d7d;
 77 |     color: #f7f7f7;
 78 |     text-transform: uppercase;
 79 |     letter-spacing: 1px;
 80 |     border: none;
 81 |   	border-radius: 3px;
 82 |     transition: box-shadow .2s ease-in-out;
 83 | }
 84 | 
 85 | /*** BUTTON HOVER STYLING ***/
 86 | .gform_wrapper input[type=submit]:hover {
 87 |     background: #004D4D;
 88 |     color: #fff;
 89 |     box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
 90 | }
 91 | 
 92 | .gform_wrapper .gform_body .gform_page_footer .gform_next_button {
 93 |     cursor: pointer;
 94 |     text-transform: capitalize;
 95 |     font-weight: 300;
 96 |     padding: 10px 12px;
 97 |     border-radius: 0;
 98 |     background: #137d7d;
 99 |     color: #f7f7f7;
100 |     border: none;
101 |   	border-radius: 3px;
102 |     transition: box-shadow .2s ease-in-out;
103 | }
104 | 
105 | .gform_wrapper .gform_body .gform_page_footer .gform_next_button:hover {
106 |     background: #004D4D;
107 |     color: #fff;
108 |     box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);
109 | }
110 | 
111 | .gform_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage {
112 |   background-color: #43b5ac;
113 | }
114 | 


--------------------------------------------------------------------------------