srfm_form_css_variables

Description

This action runs when SureForms is printing CSS variables. You can use this hook to add your custom CSS variables or override the existing SureForms CSS variables dynamically in the form markup.

This allows for customization of form styles, such as colors and other design attributes.

Parameters

$css_variables (array) – An associative array including the following keys and their values:

• id – The form ID.
• primary_color – The primary color value.
• help_color – The help color value.

The above colors refer to the “Primary Color” and “Text Color” which are present under the Style Tab in the editor.

Use Case

For example, if you want to change the text and background color of the back button for a form with a page break, we have the following variables for the same:

--srfm-page-break-back-btn-text-color
--srfm-page-break-back-btn-background

--srfm-page-break-back-btn-text-color
--srfm-page-break-back-btn-background

The same can be modified by using hsl() form of the color or just a simple hex code or color name will work fine as well.

Hook Source

 /**
* hook source
*/
do_action( 
  'srfm_form_css_variables',
       [
             'id'            => $id,
             'primary_color' => $primary_color_var,
              'help_color'    => $help_color_var,
       ]
);

 /**
* hook source
*/
do_action( 
  'srfm_form_css_variables',
       [
             'id'            => $id,
             'primary_color' => $primary_color_var,
              'help_color'    => $help_color_var,
       ]
);

Hook Usage

You can attach a function to the srfm_form_css_variables action using add_action(). In this function, you can define and output your custom CSS variables.

add_action(‘srfm_form_css_variables’, 'your_custom_function', 10, 1);

function your_custom_function( $css_variables )
{
   $primary_color = $css_variables[‘primary_color’];
 ?>
  --srfm-slider-shadow-color: hsl( from <?php echo esc_html( $primary_color ); ?> h s l / 0.10 );
 <?php
   //Add code here
}

add_action(‘srfm_form_css_variables’, 'your_custom_function', 10, 1);

function your_custom_function( $css_variables )
{
   $primary_color = $css_variables[‘primary_color’];
 ?>
  --srfm-slider-shadow-color: hsl( from <?php echo esc_html( $primary_color ); ?> h s l / 0.10 );
 <?php
   //Add code here
}

Code Snippet

You can use the following code snippet as an example:

/**
 * Customize the CSS variables for a SureForms form or add additional variables.
 *
 * @param array<string, string> $params Parameters sent by the 'srfm_form_css_variables' action.
 */
function customize_form_css_variables( $params ) {
    $primary_color  = $params['primary_color'];
    $help_color_var = $params['help_color'];
    ?>
            --srfm-page-break-back-btn-text-color: #000;
            --srfm-page-break-back-btn-background: #f2eaa6;
    <?php
}
add_action( 'srfm_form_css_variables', 'customize_form_css_variables', 10, 1 );

/**
 * Customize the CSS variables for a SureForms form or add additional variables.
 *
 * @param array<string, string> $params Parameters sent by the 'srfm_form_css_variables' action.
 */
function customize_form_css_variables( $params ) {
    $primary_color  = $params['primary_color'];
    $help_color_var = $params['help_color'];
    ?>
            --srfm-page-break-back-btn-text-color: #000;
            --srfm-page-break-back-btn-background: #f2eaa6;
    <?php
}
add_action( 'srfm_form_css_variables', 'customize_form_css_variables', 10, 1 );

Output

Here’s the output for srfm_form_css_variables:

That’s all! We hope this has been helpful. If you have any other doubts, feel free to contact us by opening a support ticket below.