1

HTMLの問い合わせフォームを作ろうとしています。これが私のコードです

                    <p class="success-sending-message">Thank you, your message has been sent!</p>
                    <p class="error-sending-message">There has been an error, please try again.</p>

                    <div id="contact-form">

                        <form action="" id="contactForm" class="styled" method="post">

                            <label for="contact_name">Name</label>
                            <input type="text" tabindex="3" id="contact_name" name="contact_name" value="" class="requiredField textbox" />

                            <label for="contact_email">Email</label>
                            <input type="text" tabindex="4" id="contact_email" name="contact_email" value="" class="requiredField email textbox" />

                            <label for="contact_subject">Subject</label>
                            <input type="text" tabindex="5" id="contact_subject" name="contact_subject" value="" class="requiredField textbox" />

                            <label for="contact_message">Your Message</label>
                            <div class="textarea-wrap">
                                <textarea cols="65" rows="9" tabindex="6" id="contact_message" name="contact_message" class="requiredField"></textarea>
                            </div>

                            <div class="form-section">
                                <button class="button" tabindex="7" type="submit" id="born-submit" name="born-submit">Send Message</button>
                                <input type="hidden" name="submitted" id="submitted" value="true" />
                                <span class="sending-message"><img src="css/images/loading-light.gif" /> Sending...</span>
                            </div>
                        </form>
                    </div>`

そして、これが私の検証スクリプトです

$(window).load(function() {

/* Ajax Contact form validation and submit */
jQuery('form#contactForm').submit(function() {
    jQuery(this).find('.error').remove();
    var hasError = false;
    jQuery(this).find('.requiredField').each(function() {
        if(jQuery.trim(jQuery(this).val()) == '') {
            if (jQuery(this).is('textarea')){
                jQuery(this).parent().addClass('input-error');
            } else {
                jQuery(this).addClass('input-error');
            }
            hasError = true;
        } else if(jQuery(this).hasClass('email')) {
            var emailReg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
            if(!emailReg.test(jQuery.trim(jQuery(this).val()))) {
                jQuery(this).addClass('input-error');
                hasError = true;
            }
        }
    });
    if(!hasError) {
        jQuery(this).find('#born-submit').fadeOut('normal', function() {
            jQuery(this).parent().parent().find('.sending-message').show('normal');
        });
        var formInput = jQuery(this).serialize();
        var contactForm = jQuery(this);
        jQuery.ajax({
            type: "POST",
            url: jQuery(this).attr('action'),
            data: formInput,
            success: function(data){
                contactForm.parent().fadeOut("normal", function() {
                    jQuery(this).prev().prev().show('normal'); // Show success message
                });
            },
            error: function(data){
                contactForm.parent().fadeOut("normal", function() {
                    jQuery(this).prev().show('normal');  // Show error message
                });
            }
        });
    }

    return false;

});

jQuery('.requiredField').blur(function() {
    if(jQuery.trim(jQuery(this).val()) != '' && !jQuery(this).hasClass('email')) {
        if (jQuery(this).is('textarea')){
            jQuery(this).parent().removeClass('input-error');
        } else {
            jQuery(this).removeClass('input-error');
        }
    } else {
        if (jQuery(this).is('textarea')){
            jQuery(this).parent().addClass('input-error');
        } else {
            jQuery(this).addClass('input-error');
        }
    }
});

jQuery('.email').blur(function() {
    emailReg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if(emailReg.test(jQuery.trim(jQuery(this).val())) && jQuery(this).val() != '') {
        jQuery(this).removeClass('input-error');
    } else {
        jQuery(this).addClass('input-error');
    } 
});

jQuery('.requiredField, .email').focus(function(){
    if (jQuery(this).is('textarea')){
        jQuery(this).parent().removeClass('input-error');
    } else {
        jQuery(this).removeClass('input-error');
    }
});

});

私のフォームは正常に機能しています。詳細を入力すると、「ありがとう、メッセージが送信されました!」と表示されます。しかし、このメッセージはどこへ行くのでしょうか。私は process.php ファイルをまったく持っていません。そのメールを自分のメールIDに送信する必要があります。

4

2 に答える 2