activeFieldClass

export function activeFieldClass() {
  const formEL = document.querySelectorAll('.gfield input, .gfield textarea, .gfield select');


  if (formEL) {

    [].forEach.call(formEL, function (el) {

      //Add Class form control if needed
      if( el.getAttribute('type') !== "hidden" ){
     
          el.closest('.gfield').classList.add('form-group');
    
        if( el.getAttribute('type') === "checkbox"  || el.getAttribute('type') === "radio" ){
          el.classList.add('form-control--transparent');
          el.classList.add('form-check-input');
          el.parentNode.classList.add('form-check');
          
        }else{
          el.classList.add('form-control');
          el.classList.add('form-control--transparent');
          el.closest('.gfield').classList.add('form-floating');
        }
     }
  
    

      el.addEventListener('focus', function (event) {
        event.target.closest('.gfield').classList.add('active');
      });

      el.addEventListener('blur', function (event) {
        // si le champs n'est pas vide , on garde la class, sinon on l'enlève
        if (event.target.value === "") {
          event.target.closest('.gfield').classList.remove('active');
        }
      })
    })

    // floating label boostrap
    const gfield = document.querySelectorAll('.gfield');
    [].forEach.call(gfield, function (el) {
        el.classList.add('form-group');         
    })
  }

}

css

// // for gravity form 
.form-floating {

    .form-label,
    label {
        height: auto !important;
        margin-bottom: 0;
        // font-weight: normal;
    }

    
//     position: relative;

//     .form-control,
//     .form-select {
//         height: $form-floating-height;
//         line-height: $form-floating-line-height;
//     }

//     >label,
//     .gfield_label {
//         position: absolute;
//         top: 0;
//         left: 0;
//         margin-bottom: 0 !important;
//         height: 100%; // allow textareas
//         padding: $form-floating-padding-y $form-floating-padding-x;
//         pointer-events: none;
//         font-weight: 600 !important;
//         transform-origin: 0 0;
//         @include transition($form-floating-transition);
//     }

//     // stylelint-disable no-duplicate-selectors
     .form-control {
            padding: $form-floating-padding-y $form-floating-padding-x;

//         &::placeholder, .gf_placeholder{
//             color: transparent ;
//         }

//         &:focus,
//         &:not(:placeholder-shown) {
//             padding-top: $form-floating-input-padding-t ;
//             padding-bottom: $form-floating-input-padding-b ;
//         }

//         // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
//         &:-webkit-autofill {
//             padding-top: $form-floating-input-padding-t ;
//             padding-bottom: $form-floating-input-padding-b ;
//         }
    }

//     .form-select {
//         padding-top: $form-floating-input-padding-t;
//         padding-bottom: $form-floating-input-padding-b ;
//     }

    .form-control:focus,
    .form-control:not(:placeholder-shown),
    &.active {
        label {
            opacity: $form-floating-label-opacity;
            transform: $form-floating-label-transform;
        }
    }

    // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
    &.active {
        label {
            opacity: $form-floating-label-opacity;
            transform: $form-floating-label-transform;
        }
    }

}

functions

<?php


/**
 * Gravity Forms Bootstrap Styles
 *
 * Applies bootstrap classes to various common field types.
 * Requires Bootstrap to be in use by the theme.
 *
 * Using this function allows use of Gravity Forms default CSS
 * in conjuction with Bootstrap (benefit for fields types such as Address).
 *
 * @see  gform_field_content
 * @link http://www.gravityhelp.com/documentation/page/Gform_field_content
 *
 * @return string Modified field content
 */
// add_filter("gform_field_content", "bootstrap_styles_for_gravityforms_fields", 10, 5);
// function bootstrap_styles_for_gravityforms_fields($content, $field, $value, $lead_id, $form_id)
// {

//     // Currently only applies to most common field types, but could be expanded.

//     if ($field["type"] != 'hidden' && $field["type"] != 'list' && $field["type"] != 'multiselect' && $field["type"] != 'checkbox' && $field["type"] != 'fileupload' && $field["type"] != 'date' && $field["type"] != 'html' && $field["type"] != 'address') {
//         $content = str_replace('class=\'medium', 'class=\'form-control form-control--transparent  medium', $content);
//         $content = str_replace('class=\'small', 'class=\'form-control form-control--transparent small', $content);
//         $content = str_replace('class=\'large', 'class=\'form-control form-control--transparent  large', $content);
//     }

//     if ($field["type"] == 'name' || $field["type"] == 'address') {
//         $content = str_replace('<input ', '<input class=\'form-control form-control--transparent \' ', $content);
//     }

//     if ($field["type"] == 'textarea') {
//         $content = str_replace('class=\'textarea', 'class=\'form-control form-control--transparent  textarea', $content);
//     }
//     if ($field["type"] == 'checkbox') {
//         $content = str_replace('li class=\'', 'li class=\'form-check ', $content);
//         $content = str_replace('<input ', '<input style=\'margin-top:-2px\' ', $content);
//         $content = str_replace('<label ', '<label class=\'form-check-label\' ', $content);
//     }

//     if ($field["type"] == 'radio') {
//         $content = str_replace('li class=\'', 'li class=\'radio ', $content);
//         $content = str_replace('<input ', '<input style=\'margin-left:1px;\' ', $content);
//     }

//     return $content;
// } // End bootstrap_styles_for_gravityforms_fields()


// change button validation form 
add_filter("gform_submit_button", "form_submit_button", 10, 2);
function form_submit_button($button, $form)
{
    $btnText = $form['button']['text'];

    return "<button class='link--open link--open--big' id='gform_submit_button_{$form["id"]}'>
    <span>$btnText</span><svg class='icon'><use xlink:href='#icon-arrow-right'></use></svg></button>";
}





// populate field programme of gravity form 
// ID is pass to the filter : "1"
// don't forget to apply the class "populate_programmes_filterphp' on the field 
add_filter( 'gform_pre_render_1', 'populate_programmes' );
add_filter( 'gform_pre_validation_1', 'populate_programmes' );
add_filter( 'gform_pre_submission_filter_1', 'populate_programmes' );
add_filter( 'gform_admin_pre_render_1', 'populate_programmes' );
function populate_programmes( $form ) {
 
    foreach ( $form['fields'] as &$field ) {
 
        if ( $field->type != 'select' || strpos( $field->cssClass, 'populate_programmes_filterphp' ) === false ) {
            continue;
        }
 
        // you can add additional parameters here to alter the posts that are retrieved
        // more info: http://codex.wordpress.org/Template_Tags/get_posts
        $posts = get_posts( 'post_type=cpt_programme&numberposts=-1&post_status=publish' );
 
        $choices = array();
 
        foreach ( $posts as $post ) {
            $choices[] = array( 'text' => $post->post_title, 'value' => $post->post_title );
        }
 
        // update 'Select a Post' to whatever you'd like the instructive option to be
        $field->placeholder = ' ';
        $field->choices = $choices;
 
    }
 
    return $form;
}