BIGLOBEホームページサービス「Feather cloud」の紹介コラムです。きれいなホームページを、初心者でも簡単に作れる「Feather cloud」。その使い方を、対話形式で詳しくご紹介していきます。


人物紹介:羽村鳥太

人物紹介:羽村鳥太

鳥巣株式会社の新入社員。
パソコンに詳しくないホームページ担当。

人物紹介:猫先生

人物紹介:猫先生

特別顧問のしゃべる猫。
パソコンやホームページに詳しい。

人物紹介:猫先生

人物紹介:羽雲つぐみ

鳥太の部署の先輩。
特技はたとえ話と除霊。

【第14回】お申し込みフォームを作ろう!つかってみようFeather cloud

BB-WAVE掲載日:2017年09月20日


ホームページ作成は知識がないと難しい、そう思っている方におすすめのBIGLOBEホームページサービス『Feather cloud』。きれいなホームページを、かんたんな操作で作ることができます。
この第十四回では、新卒採用のページに設置するお申し込みフォームを作成していきます。

前回「ページ作成を進めていこう!つかってみようFeather cloud」はこちら

完成に向けてその3☆お申し込みフォーム作成もかんたん!SmoothContact!の巻

おはようニャ、鳥太、つぐみ。
随分涼しくなって秋めいてきたニャ。

おはよッス! 猫先生、つぐみ先輩!!
昨日うちの夕飯、初サンマだったッス! 美味かったッスよ!

おはよう、鳥太くん、猫先生。
読書しながら、あったかいお茶を楽しむのもいいですよね♪

うむ、秋はよい季節ニャ……。 思わず就職活動もしたくなるというものニャ。
ということで、今日は鳥巣株式会社のトップページにある「新卒採用はこちら」の先のページを作成し、実際に申し込み出来るようにするニャ。

おっ、強引な導入でさっそく始めるッスね!!

今回は「説明する工程が多いから、雑談は尺が余ったら」ってことらしいわ♪

だいぶメタな説明だが、まあそういうことニャ。
では、申し込みフォームをばしっと作って、新しいお仲間をゲットだニャ!!
まずはこのページのブロックエディタを開くニャ!

ブロックエディタを開き、パーツ一覧のフォームを開くニャ

では、図示のとおり、パーツ一覧のフォームを開くニャ。

はーい。ぽちっとー。

パーツ一覧を開いたニャ

あっ、見たことない画面になったわね。
強引な導入も納得だわ。

そうなんだニャ。
だが案ずることはない。吾輩の導きに従えば、必ずや世界を救……、いや、完成まで辿り着けるニャ。

あっ、その中二っぽい感じ、ひさびさッスね!

くっ、忘れてた設定を掘り起こしてきた的な指摘はやめるニャ鳥太!
まずは「新規フォームを登録」をクリックするニャ!

はーい! 勇者鳥太、ぽちっといきまーす!

「新規フォームを登録」をクリックすると、フォームテンプレート選択画面が開くニャ

テンプレートを選ぶみたいよ、勇者様♪

……えっと、どれ選べばいいんッスかね、大賢者様。

ふ、まだまだだな勇者よ。
今回は採用ページの作成ニャ。「採用応募フォーム」を選ぶがいいニャ!!

はーい。 ばしゅっとー。
開いたッスよ、猫先生。

くっ……振っておいて突然寸劇を止めるニャ!
のってしまった吾輩のほうが、なんだか恥ずかしいニャ……!!

まあまあ、気を取りなおして先に進みましょ!
あっ、「新規作成フォーム」っていうのができてるわね。

「新規作成フォーム」ができたニャ。まずここまでの冒険をセーブ…いや、保存ニャ

うむ。「採用応募フォーム」のテンプレートが反映された、新しいフォームができたんだニャ。
まずここまでの冒険をセーブ……いや、保存するニャ。右上の「保存」を押すニャ。

はーい。セーブしたッス!

……うむ。
では、フォームの項目について詳しく説明していくニャ。

フォームの項目編集画面の説明ニャ

うんうん、ここで項目のテキストを変えたり、項目自体の追加・削除をするのね♪
えっと、今フォームに入ってる内容は、っと……

内容は、現行の古いページと同じで頼むとの社長の指示を受けたニャ。
ということで、古いページの採用情報を開くニャ、鳥太。

はーい。ぽちっとー。

フォームを古いページの項目に揃えるニャ

あ、このページ懐かしいッスね。
オレ、ここから申し込みしたッスよ。

わたしは大学の紹介で受けたから、始めて見るけど……
氏名、性別、年齢、メールアドレス、最終学歴、資格、志望動機・自己PR……けっこう項目少ないのね。

送信したら「詳しくは面接で!」みたいな返信がきたッスよー。
履歴書の内容をまるまる入力する感じのページはオレ疲れるんで、ここらへんも好印象だったッス。

鳥巣株式会社は、主に志望動機と自己PRで面接を決めるからニャ。
「項目を追加」ボタンや、カーソルを合わせて項目の移動・編集などを行って編集するニャ、鳥太。

了解ッス! 一番上の氏名から〜……
できたッス!

よし!
では、次にデザインを設定するニャ。
「デザイン」タブを開くと、テンプレートを選ぶことができるニャ。

デザインを設定するニャ

いろんな色から選べるのね。
会社やお店のイメージにあわせられて便利ね♪

うむ。気軽に色を設定できるのは嬉しいことニャ。
鳥巣株式会社は青が基調だから、青系のデザインを選ぶと統一感があるニャ。

なるほどッス!
じゃあ、この「プリセット/Blue」ってやつにするッス!

よし。
では、仕上げに詳細設定を設定するニャ。

詳細設定の画面ニャ

ここでは、申し込みがあったときの通知メールの受取先を決めたり、申し込みが終わった相手にメールを自動で送る設定をつけたりできるニャ。

へえ、めっちゃ便利ッスね!

うむ、そうなんだニャ。
鳥巣株式会社は手動で返信しているから、今回は通知メールの設定だけするニャ。

はーい。これッスね! ぽちぽちっとー。

他の設定の詳細については、Feather cloudサポートサイトの「フォームの詳細設定をする」を見てみてね!

よし!
では、作成したフォームをページに配置するニャ!!

これがこうでこうニャ

うんうん、あと一息ね!

はーい! がんばるッス!
よいしょー!!

できたッス!!

よーし!
プレビューするニャ!!

完成版☆プレビューッス!!

うむ!! できたニャ!

おおお!
これで新卒採用もばっちりッス!

すっきりして、見やすくなったわ!
これなら、このサイトからの申し込みも増えそうね♪

は〜、設定多くて疲れたッス……。
でも、無事に申し込みフォームが完成して嬉しいッス!!
Feather cloudがなかったら、オレじゃ絶対作れなかったッスよ!

うむ! 項目の設定をしていけばフォームが作れる……素晴らしいことニャ。
実際に白紙の状態から作ると、まず、ちゃんと動くようにフォームのソースを組むところから大変だからニャ。

Feather cloudさまさまね♪
さて、やっぱり今回は雑談する尺がなかったみたいね!!

次が最終回なのに、雑談カットなんッスね……。
うう、残念ッス。。

そう気を落とすニャ、鳥太。また来週があるニャ。

来週は作ったページ同士をつなげる「リンクの貼り方」と、サイト作成のラスボス、公開を行うニャ!
最後まで気合入れていくニャ!!

次回「最終回もきっちりレクチャー!猫先生よ永遠に!!」お楽しみに!

今回使ってみたサービス

  1. サービス名:BIGLOBE Feather cloud
  2. 提供会社:ビッグローブ株式会社
  3. http://www.fc.biglobe.ne.jp/index.html