Home Forums Front-end Issues Replacing frontend form html


Replacing frontend form html

  • I have a frontend form with some conditional logic. All works fantastic 🙂

    My whole website is based on YOOtheme’s Uikit (frontend framework, sort like Bootstrap) so I need some specific HTML form styling.

    I know there are some useful edits I can make using:

        // Add .form-group & .col-12 fallback on fields wrappers
        $field['wrapper']['class'] .= '';
        // Add .form-control on fields
        $field['class'] .= '';

    But is it possible to completely replace the form html with your own (except the actual fields html) like this?

    <div class="uk-form-label">{FIELD 1 LABEL}</div>
    <div class="uk-input">{FIELD 1 INPUT}</div>

    So I’m looking for a string or shortcode to get the full fields HTML (including data-condition and so on) what I can use within my own html…

    Is this possible?

    If not… ?Is there an option to add a CLASS to the form LABEL? Can’t find it…

  • I’ve tried to play around with:

    function my_acf_render_field( $field ) {
        echo 'test';
    // Apply to all fields.
    add_action('acf/render_field', 'my_acf_render_field', 5);
    // Apply to image fields.
    // add_action('acf/render_field/type=image', 'my_acf_render_field');
    // Apply to fields named "hero_text".
    // add_action('acf/render_field/name=hero_text', 'my_acf_render_field');
    // Apply to field with key "field_123abcf".
    // add_action('acf/render_field/key=field_123abcf', 'my_acf_render_field');

    and your example does have some effect but only adds html before (or after) the regular html…

    NOTE: I can’t just rewrite the whole html output because I have some select fields that are flexible populated.

  • There isn’t any way to replace the HTML structure of acf_form(). All of the JavaScript associated is dependent on what ACF creates. There is also not a way to add classes to individual parts of the field, only to the field wrapper div in PHP.

    There are some choices

    1) Add custom CSS that mimics the CSS used in your framework that targets the parts

    /* label */
    .acf-field .acf-label label {
      /* css for label here */
    /* input or change for other types of fields */
    .acf-field .acf-input .input {
      /* css for input here */

    2) Add custom JavaScript that adds classes to elements

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Replacing frontend form html’ is closed to new replies.