0

ワードプレスのお問い合わせフォームを作りました。うまく機能しているフォーム。私が抱えている問題は、私の連絡先フォームが非表示の div にあることです。メールアイコンをクリックすると上にスライドします。

そのため、連絡フォームを送信すると、ありがとうページにリダイレクトされます。この機能を無効にして、同じページにありがとうメッセージを表示する方法がわかりません。

何か案は ？私は他の質問を読んでいますが、私には役に立たないようです。コードの一部。

     <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
     <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

 <?php if($email){ ?>
     <p><strong>Message succesfully sent. I'll reply as soon as I can</strong></p>
     <?php } else { if($error) { ?>
     <p><strong>Your messange hasn't been sent</strong><p>
     <?php echo $error; ?>
     <?php } else { the_content(); } ?>

             <section class="loginform">
                <div class="contactform">
                <form action="<?php the_permalink(); ?>" id="contact_me" method="post">
                    <input type="hidden" name="sent" id="sent" value="1" />
                    <ul>
                        <li>
                            <input type="text" name="your_name" id="your_name" value="<?php echo $_POST[your_name];?>" placeholder="Name" required>
                        </li>
                        <li>
                            <input type="text" name="your_email" id="your_email" value="<?php echo $_POST[your_email];?>" placeholder="Email" required>
                        </li>
                        <li>
                            <input type="text" name="your_subject" id="your_subject" value="<?php echo $_POST[your_subject];?>" placeholder="Subject" required>
                        </li>
                        <li>
                            <textarea name="your_message" id="your_message"><?php echo stripslashes($_POST[your_message]); ?></textarea>
                        </li>
                        <li>
                            <input type="submit" name = "send" value = "Send email" />
                        </li>
                    </ul>
                </div>
                </form>
                </section>
     <?php } ?>

     <?php endwhile; ?>
4

1 に答える 1

2

これは、ajax を使用して最もよく解決できます。このためのプラグインを作成しましたか？

あなたがすべき ：）

プラグイン ファイルで、新しい ajax フックを登録します。

// add ajax request
add_action( 'wp_ajax_send_form', 'sendForm' );
// add this so non-admins can use it
add_action( 'wp_ajax_nopriv_send_form', 'sendForm' );

次に、関数 sendForm() を作成します。

<?php
function sendForm() {

    //validation logic here, get data from $_POST

    // send mail logic here

    if($email){
        echo '<p><strong>Message succesfully sent. I will reply as soon as I can</strong></p>';
     } else { if($error) { 
         echo '<p><strong>Your messange has not been sent</strong><p>'.$error;
     } else { the_content();

    // adding die(); is necessary with wp ajax
    die();

}

フロントエンド ファイルで、すべてのフォーム要素を削除するか、入力フィールドがクリックされたときに false を返すようにします。jQuery を no.Conflict() モードで使用していると仮定します。<div id="answer"></div>レスポンスを表示したい場所に a を追加します。

   <script>
        jQuery('#contact_me input').click( function() {

        // get form data here
        var message = jQuery('#your_message').val();
        // ...and so on

        jQuery.post(ajaxurl, {   
                    action:     "send_form",
                    message: message,
                    //...and so on

                }, function (response) {

                   jQuery('#answer').html(response);

                }); 
        });
</script>

これにより、ajax を介して php 関数 sendForm() が呼び出され、それが実行され、エコーされたメッセージが div に ID #response で表示されます。それはあなたが必要だったのですか？

さらに説明を求めます。

よろしくサイモン

于 2013-03-10T22:40:23.580 に答える