ホームページにお問い合わせフォームを設置するなら Pageclip がオススメ!

お問い合わせフォーム、どうやってつくります?

こんにちは、江嵜です。

みなさん、ホームページ作ってますか?

最近では色々な人・お店がホームページを持つようになりましたね。

多くの場合では、お問い合わせをしてもらうために、
お問い合わせフォームを設置しますよね。

こんな感じで。

このお問い合わせフォームなのですが、実際に設置してみるとなると
プログラム的には

  • お問い合わせフォームから情報がサーバーへ送られる
  • 送られた情報をサーバーが処理して、メールなどに変換
  • メールに変換された情報を管理者のメールアドレスへ送付

こんな感じの流れになります。

この「サーバー」の処理の部分でプログラムを書かないといけなくて、
ちょっとメンドウなんですよね。

お店の紹介とかポートフォリオサイトとか、
複雑なことをせずにただ表示するタイプのサイトなんかだと、
このお問い合わせフォームの為だけにプログラムを組んであげないといけない…
という事になったりします。

そうなると、もうメールアドレス書いとくだけで良いかな…とか思っちゃいますよね。

でもちょっと待ってください!
そのフォームを設置するための Web サービスがあるとしたら?

Pageclip !つかってみよう!

https://pageclip.co/

なかなかオシャレなページでいい感じじゃないですか!
登録して使ってみましょう。

とりあえずログインしてみたら

  • サイト名
  • URL

を聞かれました。

とりあえずテストで作る Web サイトなので、それぞれ適当に入力。
URL はどこかにアップロードするわけではないので、今回は localhost で。

Add Site ボタンを押したら…

もう設定完了みたいです!早い!

早速ページに設置してみましょう。

手順に沿って、

  • script タグを body の終了直前に挿入
  • スタイルシートを head タグ内に挿入
  • form タグを、フォームを設置したい場所へ挿入

今回は単純にフォームだけ見たいので、
その他の要素はないページを作ってみました。

ついでに、テキストエリアも form の部品に追加してみました。

画面を開いてみると…

左上にフォームの部品が表示されていますね!

実際に使用する場合は、サイトのデザインに合わせて
こちらもデザインを編集していくことになるでしょう。

送信ボタンをおしてみると…

画面が Thank you! に替わりましたね!

Pageclip の画面に戻ってみると

いい感じで、入力された情報が入っています!
私が追加で設置した comment のテキストボックスの内容も表示されてますし、
データが送信された日時もバッチリですね!

ちなみに、きちんとアカウント作成時に登録したメールアドレスの方にも
こんな感じで投稿がありましたよ!という事が通知されます。

その他にも slack などのチャットシステムとも連携ができますから
投稿があった際に slack へメッセージを流したり、
webhook という特定の URL へ通知を送る機能もありますので
色々カスタマイズもできますね!

フォーム設置に便利な Pageclip ぜひおためしあれ!

色々と出来ることは公式のドキュメントを見てみてくださいね。
https://pageclip.co/docs

ちなみに気になる料金ですが、2019 年 2 月現在で

  • 1 サイト
  • 1 フォーム
  • 月間フォーム送信数 1000 件

以上の内容であれば無料で使えます。
https://pageclip.co/#pricing

個人やあまり問い合わせが多くないお店であれば十分な内容ですよね。

ちょっとした問い合わせフォームの設置にはぜひおためしあれ!

Takato Ezaki

Takato Ezaki小中高の塾講師からエンジニア

投稿者プロフィール

福岡で Web 系のエンジニアをしています。

中高の理科教師免許を取り、起業に 2 年間トライした後エンジニアの道へ入りました。

化学反応の中では Belousov-Zhabotinsky 反応が大好きです。

この著者の最新の記事

関連記事

コメントは利用できません。

募集中!(o゜▽゜)o

エンジャパン
求む、社長!
follow us in feedly

コッチもヨロシク!





最近のネタ!

  1. 2019-3-22

    第19回社員総会&懇親会@osaka-〜今月も新入社員、新リーダーが!〜

    2019年3月8日(金)、大阪社員総会&懇親会が開催されました! その様子をお届けします! 社員総…
  2. 2019-3-18

    Netlify が git lfs にスゴく便利な感じで対応しました!

    Netlify が git LFS に対応しました!(git LFS についての前置きとか) こん…
  3. 2019-3-14

    【福利厚生】おすすめ✨ブルーベリーヒル勝浦体験記!!!

    こんにちは❤ お久しぶりです、エージェントグローのかとうさんσvσです😊 エージェントグローは…
  4. 2019-3-11

    TypeScript の paths はパスを解決してくれないので注意すべし!

    こんにちは、江嵜です。 みなさん、 TypeScript 書いてますか? 私は JavaScri…
  5. 2019-3-5

    第7回麻雀部活動記録~えっ?ポイントカードあったんですか?~

    あけましておめでとうございます。 2019年2月某日に新年初麻雀部を実施してきました! 場所はい…
ページ上部へ戻る