JSFiddle - React, Tailwind, and code Playground

by Gleb Leskov

HTML

<form name="consultation" action="/price/" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="sessid" id="sessid_1" value="db1615ab9296a731b65569066bc75f29">
    <input type="hidden" name="WEB_FORM_ID" value="1">
    <input type="hidden" name="lang" value="ru">
    <input type="hidden" name="form_hidden_101" value="utm_campaign_source">
    <input type="hidden" name="form_hidden_106" value="utm_campaign_name">
    <input type="hidden" name="form_hidden_107" value="utm_campaign_medium">
    <input type="hidden" name="form_hidden_108" value="utm_campaign_content">
    <input type="hidden" name="form_hidden_109" value="utm_campaign_term">
    <div class="form-description">
        <h4 class="title">Есть вопросы?</h4>
        <p class="desc">Закажите бесплатную консультацию!</p>
    </div>
    <div class="form-messages">
    </div>
    <div class="form-element">
        <input type="text" placeholder="Представьтесь, пожалуйста" name="form_text_1" value="" size="0">
    </div>
    <div class="form-element">
        <input type="text" placeholder="Ваш номер телефона" name="form_text_2" value="" size="0">
    </div>
    <div class="form-сonsent">
        <input type="checkbox" data-gtm-val="consent" checked="" id="form_checkbox_consent_277" name="form_checkbox_consent[]" value="277">
        <label for="form_checkbox_consent_277"><span class="">&nbsp;Согласие на обработку персональных данных</span></label>
        <div class="download-file pdf">
            <a href="/upload/Consent_to_personal_data_processing_ADV.pdf" target="_blank">Ознакомиться (.pdf)</a>
        </div>
    </div>
    <div class="form-element hcap">
        <input type="text" class="inputtext" name="form_text_90" value="" size="0">
    </div>
    <div class="form-submit">
        <input type="submit" name="web_form_submit" value="Задать вопрос" class="button red">
    </div>
</form>

JavaScript

$('.form form').submit(function(e) {
    if(!! window.FormData){
        e.preventDefault();
        $form = $(this);
        $submitButton = $form.find('[name="web_form_submit"]');
        $submitButton.addClass('proceed').prop('disabled', true);
        var formData = new FormData(this);
        formData.append('web_form_submit', $submitButton.val());
        $.ajax( {
            url: 'https://www.advantika.ru/_formHandler.php',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            cache: false,
            success: function(response){
                $response = $(response);
                if($response.find('.form-form-note').length > 0){
                    if('order' == $form.attr('name')){
                        var checkedServices = [];
                        $form
                        .find('.form-services')
                        .find('[type=checkbox]')
                        .each(function(){
                            if(true === $(this).is( ':checked' )){
                                checkedServices.push($(this).attr('data-gtm-val'));
                            }
                        });
                        var gtmEventLabel = document.URL + '|' + checkedServices.join('.') + '|';
                    }else{
                        var gtmEventLabel = document.URL;
                    }
                    dataLayer.push({
                        'event': 'adv.event',
                        'eventCategory': 'formSubmit',
                        'eventAction': $form.attr('name'),
                        'eventLabel': gtmEventLabel,
                        'eventValue': 0,
                        'eventNonInteraction': false
                    });
                    $form.find('.form-element input').val('');
                    $form.find('.form-element textarea').val('');
                    $form.find('input[type=checkbox]').prop('checked', false);
     ...