<p>WordPressのプラグインである、Contact Form 7に送信確認画面を追加してみます。<br></p><h2 id="h9bbb0bca62">開発環境</h2><p>下記の環境で動作を確認しました。</p><pre><code>WordPress 5.2.2
LocalbyFlywheel 3.0.4
Contact Form 7 5.1.4</code></pre><p><br></p><h2 id="hdd1091c01b">プラグインのインストール</h2><p>デフォルトではサポートしていない機能のため、プラグインの追加が必要になります。<br>WordPressの管理画面から 「Contact Form 7 add confirm」 を検索してインストールし、<br>有効化してください。<br></p><h2 id="hc2b43e3a6f">テンプレートに専用のフォームタグを埋め込む</h2><p>インストール後、管理画面からContactForm7のフォーム編集画面に移動すると、<br>「確認ボタン」「戻って編集ボタン」が追加されています。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:53c80905-842b-4ee9-a157-ed176bb46df7/service/tyai-a-develop/media/cf-confirm.png" alt=""><br>下記のコードを設置したい場所にペーストしてください。<br></p><h2 id="h23b1982542">送信確認画面</h2><p>送信確認画面に移動します。<br><code>[confirm]</code>を設置した場合は、必ず<code>[submit]</code>もセットで設置してください。<br>設置しないと入力内容確認画面で止まってしまい、送信ができなくなります。<br><code>[confirm]</code>を設置せず、<code>[submit]</code>のみ設置している場合は、確認画面を挟まずに送信を行います。</p><pre><code>[confirm "入力内容を確認する"]</code></pre><p><br></p><h2 id="h76cba3d795">送信</h2><p>入力した内容で送信を行います。</p><pre><code>[submit "送信する"]</code></pre><p><br></p><h2 id="he3cb321a5c">入力画面に戻る</h2><p>送信確認画面でのみ表示されます。<br>入力した情報を維持したまま入力画面に戻れます。</p><pre><code>[back "情報を修正する"]</code></pre><p><br></p><h2 id="hb7f845605f">画面ごとに要素の表示を切り替える</h2><p>このプラグインをインストールすると、<br>入力・確認・送信画面でのみ特定の要素を表示することができるようになります。<br>下記のクラスを追加してください。</p><pre><code>入力画面のみで表示：　.wpcf7c-elm-step1
確認画面のみで表示：　.wpcf7c-elm-step2
完了画面のみで表示：　.wpcf7c-elm-step3</code></pre><p><br>「Contact Form 7 add confirm」が有効かつ、フォーム内でのみ利用可能です。<br>固定ページなどに埋め込みしている場合、フォーム部分以外（コンテンツ部分）に上記クラスを追記しても動作しないので注意してください。</p>

Contact Form 7 に送信確認画面を追加する

<h2 id="h5cc2fd1f1e">MailHogとはなにか</h2><p>ローカル開発環境上でメールの送受信ができるようになります。<br>入力したメールアドレスに実際に送信はされず、<br>ローカル上でメールが受け渡しされます。<br></p><h3 id="h33495751c6">導入するメリット</h3><p>クライアントにメールが送信される事故を防ぐほか、<br>編集の都度サーバーにアップロードする手間が省けるため、<br>デバッグ作業の効率化が期待できます。<br></p><h3 id="h99f256a9ec">似たようなソフトはあるのか</h3><p>Ruby製の<a href="https://mailcatcher.me/" target="_blank" rel="noopener noreferrer">Mailcatacher</a>など、似たようなソフトはいくつかあります。<br>WordPressのローカル開発環境が構築できる <a href="https://localwp.com/" target="_blank" rel="noopener noreferrer">Local</a> に同梱されており、<br>とても使いやすかったのでこのソフトを選びました。<br></p><h2 id="h0c57c4244c">作業環境</h2><p>今回は<code>macOS Mojave 10.14.6 </code>で動作を確認しました。<br>ビルトインのapacheで使用できるように設定していきますが、<br>MAMPやXAMPPなどでも同様の手順で設定が可能かと思われます。<br></p><h2 id="hdbf4e8e455">MailHogをインストールする</h2><p>以下のコマンドを実行してMailHogをインストールします。</p><pre><code>$ brew install mailhog</code></pre><p><br>以下のコマンドを実行して、MacOS起動時にMailHogが自動的に起動するようにします。</p><pre><code>$ brew services start mailhog</code></pre><p><br>ここまで完了したら <a href="http://localhost:8025/" target="_blank" rel="noopener noreferrer">http://localhost:8025/</a> をブラウザで開いてください。<br>Gmail風のページが表示されればインストールは完了しています。<br><br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:53c80905-842b-4ee9-a157-ed176bb46df7/service/tyai-a-develop/media/mailhog-empty.png" alt=""><br></p><h2 id="hb453b15b64">mhsendmailをインストールする</h2><p>インストールすることで、<code>sendmail</code>の代替として動作し、<br>SMTPポート<code>1025</code>を使用して電子メールが送信されます。<br><strong>必ず必要なので一緒にインストールしてください。</strong><br><br>GOのインストールが必要なので、以下のコマンドを実行してインストールします。</p><pre><code>$ brew install go</code></pre><p><br>続いて以下のコマンドを実行して<code>mhsendmail</code>をインストールします。</p><pre><code>$ go get github.com/mailhog/mhsendmail</code></pre><p><br></p><h3 id="h74e373122c">追記 22/08/22</h3><p>Go1.16 からは以下のようなコマンドを実行してください。</p><pre><code>$ go install github.com/mailhog/mhsendmail@latest</code></pre><p><br>成功すれば、<code>~/go/bin/</code>に<code>mhsendmail</code>というファイルが追加されているはずです。<br></p><h2 id="h0be038064f">php.ini を編集する</h2><p>続いて<code>php.iniを</code>編集します。<br><code>sendmail_path</code>を以下のように書き換えてください。保存場所は好きな場所で問題ありません。</p><pre><code>sendmail_path = "/Users/{ユーザ名}/go/bin/mhsendmail"</code></pre><p><br>以上でインストール作業は終了です。<br></p><h2 id="hd5344867c3">テストメールを送信する</h2><p>実際にメールを送信してみます。<br><code>mail.php</code> など適当な名前をつけ、お好きな場所に設置して実行してください。</p><pre><code>&lt;?php
&nbsp;&nbsp;var_dump(
&nbsp;&nbsp;&nbsp;&nbsp;mail(
&nbsp;&nbsp;&nbsp;&nbsp;'to@example.com',
&nbsp;&nbsp;&nbsp;&nbsp;'TEST MAIL',
&nbsp;&nbsp;&nbsp;&nbsp;'This is test mail',
&nbsp;&nbsp;&nbsp;&nbsp;'From: from@example.com'
&nbsp;&nbsp;&nbsp;&nbsp;)
&nbsp;&nbsp;);
?&gt;</code></pre><p><br>実行後 <a href="http://localhost:8025/" target="_blank" rel="noopener noreferrer">http://localhost:8025/&nbsp;</a> を開いてみて、<br>メールが1件追加されていれば動作確認は終了です。<br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:53c80905-842b-4ee9-a157-ed176bb46df7/service/tyai-a-develop/media/mailhog-download.png" alt=""></p>

<ul><li><a href="https://blog.mailtrap.io/mailhog-explained/" target="_blank" rel="noopener noreferrer">Mailhog: How to Use It and Why | Mailtrap Blog</a></li><li><a href="https://gyun.hatenablog.com/entry/2020/03/04/234114" target="_blank" rel="noopener noreferrer">MailHog入れるときはmhsendmailも忘れずに</a></li></ul>

21件目 ~ 30件目の記事

カテゴリ