Mimic HTML structure with Advanced Form

  • Resolved floris246

    (@floris246)


    5 years, 8 months ago

    How would I be able to add a CSS class to the input element?

    Maybe there is a way to add it using this filter? https://advancedforms.github.io/filters/af-form-field_attributes/

    The reason I ask is because the Advanced Form has to mimic this HTML structure:
    <div class=”trailer gutters”>
    <label class=”control-label” for=”first-name”>Voornaam:</label>
    <input data-validation=”isRequired” id=”first-name” name=”first_name” type=”text” class=”control-input”>
    <span class=”message message–error is-hidden”></span>
    </div>

    So a class ‘control-input’ needs to be added to the input element. There needs to be a wrapper element with classes. And a span with classes before the wrapper closing tag.

    If this can be done, I am very happy using this plugin for now on. Thanks.

    • This topic was modified 5 years, 8 months ago by floris246.
Viewing 1 replies (of 1 total)
  • Plugin Author fabianlindfors

    (@fabianlindfors)

    5 years, 8 months ago

    Hi! Too some degree this can be done but I’m not sure if it suits your needs.

    The problem is that the input element (and all other fields) are provided by ACF and as such are also rendered by ACF. The good part is that ACF allows some degree of customization. Here’s how to add a class to an input element for example:

    
function add_text_field_class( $field ) {
  $field['class'] = 'CLASS';
  return $field;
}
add_filter( 'acf/prepare_field/name=FIELD_NAME', 'add_text_field_class', 10, 1 );

    My plugin also adds a wrapper around each field which you can customize the class on. The filter for doing this is called af/form/field_attributes and is documented here: https://advancedforms.github.io/filters/af-form-field_attributes/.

    Hope this helps!

Viewing 1 replies (of 1 total)
  • The topic ‘Mimic HTML structure with Advanced Form’ is closed to new replies.