「コンタクトフォーム」をリデザイン

いよいよ大詰め。最終の「コンタクトフォーム」ページの改修を行っていこう。まず、他のページと同様にビルボードで使用されている写真を差し替える、不必要な要素を排除するところからスタートする。次にメインブロックの編集へと移るが、「Style」テンプレートの「Contact」ページでは企業概要や住所、Googleマップなどが使用されている。今回は、Googleマップの代わりに、[ウェブサービス系パーツ]より[フォーム]を配置してみたいと思う。

最初に完成形をご覧いただきたい。シンプルだけど必要最低限の機能を有したコンタクトフォームを作成するぞ

他の作業と同様に、[ブロックエディタ]の右メニューに配置されている[ウェブサービス系パーツ]より[フォーム]を選択。すると「SYNC」が起動するので、ガイダンスに従って必要事項を入力していこう。ここでひとつ注意だが、[フォーム]を利用する場合、事前にGoogleアカウントを取得しておく必要があるということを覚えておこう。

ざっと数分もあれば、ご覧のようにシンプルだが機能的な「コンタクトフォーム」ページが完成。何のノウハウがなくても、簡単な操作で多機能なWebサイトが構築できる「BiND4」。原稿を執筆しつつ同時に制作を進めるという変則的なスタイルであっても、述べ時間にして半日も掛かっていないだろう。この手早く、かつスタイリッシュなデザインで構築できてしまうのはプロアマ問わずありがたいのではないだろうか。

[ウェブサービス系パーツ]より[フォーム]を選択すると「SYNC」が起動しフォーム作成が開始される

[フォーム]ではGoogleドキュメントの「スプレッドシート」を利用しているためGoogleアカウントの設定を行う

あらかじめ用意しておいたGoogleアカウントへサインイン。ID(メール)とパスワードを入力して……

サインイン後、Googleアカウント上で「SYNC」へのアクセスを許可してやろう

下準備が整ったら、どのようなフォームを作成するかいくつか用意されたテンプレートより選択していく

フォーム上で入力してもらいたい項目などは、自在にカスタマイズすることが可能だ

フォームの名称はもちろん、フォームを利用して問い合わせたユーザーに対してどんなメッセージを残すかも設定できる。きめ細かい心遣いがGoodです

さらに、フォームから問い合わせたユーザーに対して「送信完了メール」を送ることも可能。カンタンなのに機能は盛りだくさんだ