テンプレートテーマにform.runを実装できない(受信できない)場合の解決方法について

こんにちは！
函館在住のフリーランスWebエンジニアのシダユウ(@araShidayuuKi)です。

今回は購入したテンプレートテーマのコンタクトフォーム(form.run)の実装の方法について、解説します！

この記事を読んでいるということは、『購入したテンプレートテーマのコンタクトフォームを上手く設定できない…』と悩んでいるのではないでしょうか？

それもそのはずで、テンプレートテーマをそのまま実装しようとしても上手くいきません。

私も実装しようとして、丸半日ほど原因がわからず苦悩しました。。

本日の午前中の時間を
悩み抜いた結果として

なんとかformRunの実装が完了しました！！

そして秒で作ったサンクスページに
飛ぶように設定もできました(力技?w)

これで本日のお題に取りかかれる！
とりあえず一安心です^^;https://t.co/zTsRD21cDN

#30DAYSトライアル

— シダユウ@函館フリーランスエンジニア (@araShidayuuKi) 2019年1月30日

ですがご安心ください！

悩んだ挙句にいろいろと試した末、解決策を見つけることができました！

ちなみに購入したテンプレートのまま
formrunを実装しようとすると
連携できませんでした。

解決した方法として
・formタグ内にあるid要素を全て削除(input・textareaなど)

id要素を削除することで
コンタクトフォームと連動しているjsやphpが動かなくなるのだと思います
#30DAYSトライアル

— シダユウ@函館フリーランスエンジニア (@araShidayuuKi) 2019年1月30日

その方法について、しっかりとお伝えしていきます！

ちなみに私が実際に購入して使用したテンプレートテーマはテーマフォレスト(ThemeForest)にあるTaso-Parsonal Portfolio Templateというテーマです。

※同じテーマでなくとも参考になると思いますので、ぜひ読み進めてみてください。

テンプレートテーマにform.runを実装できない問題を解決した方法

実際に私が体験した例として、送信ボタンは押せるし、送信しました！というメッセージ(英文の)が出るのに、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サイトやブログなどで使われるコンタクトフォームで送られたデータを管理するために作られたサービスです。

バリデーション機能とは、正しい入力ができているか？を確認する機能です。

例として電話番号を入力する場所に、間違ってEmailアドレスを入力した場合にエラーが出る、というような仕組みのことです。

スパム対策についても後述しますが、セキュリティの面もしっかりしている！と理解しておけば間違いありません。

reCapchaを実装するメリット

①スパムメールが排除できる
②排除できることで無断な時間を使わなくて済む
③間違って送信ボタンを押しても送信されない

自分のサイトならまだしも、制作依頼を受けた場合は設定してあげることで、クライアント様にかかる負荷が軽減できます！

— シダユウ@函館フリーランスエンジニア (@araShidayuuKi) 2019年1月31日

こんな充実した機能が無料で使用できるのですから、使用しない理由はありませんよね。

機能の詳細は利用料金｜form.runでご確認ください。

①formタグに入れるコードについて【必須】

まずformタグとは、<form class=””>のformのことです。

上記の3つのコードは必ず入れる必要があります！どれか一つでもかけてしまうと実装できませんので、ご注意ください。

form.runのコード設置の解説を見ると、②のフォームUIDは登録者のUIDになっているので、そのままコピペして大丈夫です。

formタグには上記の３つが必須となります。

jsファイルに繋がっているであろうid要素に関しては削除して構いません(form.runで実装するならコンタクトフォーム用のjsファイルは必要ないので)

ただし、確認のためにCSSファイルでid要素に指定が入っていないかだけ確認してみましょう。

この確認をおこたるとデザインが変わってしまうなどの悪影響が出る場合がありますので、念には念を入れて確認しておきましょう。

②送信ボタンに入れるコードについて【必須】

送信ボタンに入れる必須コードについては、『type=””submit”のみ』です！

このコードが入力されていないと、form.runとの連携ができず、ボタンを押したとしてもデータがform.runに届くことはありません。

ですので、必ず「type=”submit”」が入っているか？を確認するようにしましょう。

ちなみに、「data-formrun-error-text」という属性もあるのですが、必須項目に正しい値を入力していない場合にエラーを出すという機能です。

詳しくはサンプルコード集に記載しておりますので、確認してみてください。（エラー時にボタンラベルを変更する）

③inputタグやtextareaタグにはname属性を入れる【必須】

inputタグやtextareaタグで入力された値は、そのままだと入力された文字が何を表しているのか、がわからない状態で送られてしまいます。

そこで、name属性を入れることで、この文字列はなんの属性に対する文字なのか、を明確にすることができます。

ですので名前を入力するinputタグであれば、「name=”名前”」とすることで、form.runで受信した際に、「名前」という属性とともに入力された値が届くようになります。

ちなみに、data-formrun-requiredという属性は、「必須項目(必ず入力しなくてはいけない項目)」を意味します。こちらをタグ内に記述しておくだけで、入力漏れがあった場合に、「未入力の項目があります」などのエラーメッセージを表示してくれます。

data-formrun-type=”email”という属性は、入力した文字列がEmailアドレスかどうか？を自動で判定してくれる機能をもっています。間違って電話番号を入力した場合にはエラーが出る、という機能となります。

こちらに関しても詳しくはサンプルコード集をご確認ください。

④headタグ内の最後に入れるコードについて【必須】

①〜③の手順が終わったら、最後の作業としてheadタグの閉じタグの直前にscriptタグを埋め込みます。

このscriptタグを埋め込んで読み込ませないと、form.runとの連携ができませんので、必ず忘れないようにしてください。

⑤form.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とは違うエラーがでることもあるため、手間を惜しまずに必ずやりましょう。

私は心配性なので、少なくとも5回はテスト送信しましたw

PCでは送受信できるけど、スマホではエラーが出てしまう場合

自分もそれなりました！
xserverでhttps://になるようにしたら直りましたよ！
formrunさんに直接問い合わせたら、http://でアクセスされてしまうからというようなことを頂きました

— Takayuki [エンジニアを目指してるけど、4月から全く別の業界で働く人] (@Taka85660379) 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も登録することで、スマホから送信できるようになった！という事例もありますので、ぜひ登録してみてください。

form. runでスマホからの送受信ができなかった件【解決】
結果：URLにwwwが含まれているかどうかの違い( ﾉД`)恥
「フォームURLの設定画面」でwww有とwww無を両方とも登録して、無事にスマホから(www有無ともに)送信可能となりました！
最終的にform. runへ問い合わせたのですが良い経験になりました！ https://t.co/QP2KzKVwwc

— misato (@min_selafine) 2019年2月22日

スパム対策・通知の設定をすることで快適に使用できます

さらにform.runは無料にも関わらず、スパム対策機能(reCaptcha)や通知の設定が選べるだけで無く、自動補完機能があるなど、背中に手が届くツールが盛りだくさんです。

その中から必ず実装すべきツールを２つだけ、ご紹介します！

※管理画面で迷わないために

form.runの管理画面から抜け出せない、、調べたいけどどこを押せば良いかわからない、ってなった場合は、画面右上にある歯車アイコンをクリックしましょう。

そうすると受信通知の設定やコード設置の方法について、改めて確認することができるようになります。

①スパム対策(reCaptcha)を実装する

reCapcha機能を使用することでスパムメール(迷惑メール)を回避することができます！

スパムメールを回避するメリットは、『無駄な確認時間を無くすこと』と『危険を回避すること』にあります。

こんな画面を見たことはありませんでしょうか？

ロボットか人間かを確認するreChaptchaを導入することで、ロボットからの不正送信を防ぐことができます。

実装してみるとわかるのですが、この項目をしっかりとチェックしない限り、送信ボタンを押しても、こちらにお知らせが届くことはありません。

実装することで余計な手間を省ける＆安心安全なのですから、やらない理由はありません！

設定方法としてはform.runのスパム対策をご確認ください。(form.runのFAQ>セキュリティ対策>スパム対策にあります)

ただし、注意点がひとつだけありまして、、テスト送信を済ませていない場合は設定してはいけないということです。

テストをしていない状態で設定をかけてしまうと、送受信できなかった時の確認に時間がかかってしまうためです。

ですので、PCからもスマホからもテスト送信してみて、受信もしっかり出来てから、reCaptchaの設定をするようにしましょう！

②SlackやChatWorkで通知する、を実装する

仕事をする上で今やかかせないツールの代表格として「Slack」「ChatWork」があります。

このツールと連携させることで迅速かつ、チーム連携が容易に取れるようになる！というメリットがあります。

通知の設定方法については、管理画面の中の「受信通知」をクリックすることで通知設定ができるようになります！

※Slack通知の場合はSlack Webhook URLが必要になるので取得する必要がありますので、form.runの通知設定より確認しながら進めてください！

まとめ

テンプレートサイトで購入したテンプレートテーマのform.runの実装方法について、無事に設定＆連携できましたでしょうか？

もし上手く連携できない、、解決できないorz..と悩んでいる方がおりましたら、気軽にTwitter@araShidayuuKiにDMいただければ調べてご返答いたします！

名前やEmailアドレスを必須にする方法として「data-formrun-required」をタグ内に入力する。

そのほかの機能に関しては、サンプルコード集にてご確認ください。