Zenn
💬

[WP]Contact Form7でPHPのコードを使用する方法

2024/03/03に公開
PHP
JavaScript
contactform7
wp
多段階計算
tech

PHPで書いてあるウェブフォームをContact Form7に置き換えるときに既存のコードを活かして実装する方法を考えた。

対象となる人

・　Contact Form7でphpのコードを使用したい人

フォーム準備

簡単にフォームの方を作成する。

Contact Form7

Contact Form7の新規作成でコンタクトフォームを新規作成する。
中身は何も書かなくていい（今後書くこともない）

index.php

動作確認のためindex.phpで作成
コンタクトフォームのショートコードを挿入するだけ

index.php
<body>
    <main>
        <?php echo do_shortcode('[contact-form-7 id="3847473" title="コンタクトフォーム 1"]'); ?>
    </main>
</body>

cf7-component.php

Componentファイルとして「cf7-component.php」をindex.phpと同じ階層に新しく作成。
そこににHTML形式でフォームを書いた。※formタグはContact Form7が自動で作成するためformタグは使わない

cf7-component.php
<div class="container">
    <div class="content">
        <h2 class="content__h2">名前</h2>
        <input type="text" name="your_name" class="content__input" value="">
    </div>
    <div class="content">
        <h2 class="content__h2">メールアドレス</h2>
        <input type="email" name="email" class="content__input" value="">
    </div>
    <div class="content">
        <h2 class="content__h2">電話番号</h2>
        <input type="tel" name="tel" class="content__input" value="">
    </div>
    <button type="submit" name="submit" class="submit">送信</button>
</div>

フォーム表示

cf7-component.phpに書いたフォームを表示するためのコードを記述していく。
index.phpの最下部にJSを追加する。

index.php
<script>
    const cf7 = document.querySelector('.wpcf7-form')
    const render = (html) => cf7.innerHTML = html

    const renderCf7Component = () => {
        const component = `<?php require('cf7-component.php') ?>`
        render(component)
    }
    renderCf7Component()
</script>
  1. 処理の流れとしてはContact Form 7が自動で作成するformタグのクラス名（wpcf7-form）のタグを取得。
  2. phpのrequireで他のページのphpを読み込む
  3. jsのinnerHTMLで１で取得したタグに埋め込みレンダリングする

そうするとこのようにフォームが表示されるようになる。

PHPコードを追加してみる

ここでようやく本題。実際にPHPのコードを追加して動作を確認してみる。今回はフォームで使用するであろうセッションで試してみる。

初めにindex.phpの最上部に以下のコードを挿入

index.php
<?php
$_SESSION["your_name"] = "なまえ";
$_SESSION["email"] = "test@gmail.com";
$_SESSION["tel"] = "09012345678";
?>

cf7-component.phpにセッションの中身を表示する処理を加える。

cf7-component.php
<div class="container">
    <div class="content">
        <h2 class="content__h2">名前</h2>
        <input type="text" name="your_name" class="content__input" value="<?php echo $_SESSION["your_name"] ? $_SESSION["your_name"] : null  ?>">
    </div>
    <div class="content">
        <h2 class="content__h2">メールアドレス</h2>
        <input type="email" name="email" class="content__input" value="<?php echo $_SESSION["email"] ? $_SESSION["email"] : null  ?>">
    </div>
    <div class="content">
        <h2 class="content__h2">電話番号</h2>
        <input type="tel" name="tel" class="content__input" value="<?php echo $_SESSION["tel"] ? $_SESSION["tel"] : null  ?>">
    </div>
    <button type="submit" name="submit" class="submit">送信</button>
</div>

表示を確認してみる

解説

WEBページが表示されるときはサーバーサイドの言語→フロントの言語の順番に処理されます。
今回で言えば、php→JSの順番に処理されます。

index.php
const component = `<?php require('cf7-component.php') ?>`

この処理では、php→JSへの順序に着目しています。
最初にPHPコードが実行され、その中でrequireの処理が行われます。その後、cf7-component.php内のPHP処理が実行され、セッションに値を設定するなどの操作が行われます。

PHPの処理が終わった後に、JSの処理が行われます。このため、JS内でrequireを使用してPHPファイルを取得すると、既にPHPによって実行され、値が埋め込まれた状態のHTMLを取得できます。

cf7-component.php内にあるフォームに関するセッションの処理が既に完了している状態を、JavaScriptを使用して取得できるため、Contact Form7でもPHPコードを使用することが可能になるというわけです。

逆にJS→phpの処理は行うことはできないので注意が必要です。

↓JSで設定した値をPHPのセッションに入れようとしたところエラーが発生する

JSで動作を追加したい場合

render関数の下にDOM操作処理をいれる。
簡単に名前が入力されなかったらe.preventDefaultで処理を止めてみる

index.php
    const renderCf7Component = () => {
        const component = `<?php require('cf7-component.php') ?>`
        render(component)
        // ここからDOM操作を記入
        const your_name = document.querySelector('#your_name')
        const submit = document.querySelector('#submit')

        submit?.addEventListener('click', (e) => {
            if(!your_name) {
                e.preventDefault()
            }
        })
        // ここまでDOM操作を記入
    }

GitHub

今回のコードの全文はこちらに入れておきます。
https://github.com/okada-taisho/php-cf7

Discussion