2019年2月22日こんにちは!函館在住のフリーランスWebエンジニアのシダユウ(@araShidayuuKi)です。今回は購入したテンプレートテーマのコンタクトフォーム(form.run)の実装の方法について、解説します!この記事を読んでいるということは、『購入したテンプレートテーマのコンタクトフォームを上手く設定できない...』と悩んでいるのではないでしょうか?それもそのはずで、テンプレートテーマをそのまま実装しようとしても上手くいきません。私も実装しようとして、丸半日ほど原因がわからず苦悩しました。2019年1月30日ですがご安心ください!悩んだ挙句にいろいろと試した末、解決策を見つけることができました!ちなみに購入したテンプレートのままformrunを実装しようとすると連携できませんでした。Templateというテーマです。※同じテーマでなくとも参考になると思いますので、ぜひ読み進めてみてください。実際に私が体験した例として、送信ボタンは押せるし、送信しました!というメッセージ(英文の)が出るのに、form.runに通知がこないというものでした。何度送信しても通知が来ないため、ずっと頭を抱えていました。原因として考えられるものを一つずつ確認していったところ、行き着いた先がコンタクトフォームの機能を実装するために作られたJavaScriptファイルでした。今回使用したテンプレートテーマには「contact.js」というファイルが作成されており、index.htmlのform要素に記述のあるid要素が盛り込まれていました。そのため、form.runを優先するのではなく、contact.jsの処理を優先したために機能しなかったのだ!と考えられます。jsファイルを疑ったかというと、formタグ内に記述のあるid要素を全て削除した結果、form.runの機能が使用できるようになったからです。私のように、id要素を全て削除すればform.runの実装は可能になりますが、contact.jsをindex.html側で読み込まないようにするだけでも、同じ結果を得られます。※jsの読み込みはbodyタグの閉じタグの直前に記載されている(</body>)ので、その辺りにあるscriptタグをチェックしてみてください。form.runの基本的な実装方法についてform.runを実装する際には、formタグにコードをかき入れる必要があったり、headタグ内で読みこませる、などの作業が必要になります。具体的な方法については、form.runを実装する際に丁寧に解説してくれているので割愛しますが、ポイントだけお伝えいたします。コンタクトフォームの作成方法は何種類か存在するのですが、今回は「コードを設置する」方法で話しを進めさせていただきます。※コードを設置するとは、HTMLファイルに直接記述することで実装する方法です。form.runについてそもそもform.runとは、Webサイトやブログなどで使われるコンタクトフォームで送られたデータを管理するために作られたサービスです。スパム・BOT対策機能データ暗号化・サーバー監視などバリデーション機能とは、正しい入力ができているか?を確認する機能です。例として電話番号を入力する場所に、間違ってEmailアドレスを入力した場合にエラーが出る、というような仕組みのことです。スパム対策についても後述しますが、セキュリティの面もしっかりしている!と理解しておけば間違いありません。2019年1月31日こんな充実した機能が無料で使用できるのですから、使用しない理由はありませんよね。form.runの利用料金について無料プランあり(機能制限あるが十分です!)有料プランもあり(¥4,980/月・¥12,800/月)機能の詳細は利用料金|form.runでご確認ください。class=””>のformのことです。form.runを実装する際の必須コードclass=”formrun”actino=”https://form.run/api/v1/r/あなたのフォームUID”method=”post”上記の3つのコードは必ず入れる必要があります!どれか一つでもかけてしまうと実装できませんので、ご注意ください。form.runのコード設置の解説を見ると、2のフォームUIDは登録者のUIDになっているので、そのままコピペして大丈夫です。formタグには上記の3つが必須となります。jsファイルに繋がっているであろうid要素に関しては削除して構いません(form.runで実装するならコンタクトフォーム用のjsファイルは必要ないので)ただし、確認のためにCSSファイルでid要素に指定が入っていないかだけ確認してみましょう。この確認をおこたるとデザインが変わってしまうなどの悪影響が出る場合がありますので、念には念を入れて確認しておきましょう。送信ボタンに入れる必須コードについては、『type=””submit”のみ』です!このコードが入力されていないと、form.runとの連携ができず、ボタンを押したとしてもデータがform.runに届くことはありません。「type=”submit”」が入っているか?を確認するようにしましょう。ちなみに、「data-formrun-error-text」という属性もあるのですが、必須項目に正しい値を入力していない場合にエラーを出すという機能です。詳しくはサンプルコード集に記載しておりますので、確認してみてください。(エラー時にボタンラベルを変更する)3inputタグやtextareaタグにはname属性を入れる【必須】inputタグやtextareaタグで入力された値は、そのままだと入力された文字が何を表しているのか、がわからない状態で送られてしまいます。そこで、name属性を入れることで、この文字列はなんの属性に対する文字なのか、を明確にすることができます。名前を入力するinputタグであれば、「name=”名前”」とすることで、form.runで受信した際に、「名前」という属性とともに入力された値が届くようになります。ちなみに、data-formrun-requiredという属性は、「必須項目(必ず入力しなくてはいけない項目)」を意味します。こちらをタグ内に記述しておくだけで、入力漏れがあった場合に、「未入力の項目があります」などのエラーメッセージを表示してくれます。data-formrun-type=”email”という属性は、入力した文字列がEmailアドレスかどうか?を自動で判定してくれる機能をもっています。間違って電話番号を入力した場合にはエラーが出る、という機能となります。こちらに関しても詳しくはサンプルコード集をご確認ください。4headタグ内の最後に入れるコードについて【必須】1〜3の手順が終わったら、最後の作業としてheadタグの閉じタグの直前にscriptタグを埋め込みます。このscriptタグを埋め込んで読み込ませないと、form.runとの連携ができませんので、必ず忘れないようにしてください。5form.run上でフォームのURLを設定する【必須】コンタクトフォームを実装するホームページのURLをform.run上で指定する必要があります。私の場合であれば、https://engineer.shidayuu.comのURLにコンタクトフォームを実装しているので、このURLをそのまま入力するだけです。※ちなみにフォーム送信後リダイレクトURLという項目があるのですが、2019年1月31日現在では上記のURLに「/thanks.html」を指定しています。正しい方法ではないかもしれませんが、サーバー上のindex.htmlと同じフォルダ内にthanks.htmlという名前のファイルを置いただけです。全ての内容をtestとしていただければ、送っていただいて構いません!あとは「更新する」ボタンを押して、入力した値を確定しましょう!実際にコンタクトフォームで入力して送信してみることで、しっかりと連携しているか、を確認できますので、必ずテスト送信しましょう!その際には、PCからだけでなくスマホからもテストしてみましょう!そうすることで改めてスマホ画面でのサイト確認もできますし、PCとは違うエラーがでることもあるため、手間を惜しまずに必ずやりましょう。2019年2月19日formrunの実装が上手くいかない、という話しをきいて、色々調べてみたりつぶやいてみたら、同じ悩みを抱えていたTakayukiさんが回答してくれました!!SSL化してないのが怪しいけど確証はない、、という状況だったので、彼の返信には興奮させられましたねwwどういう状態かというと、テスト送信をしてみて、PCでは上手く行くけど、スマホからだと「フォーム設定エラー」という画面が出てしまい、送信も受信もできないという状態です。原因として、WebサイトのSSL化をしていないことでした。SSL化というのは、簡単に言ってしまえばセキュリティ強化のために必要な暗号化のことでして、「http://」ではなく「https://」の状態のことを示します。sがつくことにより、セキュリティ強化されているという証明になり、Googleからの評価も得られるため、SEO対策の一つとしても重要な部分といえます。SSL化がお済みでない場合は、早急にSSL化を進めましょう!Xserverであれば手順は簡単なので、こちらから確認してみてください。※SSL化されていないと、上記のような表示になるため、安心して使用できないのでは?と不安に繋がりかねませんので、すぐにSSL化を進めましょう。※www有りとwww無しで登録することで解決する場合もある上記の方法を試しても改善しない場合は、formrunに登録するURLを追加で登録する必要があります。私の場合は、wwwを含まないURLで運営しているので、wwwを入力してアクセスしようとしてもエラーが出ます。両方でアクセスできる状態であれば、項目を増やして、「www.」を入力したURLも登録することで、スマホから送信できるようになった!という事例もありますので、ぜひ登録してみてください。2019年2月22日スパム対策・通知の設定をすることで快適に使用できますさらにform.runは無料にも関わらず、スパム対策機能(reCaptcha)や通知の設定が選べるだけで無く、自動補完機能があるなど、背中に手が届くツールが盛りだくさんです。その中から必ず実装すべきツールを2つだけ、ご紹介します!※管理画面で迷わないためにform.runの管理画面から抜け出せない、、調べたいけどどこを押せば良いかわからない、ってなった場合は、画面右上にある歯車アイコンをクリックしましょう。すると受信通知の設定やコード設置の方法について、改めて確認することができるようになります。1スパム対策(reCaptcha)を実装するreCapcha機能を使用することでスパムメール(迷惑メール)を回避することができます!スパムメールを回避するメリットは、『無駄な確認時間を無くすこと』と『危険を回避すること』にあります。こんな画面を見たことはありませんでしょうか?ロボットか人間かを確認するreChaptchaを導入することで、ロボットからの不正送信を防ぐことができます。実装してみるとわかるのですが、この項目をしっかりとチェックしない限り、送信ボタンを押しても、こちらにお知らせが届くことはありません。実装することで余計な手間を省ける&安心安全なのですから、やらない理由はありません!設定方法としてはform.runのスパム対策をご確認ください。(form.runのFAQ>セキュリティ対策>スパム対策にあります)ただし、注意点がひとつだけありまして、、テスト送信を済ませていない場合は設定してはいけないということです。テストをしていない状態で設定をかけてしまうと、送受信できなかった時の確認に時間がかかってしまうためです。PCからもスマホからもテスト送信してみて、受信もしっかり出来てから、reCaptchaの設定をするようにしましょう!2SlackやChatWorkで通知する、を実装する仕事をする上で今やかかせないツールの代表格として「Slack」「ChatWork」があります。このツールと連携させることで迅速かつ、チーム連携が容易に取れるようになる!というメリットがあります。URLが必要になるので取得する必要がありますので、form.runの通知設定より確認しながら進めてください!まとめテンプレートサイトで購入したテンプレートテーマのform.runの実装方法について、無事に設定&連携できましたでしょうか?もし上手く連携できない、、解決できないorz..と悩んでいる方がおりましたら、気軽にTwitter@araShidayuuKiにDMいただければ調べてご返答いたします!テンプレートテーマでform.run実装する方法についてformタグ内にある全てのid要素を削除するもしくはコンタクトフォームと連携しているjsファイルを読み込まないようにするformタグに必須の項目・inputタグやtextareaタグに必須の項目を入れる送信ボタンに必須の項目を入れる(type=”submit”)headタグの最後に指定のscriptタグをコピペするコンタクトフォームを使用するURLを入力する名前やEmailアドレスを必須にする方法として「data-formrun-required」をタグ内に入力する。そのほかの機能に関しては、サンプルコード集にてご確認ください。このブログでは主に読書した内容を元に、「ヒラメキを発信する」をテーマとして毎日更新しています。役に立ってくれると嬉しいです。