Contact form 7 – How to mark * in red colour for required fields

ok – if this is ok for you – see: https://webers-testseite.de/jak-contact/
( due to maintainance mode of my hoster – page might be not seen today )

snippet for child-theme functions.php and the contakt form 7 Form code is on that page.

snippet:
(The script is necessary because CF7 does not provide a way to select whether an input field is in focus or filled.)

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');

the css ( with your wrapper class ):

.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;
}

the form in this setup:

<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>