Viewing 1 reply thread
  • Author
    Posts
    • #5995

      I searched but didn’t see anything on this. I have a frontend form that is created by piklist. I can view the form after using the shortcode.

      Is there anyway to add a custom class and attribute to the form fields? I’d rather not go in and use jquery if I can avoid it.

    • #5996
      Marc
      Member

      @friendlyfire3,

      It is possible, and depends on what you want to do.

      To add classes to individual fields:

      
         piklist('field', array(
          'type' => 'text'
          ,'scope' => your_scope
          ,'field' => 'name'
          ,'label' => __('Name', 'namespace')
          ,'required' => true
          ,'template' => 'theme'
          ,'attributes' => array(
            'class' => 'something', // this class is applied directly to the field input
            'wrapper_class' => 'form-group', // this class is applied to the wrapper
            'data-whatever' => 'a data', // this data attribute is applied to the input
          )
        ));
      
      

      If you want to add classes to all your fields, you can use a hook.
      Here’s a function I used to add bootstrap classes to a contact form:

      
      /* function add_form_classes
      
      Adds Bootstrap classes to piklist forms
      */
      function add_form_classes( $field ) {
      	switch ( $field['type'] ) {
      		case 'text':
      		case 'textarea':
      		case 'password':
      		// you might want to add more choices here
      			$field['attributes']['class'][] = 'form-control';
      			break;
      		case 'submit':
      			$field['attributes']['class'][] = 'btn';
      			break;
      	}
      
      	return $field;
      
      }
      add_filter( 'piklist_pre_render_field', 'add_form_classes' );
      

      In that case I only checked the type of field to add the classes, but you have access to all of the field’s options, so you can also do something different depending on the scope and so on.

      There’s a more extensive use of this hook in piklist-demos.php, line 302 – function piklist_demo_pre_render_field()

      Hope this helps!

Viewing 1 reply thread
  • The topic ‘add custom class or attribute to frontend form’ is closed to new replies.