【nocode #28】nicepageでコンタクトフォームを作ってみよう I
今回はサイト内にコンタクトフォームを設置してみます。
本サイト内ではGoogleformsへリンクする仕様にしているので、今回はサイト内には設置しませんが、nicepageでどんなことができるのか確認してみましょう。
nicepageでのコンタクトフォームの作り方
■いろいろなパターンが作れます。
とは言え結局は入力フォームのパターンを、ポチポチっと配置していくだけなので、それほど難しいことはありません。
普段いろいろなサイトを利用していると、コンタクトフォームを利用することも多いと思いますので、それを思い出しながらこんな感じかなってレベルで全然作成できちゃいます。
すべてを説明しているとあまりに長くなってしまうので、よく目にするもの、よく使うであろう、主要なものをピックアップして説明していきたいと思います。
■まずはフォームのブロックを追加します。
クイックメニューの「＋」をクリックして、追加パネルから「Contact Form」を選択します。
「BLOCKS」の一番上右側のブロックを選択し追加します。
こんな感じでフォームが配置されたブロックが追加されるはずです。
それではこれをベースにいろいろと見ていきましょう。
■まずはフォームデータの送信先の設定
配置したフォームエレメントをクリックすると、画面右にフォームのプロパティパネルが表示されます。
ここの「SUBMIT TO」をクリックすると、
このようにメールアドレスが一つ設定されている状態で表示されます。
このアドレスはnicepageのログインIDにもなっているメールアドレスがデフォルト設定になています。
もちろん別のメールアドレスや複数のアドレスを設定することもできます。
■送信先メールアドレスを追加してみる
送信先を追加するには「Add」ボタンをクリックします。
するとメニューが開き、いくつかの選択肢が表示されます。
おそらく私やこれを読んでいる方々は「MULTIPLE USE」の「Email」か「Google Sheets」を使うのがほとんどかなと、「Contact Form 7」や「Joomla Form」は、それぞれWordpressとJoomlaのプラグインなので、それらを使ってサイトを作成する場合は使っても良いかもしれませんが、他はちと難しいのでここでは割愛します。
■送信先のEmailアドレスを追加する
「MULTIPLE USE」から「Email」を選択します。
「Add」ボタンの下に新しいメールアドレスを入力するフィールド表示されるので、ここに送信先となるメールアドレスを入力して、「Verify」ボタンをクリックして新しいメールアドレスの疎通認証をします。
Vrifyをすると、まずnicepageから「Verify your email at Nicepage Forms」というタイトルのメールがこのメールアドレス宛に送られてきます。
このメールに認証用のURLが記載されているので、これをクリックしてnicepageの認証ページを開けば認証完了です。
これで2つのメールアドレスにフォームに入力した内容が送られてくるようになります。
■Google Sheetsにデータを送信する
Google Formsと同様にGoogle Sheetsにも入力されたデータを送ることができます。
「Add」のメニューから「Google Sheets」を選択すると「Connect」というボタンが表示されます。
これをクリックすると、ブラウザが開きGoogleのアカウント選択画面が表示され、選択するとGoogle Sheetsとnicepageを接続するかの確認画面が表示されますので、ここで接続の許可をするとすぐに反映されて、プロパティパネルに下のように表示されます。
これでGoogle Sheetsと接続が完了しました。
最下部にある「Spreadsheet Name」はGoogle Sheetsに作成されているSheetの名称をここで変更できるようになっています。
■Submit to 「Leads」とは？
現在「Submit to」の中に、「Leads」「Email」「Google Sheets」の3つがあります。
ではこの「Leads」とは何なのでしょうか。
他の2つはそれぞれの位置にカーソルをホバーすると、ゴミ箱アイコンが表示され削除できますが、この「Leads」だけは表示されず削除できません。
この「Leads」とは、nicepageのサイトと「つながる」という意味で使われているようです。
ここで「View Leads」と書かれたリンクをクリックすると、nicepageのサイト上でもSubmitされた情報を確認・管理できるようになっています。
テストで送信したものなので、内容はえらい適当ですが、こんな感じで送信内容のレビューができるようになっています。
フォームを作ると必ずこれが着いてくるのは、いろいろと考えるところもありますが、まぁ選択できるようになっていればよかったな、とは思います。
さて次はフォームのカスタマイズをしていきましょう。
■追加された基本のフォームアイテムを調整してみる
さて、現在は一番シンプルなフォームアイテムを追加しているので、ラベルの表示もなく、入力フィールドと送信ボタンのみになっています。
プレースホルダーは表示されているものの、ラベルがないのでイマイチ分かりづらいですね。
まず各入力フィールドのラベルを追加してみましょう。
画面右のプロパティパネルの真ん中あたりにある「LABELS」のメニューをクリックします。
すると、LABELSのプロパティ設定が表示されるので、一番上の「Label」のチェックボックスをONにするだけです。
ここをONにすると、ラベルを配置するレイアウトの設定と、ラベルの文字設定ができるようになり、フォームの入力フィールドにラベルが表示されるように
なります。
このような形でラベルが追加されました。
■ラベルやプレースホルダーのテキストを変更する
ラベルやプレースホルダーが英語になっているので、ここの表示を修正して日本語にしてみましょう。
フォーム内に含まれる各入力フィールドを選択すると、その入力項目に関するプロパティパネルが右に表示されます。
この中の「Label」のところがラベル名、「Placeholder」の部分がプレースホルダー、「Name」部分がフィールド属性になります。
ここのフィールド属性は、ブラウザの入力補助との関係もあるので基本的には変更しません。
すべての入力フィールドのラベルとプレースホルダーを日本語に変更してみましょう。
こんな感じになりました。
ついでにボタンの名称も「送信」に変更しました。
ボタン名称に関しては、テキスト部分をダブルクリックで編集可能になります。
基本的に入力フィールドとボタンの編集はこれだけです。
それでは次にいろいろな入力フィールドのパターンを見ていきましょう。
■入力フォームをステップ形式にする
入力項目が多くなると1ページにフィールドがズラッと並んでて、それだけでテンションだだ下がり、なんてことも。
心理的なプレッシャーとでも言うのか、「こんなに入力しないといけないのか・・・」と、ちょっと面倒になったりも。
そんなときよく使われる方法として、ステップわけをして入力をする方法。
というわけでnicepageでもステップ形式をフォームを作成機能があるので、これでフォームタイプを紹介していきたいと思います。
まずブロックに配置されているフォームエレメントを選択して、クイックメニューの一番上にあるブルーの「＋」アイコンを選択します。
するとエレメントメニューが表示されるので、その中の一番上にある「Form」を選択すると上手のようにフォームタイプのバリエーションが表示されます（フォームエレメントを選択していると、「Form」メニューが一番上に表示されるようになっています）。
フォームタイプの一番上に「Add Form Step」というメニューがあるので、これを選択すると、フォームエレメントがステップタイプに変更されます。
こんな感じです。
左上にStep1とStep2というタブが表示されているのが分かりますね。
このタブを切り替えて各ステップのフォームを編集します。
■ステッププログレスインターフェースの表示
ステップ形式のフォームで、全体のステップ数と現在のステップ位置が分かるインターフェースをよく見かけますが、nicepageでも表示することが可能です。
こんな感じのですね。
フォームエレメントを選択するとプロパティパネルに「Progress」という項目が表示されています。
これにチェックを入れると、その下に「PROGRESS」というインターフェースが表示されます。
ここをさらにクリックすると、プログレスインターフェースのカスタマイズができるようになります。
という感じで、アイコンやテキストポジション、カラー、バーのサイズなどの変更ができるようになっています。
あまり自由度は高くありませんが、とりあえず表示はできるので及第点をあげても良いかなという感じです。
それでは次はフォームタイプのお話をしていきましょう。
と、思いましたが結構長くなってしまったので、続きは次回ということに。
それではまた次回に。
〜本日の「余談ですが」〜
余談ですが、はまってます。
なにに？
ってアマプラで見れる「氷点下で生きるということ」というBBCのドキュメンタリー番組。
北極線付近に暮らす人達のドキュメンタリーなんだけど、これがやたらと興味引かれるんだよね。
北緯66度33分以北が北極圏と言われているが、この北極圏の南側の縁が北極線といわれているらしい。
ただし、まっすぐではなく数百キロ〜数千キロくらいは南北にうねってるらしいけど。
場所的にはアラスカの北側1/4〜3/1あたりに北極線があるのだけど、これより北側が北極圏なのだそう。
そしてここで暮らす人たちのドキュメンタリーがこの番組。
冬は軽く−20℃〜−40℃くらいにはなる。
ヘラジカやカリブーやクマ。
川でサケなどの魚。
カモやガンやライチョウ。
そんなのを銃で狩りながら生活している。
ベリー系の植物や野菜を育ててる人もいる。
森から薪を切り出してきたり。
カヌーを自作したり。
冷蔵庫自作したり。
家まで自作したり。
家族だったり一人だったり。
このドクメンタリーにドハマリしてるわけです。
冬キャンプの延長線上にあるような気がして早く冬が来ないかなというのもある。
ただし、その延長線は果てしなく長くて、繋がってるんだかどうかもまったく見えないけど・・・w
まぁキャンプとサバイバルにはきっと根本的に似て非なるものがあるのだろーな。
いまシーズン8まで公開されてるんだけど、各シーズンで20話前後。
現在おおよそ160話強。
もう少しでシーズン2を見終わる感じ。
先は長いな・・・。