development_creative

この記事は1年以上経過しています。

Contact form 7 自作でフォームを作るときの注意点

リダイレクト処理ができない・・・

contact form 7はくそほど有名で、ベッタベタなプラグインですね。
しかしながら、デフォルトではサンキュー画面とかに遷移しないんですよ〜。

そこで今回は、デザインカスタムしたフォームの裏側の処理を、
contact form7で作るというなんともニッチな案件・・・

最初から、全部うまくいくとは思っていなかったが、最後のリダイレクト処理で徹底的に詰まった!
チキショウ!!!

ちなみにリダイレクトの処理のコードはこちら。(これは動いたよ)

<script>
    document.addEventListener('wpcf7mailsent', function(event) {
        location = '/redirect-saki-no-url';
    }, false);
</script>

当然のごとくコードの後半・・要素の読み込んだあと・・(/body前が無難)に記述・・・。
普通なら動くんですが・・・。なんでじゃ!!!!!

name値やvalue値は全部合わせてるので、理屈的には問題ないと思っていたのに・・。
以下、解決までに試したことを記述するぜ!

<?php wp_head(); ?>と、<?php wp_footer(); ?>を記述

はい。検索すると、よくよく出てくるのが、こちら。
自作のテンプレートを作るときに注意なのが、この2つ。

<?php wp_head(); ?>
<?php wp_footer(); ?>


headerと、footerに記述します。

自作でWordpressのテンプレートごと作るとき、
キモいコードや記述は徹底的に省きたいと思っているので、
筆者は、あんまり考えずに、マッハ5でこの2つを削除しました。(sudo -D kill me eternity.)

キモいとかって判断基準が、ほんとディベロッパーとしてどうなんでしょうね。
会社に謝らないとね。

上記2つは超絶短いコードなんですけど、取得してくる情報は大切なものも多い・・・
これがないと、contact form 7は動かないっす。

しかし今回はこれで、解決せず!!!!! 草ぁああ

Contact form7の”js”が読み込めてない?

contact form7はjsを読み込んで、ajaxで動いている感じみたいです。
なんで、外部からのscriptを読まねばいけないんですが、
どうやらjsがなくても中途半端に動くらしい・・・笑 ほんまなんそれ。

メールは送れるが、送信ステータスのメッセージとか、スピナーが表示されなかった
なんというか、70点?

おそらく、<?php wp_footer(); ?>の記述で呼び出されているっぽいが、
これでも症状が改善せず・・。

原因はこれ!!!!

案件が露出するのは良くないので、フォームの中身は割愛してますよ!もちろん!
なんと、htmlの構造問題!!! 知るか!!ボケぇ!

<div role="form" class="wpcf7 container" id="wpcf7-f<?php echo esc_html($CONTACTFORM7_ID); ?>-o1" lang="ja" dir="ltr">

    <!-- <div class="container form-area"> こいつや!!!-->

        <div class="screen-reader-response">
            <p role="status" aria-live="polite" aria-atomic="true"></p>
            <ul></ul>
        </div>

        <form action="/#wpcf7-f<?php echo esc_html($CONTACTFORM7_ID); ?>-o1" id="form_box" method="post" class="wpcf7-form init" novalidate="novalidate" data-status="init">
            <div style="display:none;">
                <input type="hidden" name="_wpcf7" value="<?php echo esc_html($CONTACTFORM7_ID); ?>" />
                <input type="hidden" name="_wpcf7_version" value="5.6.3" />
                <input type="hidden" name="_wpcf7_locale" value="ja" />
                <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f<?php echo esc_html($CONTACTFORM7_ID); ?>-o1" />
                <input type="hidden" name="_wpcf7_container_post" value="0" />
                <input type="hidden" name="_wpcf7_posted_data_hash" value="" />
            </div>
            
            <div class="wpcf7-response-output" aria-hidden="true"></div>
            <input type="submit" value="〜〜〜〜〜" class="nxbtn wpcf7-form-control has-spinner wpcf7-submit" style="display:block;" />  
        </form>
    <!-- </div> このデェエエェェエィブが邪魔やったんや!!!!!-->
</div>

デフォルトソースをカスタムして、階層が変わったことが問題だったようです・・・。

フタを開けたら、IQ2ぐらいの超絶初歩的なミス・・・・。僕はチンパンやな。
失った時間は戻らないので、八つ当たりで記事を書きました。。。

まじで、自分が全知全能ならプラグインとか1個も使わないで、
使用していないコードなんてないような、クリーンなサイトを作りたいもんですね。

ほな。

Related ariticle

関連記事

TOP