フォーム作成コストを削減! Googleフォームをカスタマイズしました。

先日、公開した「web制作における見積もり シミュレーション」 にお問合せフォームを導入しました。

しかしここで問題が……。

本サイトはプラグイン「Contact Form 7」を導入しているのですが、うまく送信ができないという事象にぶつかりました。

1から「Javascript」と「PHP」を用いてコンタクトフォームを作成しようと思ったのですが、ちょっと面倒くさい。

そこで「Googleフォーム」を導入することにしました。

遅ればせながら、
みなさま、こんにちは。

Googleフォームをカスタマイズしよう

Googleフォームとは?

そもそもGoogleフォームとは、アンケートやクイズを介してユーザーから情報を簡単に集められるツールで、シンプルで簡単に使えることから、個人でも使用している人が多いのではないでしょうか?

「イベントの出欠確認」や「イベント参加者からの感想を集める」etc、多くの活用方法があります。
そしてホームページのお問い合わせに使うのもその一つ。

学習コストが無に等しく非常に重宝できるのですが、デザインのカスタマイズ性が低いというのが難点。

そこでGoogleフォームは本当にカスタマイズ性が低いのか調べてみました。

Googleフォームをカスタマイズしたい

Googleフォームを自在にカスタマイズする

上記サイトを参考にさせていただきました。
ありがとうございました。

まずデフォルトのデザインはこんな具合でした。

で、デザイン後がこんな感じになりました。
(参考:web制作における見積もり シミュレーション

 

いかがですか?
見た感じGoogleフォームとは思えませんよね。

Googleフォームのカスタマイズ方法

HTMLを作成する

まずはフォームのHTMLを作成してください。

Googleフォームを作成する

次にHTMLと同じ内容のGoogleフォームを作成してください。

その後「(右上の)送信」を押してください。
そうすると共有リンクの方法が出てきますので、真ん中の「∞」からリンクを取得し、そのリンク先へ移動してください。

デヴェロッパーツールを使いGoogleフォームの「action =”URL” name =”entry.000000″」を取得する

デヴェロッパーツールを開き、 <form action="https://docs.google.com/formsURL" > という記述を探し、先ほど作成したHTMLに追記してください。

 

次に、 <input type="text" name="entry.844671445" >という記述を探し、先ほどと同様に作成したHTMLに追記してください。

 

こんな感じで、それぞれの name 属性を取得し、記述してください。

たったこれだけで作業完了。

上記のように作成したHTMLを使用すればデザインカスタマイズし放題ですので、試してみてください。

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~