ホームページにお問い合わせフォームを設置するなら 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-5-20

    ヘッドレス CMS ってどんなの?ブログの新しい作り方!

    ブログの新しい作り方 みなさん、ブログ書いていますか? 結構多くの方が、これまで一度はブログをやっ…
  2. 2019-5-13

    東京オフィスを移転いたしました

    将来的な展望を踏まえ、東京オフィスを移転いたしました! 株式会社エージェントグローの東京オフィスは…
  3. 2019-5-13

    日本語入力は ATOK がとっても便利なことを知ってもらいたい

    日本語入力、何使ってますか? みなさん、PC での日本語入力ソフトは何を使っていますか? Win…
  4. 2019-5-11

    エージェントグローの社長ブログで気になる記事をピックアップ!【人柄・思考術・会社のアレコレ】

    こんにち、ヒロキです。 今日はエージェントグローの社長ブログから、私がオススメする記事をピックアッ…
  5. 2019-5-9

    2019 年 4 月度・第 33 回福岡社員総会 & 懇親会

    今月もやってまいりました! こんにち、ヒロキです。 今月も福岡の社員総会&懇親会が開催されました…
ページ上部へ戻る

当サイトに掲載されているコンテンツ(文書、画像等)は、許可なく複製・転用等する事を禁じます。

「フェアネス方式」は、株式会社エージェントグローが日本国内において出願中の商標です。

当サイトでは最低限必要と考えられる場合において、会社名/サービス名/商品名などを記載している場合があります。
これらはあくまでも説明の必要性に応じて用いているものであり、各社の権利等を侵害を目的とするものではございません。
不適切と考えられる場合には、当社お問い合わせフォームよりご連絡ください。

当サイトでは®や™などの表記を省略させていただいております。