Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Josh Pollock

    (@shelob9)

    Are you looking to apply a class to every field or are you looking for one unique class on the form element itself? Adding a class to every field is doable, but would be tricky. The form element already has the field ID as a class. That is unique to the form. Seems most efficient to use that.

    Thread Starter fokus3

    (@fokus3)

    I guess you have misunderstood a bit 🙂

    For example: I have a page and would like to put two forms on it. Now I would like apply

    Form A -> class A
    Form B -> class B

    and maybe later

    Form C -> class A+B

    As you can see this is not an unique ID but a simple class. Meanwhile I found a solution using this “caldera_forms_render_form_wrapper_classes” hook. But it would be so much easier (as used my many other shortcodes) to have something like that:

    [caldera_form id=”CF55eaf1a323bf3″ class=”A”]

    Or to have the ability to setup a custom class for the entire form via the management interface of CF.

    What do you think about?

    Plugin Author Josh Pollock

    (@shelob9)

    When you use the shortcode [caldera_form id="CF55eaf1a323bf3"] the form will have the class “CF55eaf1a323bf3”. If you want to custom class, check out this filter:
    https://calderawp.com/doc/caldera_forms_render_form_wrapper_classes/

    Thread Starter fokus3

    (@fokus3)

    Is it possible to give the user the ability to set a class inside the shortcode, please. The ID version works fine, but due to its format it is a bit hard to manage …. 🙂

    Plugin Author Josh Pollock

    (@shelob9)

    If you’re issue is that you don’t want to use the ID of the form in your CSS (I can see why not) then why not use something like what I linked to above (https://calderawp.com/doc/caldera_forms_render_form_wrapper_classes/) to use the form’s name as a class. Like this:

    add_filter( 'caldera_forms_render_form_wrapper_classes', 'slug_add_cf_wrapper_classes', 10, 2 );
    function slug_add_cf_wrapper_classes( $form_wrapper_classes, $form ) {
    	$form_wrapper_classes[] = strtolower( sanitize_title( $form['name'] ) );
    	return $form_wrapper_classes;
    
    }

    That would be the simplest way.

    Maybe, you could use WordPress’ shortcode_atts_ filter to make a shortcode [caldera_forms id="CF123.." class="hats"] work. You’d still have to pass the class the caldera_forms_render_form_wrapper_classes filter, which is one of several reasons this get silly fast. Here is how that might (test this first) work:

    apply_filters( 'shortcode_atts_caldera_forms', function( $out, $pairs, $atts ){
    	global $my_cf_form_class;
    	if ( isset( $atts[ 'classs' ] ) ) {
    		$my_cf_form_class = $atts[ 'class' ];
    		add_filter( 'caldera_forms_render_form_wrapper_classes', function ( $form_wrapper_classes, $form ) {
    			global $my_cf_form_class;
    			$form_wrapper_classes[] = $my_cf_form_class;
    			return $form_wrapper_classes;
    
    		}, 10, 2 );
    	}
    
    }, 10, 3 );
Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Custom CSS class for entire form’ is closed to new replies.