Trying to implement a multi step form on contact form 7

So, basically, I found this jQuery code but I'm not quite sure how it works and how to implement it in my WordPress site. I've had some experience with coding but can't really get on top of this can anybody help?

This is the HTML code:

    <div class="steps" data-step="1">
  <h3>Title here!</h3>
  
  <div class="steps__number">
    <span class="steps__number--single" data-active>1</span>
    <span class="steps__number--single">2</span>
    <span class="steps__number--single">3</span>
  </div>
  
  <p class="mb-4"><strong>What do you need?</strong></p>
  [checkbox* iwant use_label_element "Lorem" "Ipsum"]

  <div class="steps__buttons-wrapper">
    <a class="clicker button-1 next">Next</a>
  </div>

</div>

<div class="steps" data-step="2">
<h3>Next title here</h3>

<div class="steps__number">
  <span class="steps__number--single" data-active>1</span>
  <span class="steps__number--single" data-active>2</span>
  <span class="steps__number--single">3</span>
</div>
<p class="mb-4"><strong>Whad do you do?</strong></p>
<label>
   [text company placeholder "Company name" ]
</label>

<label>
   [text works placeholder "Industry"] 
</label>

<label>
   [text web placeholder "Website (optional)"] 
</label>

<div class="steps__buttons-wrapper">
   <a class="clicker button-3 prev">Prev</a>
   <a class="clicker button-1 next">Next</a>
</div>

</div>

<div class="steps" data-step="3">
<h3>Custom Title</h3>
<div class="steps__number">
  <span class="steps__number--single" data-active>1</span>
  <span class="steps__number--single" data-active>2</span>
  <span class="steps__number--single" data-active>3</span>
</div>
<label>
   [text nameforname placeholder "Name" ]
</label>

<label>
   [text email placeholder "Email Address"] 
</label>

<label>
   [text tel placeholder "Phone number (optional)"] 
</label>

<label>
   [text addinfo placeholder "Add something more!"] 
</label>

[acceptance acceptance-170] I Accept privacy policy [/acceptance]

<div class="steps__buttons-wrapper">
  <a class="clicker button-3 prev">Prev</a>
  [submit class:button-1 "Send"]
</div>

</div>

<div class="steps" data-step="4">
<div class="mail-ok response">
  <h3>Success</h3>
  <p>Success</p>

  <div class="steps__buttons-wrapper">
     <a class="button-1 next">Close</a>
  </div>
</div>

  <div class="mail-invalid response">
  <h3>Invalid data</h3>
  <p>Custom text</p>
  <div class="steps__buttons-wrapper">
     <a class="button-3 prev">Prev</a>
  </div>
</div>

</div>

And this is the jQuery part (of which I'm not sure what is does and where to put it in my site).

    <script>
$(document).ready(function () {
  //just remember to use valid classes
  $('.popup-trigger').click(function () {
    $('.popup').fadeIn(500);
  })

  $(document).on('keyup click', function (e) {
    var close = $('.popup .close');
     //if escape clicked
    if (e.keyCode === 27) {
      $('.popup').fadeOut();
    } else if (close.is(e.target)) {
      $('.popup').fadeOut(500);
    }
  })

  var j = 1;
  $('.popup__wrapper--content .steps').each(function () {
    if ($(this).data('step') !== j) {
      $(this).fadeOut(500);
    }
  })

  $('.popup .wpcf7-submit').click(function () {
    j++;
    console.log(j);
    var par = $(this).parents('.popup__wrapper--content .steps');
    if (par.data('step') !== j) {
      par.fadeOut(500);
      $('.popup__wrapper [data-step="' + j + '"]').delay(500).fadeIn(500);
    }
  })

  $('.popup__wrapper .clicker').click(function () {
    j++;
    console.log(j);

    var par = $(this).parents('.popup__wrapper--content .steps');

    if (par.data('step') == 4 && $(this).hasClass('next')) {
      $('.popup').fadeOut(500);
    } else if ($(this).hasClass('next')) {
      if (par.data('step') !== j) {
        j == 3;
        par.fadeOut(500);
        $('.popup__wrapper [data-step="' + j + '"]').delay(500).fadeIn(500);
      }
    } else if (par.data('step') == 4 && $(this).hasClass('prev')) {
      j = j - 2;
      par.fadeOut(500);
      $('.popup__wrapper [data-step="' + j + '"]').delay(500).fadeIn(500);
    } else if ($(this).hasClass('prev')) {
      j = j - 2;
      par.fadeOut(500);
      $('.popup__wrapper [data-step="' + j + '"]').delay(500).fadeIn(500);
    } else if (par.data('step') == 4) {
      $('.popup').fadeOut(500);
    }

    if ($('.popup__wrapper [data-step="1"]').is(':visible') || $('.popup__wrapper [data-step="2"]').is(':visible')) {
      $('.popup .wpcf7-response-output').hide();
    }
  })
})</script>