I want to add a class to the whole contact form on submit. i want to hide the submit button while the form is checking the data and show an animation. after that i want to hide the animation and show the submit button, but in another color (green).

I started to hack the JS file of the contact form but i think it is better to do it with a parameter in theme/functions.php

add_action( 'wpcf7_before_send_mail', 'submitbutton_action' );
function submitbutton_action( $submit ){
    $form.find('input[type=submit]').css({ display:'none' });
}

Maybe something like this but it won’t work.

Anyone tried something similar?

the two functions in the contact form 7 script:

hide submit after hit it:

$.fn.wpcf7InitForm = function() {
    this.ajaxForm({
        beforeSubmit: function(arr, $form, options) {
            $form.wpcf7ClearResponseOutput();
            $form.find('[aria-invalid]').attr('aria-invalid', 'false');
            $form.find('img.ajax-loader').css({ visibility: 'visible' });
            $form.find('input[type=submit]').css({ visibility: 'hidden' });
            return true;
        },
        beforeSerialize: function($form, options) {
            $form.find('[placeholder].placeheld').each(function(i, n) {
                $(n).val('');
            });
            return true;
        },
        data: { '_wpcf7_is_ajax_call': 1 },
        dataType: 'json',
        success: $.wpcf7AjaxSuccess,
        error: function(xhr, status, error, $form) {
            var e = $('<div class="ajax-error"></div>').text(error.message);
            $form.after(e);
        }
    });

show submit button after check the form:

$.fn.wpcf7ClearResponseOutput = function() {
    return this.each(function() {
        $(this).find('div.wpcf7-response-output').hide().empty().removeClass('wpcf7-mail-sent-ok wpcf7-mail-sent-ng wpcf7-validation-errors wpcf7-spam-blocked').removeAttr('role');
        $(this).find('span.wpcf7-not-valid-tip').remove();
        $(this).find('img.ajax-loader').css({ visibility: 'hidden' });
        $(this).find('input[type=submit]').css({ visibility: 'visible' });
    });
};

Read more here: WordPress - contact form 7: add class to form when submit, and delete when form was checked/send


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , , , , ,

Wordpress related questions and answers: