Contact form 7 checkbox handling before form submit?

Question

WordPress

There is an interesting problem.
Essence in the following: There is a form from 4 steps, is deduced in a modal window, steps are loaded on ajax. At the first three steps, the user answers questions with checkboxes (the first step is the question: What can you do? options: draw, code, write | other steps by analogy), at the fourth step, he needs to show the result based on the checkboxes he has set (for example: Artist: 4 out of 18, Blogger: 11 out of 18, Programmer: 0 out of 18), so that the user can determine what he is stronger in and place fields with a phone, soap, career guidance select, etc. below. and below the SUBMIT button.
Thus, as I understand it, I need to write a function in function.php that would process the checkboxes by clicking on the button when moving from step 3 to step 4?
Here's what it should look like:

[ШАГ1]

1. Что вы умеете?

[checkbox* checkbox-801 use_label_element "рисовать" "кодить" "писать истории"]

<button>Продолжить</button>

[ШАГ2]

2. Что еще умеете?

[checkbox* checkbox-802 use_label_element "еще рисовать" "еще кодить" " еще писать истории"]

<button>Назад</button> <button>Продолжить</button>

[ШАГ3]

3. Что еще?

[checkbox* checkbox-803 use_label_element "снова рисовать" "снова кодить" "снова писать истории"]

<button>Назад</button> <button>Продолжить c выполнением функции</button>

[ШАГ4]

Ваша профориентация:
[показать результаты подсчета чекбоксов]

Исходя из них вы можете зарегистрироваться
[select* menu-508 include_blank "Художник" "Кодер" "Блогер"]
[text your-name]
[email your-email]

<button>Назад</button> <button submit>ОТПРАВИТЬ</button>

Checkboxes are processed as follows: from the first checkbox-801 array: 2,4,11 - add +1 to the artist variable, and 1,3,6 +1 to the encoder variable
from the second checkbox-802 array: 1,2,3 - +1 to the artist, and 1,3,4 + 1 to the blogger, etc. the main thing is that one checkbox can give +1 to both a blogger and an artist.
The output of the results with a simple visually understandable type diagram:

<h1>Художник</h1>
<div style="width:100%; background: #000">
   <div style="width: calc(<подставить переменную от художника>/18*100)%; background: #ff0000">
   </div>
</div>
<h1>Кодер</h1>
<div style="width:100%; background: #000">
   <div style="width: calc(<подставить переменную от кодера>/18*100)%; background: #ff0000">
   </div>
</div>
<h1>Блогер</h1>
<div style="width:100%; background: #000">
   <div style="width: calc(<подставить переменную от блогера>/18*100)%; background: #ff0000">
   </div>
</div>

Is this task feasible with just the contact form 7 plugin? Is it possible to execute the count function BEFORE submitting the form?
Need help in creating the function code and attaching it to the transition button from the 3rd step to the 4th. Of the standard wpcf7 events that can run a script and process checkboxes, there is only wpcf7mailsent, but it only fires after pressing the submit button

Answer 1

Isn't it easier to handle checkboxes on the front? and send them to an arbitrary script with Ajax?