jak contact – Webers Testseite

.form-wrapper {
  position : relative !important;
}

.form-wrapper .placeholder {
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0.5;
  transition: opacity 1s ease;
  pointer-events: none;
}

.form-wrapper .asterisk {
  color: red !important;
}

.wpcf7-form-control-wrap.active + .placeholder { 
  opacity: 0 !important;
}

function class_on_active_form_fields(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
  (function($) {     
    $('.wpcf7-form-control').each(function() {
      $(this).on('focus', function() {
        $(this).parent().addClass('active');
      });
      $(this).on('blur', function() {
        if ($(this).val().length == 0) {
          $(this).parent().removeClass('active');
        }
      });
    });
  })(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'class_on_active_form_fields');

<div class="form-wrapper">[text* first-name placeholder ""]<span class="placeholder">First name <span class="asterisk">*</span></span></div>
<div class="form-wrapper">[text* last-name placeholder ""]<span class="placeholder">Last name <span class="asterisk">*</span></span></div>
<div class="form-wrapper">[email* your-email placeholder " "]<span class="placeholder">E-Mail <span class="asterisk">*</span></span></div>
<div class="form-wrapper">[textarea* textarea-716 placeholder " "]<span class="placeholder">Placeholder <span class="asterisk">*</span></span></div>

<div class="form-wrapper">[submit "Send"]</div>

Kontakt

Telefon

E-Mail