icon_torita-gj.png

人物紹介:羽村鳥太

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

icon_neko-1.png

人物紹介:猫先生

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

icon_tugumi-gj.png

人物紹介:羽雲つぐみ

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

 

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

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

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

 

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

 

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

 

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

 

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

 

icon_torita-3.pngおっ、強引な導入でさっそく始めるッスね!!

 

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

 

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

img_fcblog_14-1.jpg

 

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

 

icon_torita-3.pngはーい。ぽちっとー。

img_fcblog_14-2.jpg

 

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

 

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

 

icon_torita-2.pngあっ、その中二っぽい感じ、ひさびさッスね!

 

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

 

icon_torita-gj.pngはーい! 勇者鳥太、ぽちっといきまーす!

img_fcblog_14-3.jpg

 

icon_tugumi-gj.pngテンプレートを選ぶみたいよ、勇者様♪

 

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

 

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

 

icon_torita-3.pngはーい。 ばしゅっとー。
開いたッスよ、猫先生。

 

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

 

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

img_fcblog_14-4.jpg

 

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

 

icon_torita-2.pngはーい。セーブしたッス!

 

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

img_fcblog_14-5.jpg

 

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

 

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

 

icon_torita-2.pngはーい。ぽちっとー。

img_fcblog_14-6.jpg

 

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

 

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

 

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

 

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

 

icon_torita-2.png了解ッス! 一番上の氏名から~……
できたッス!

 

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

img_fcblog_14-7.jpg

 

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

 

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

 

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

 

icon_neko-2.pngよし。
では、仕上げに詳細設定を設定するニャ。

img_fcblog_14-8.jpg

 

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

 

icon_torita-2.pngへえ、めっちゃ便利ッスね!

 

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

 

icon_torita-5.pngはーい。これッスね! ぽちぽちっとー。

 

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

 

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

img_fcblog_14-9.jpg

 

icon_tugumi-3.pngうんうん、あと一息ね!

 

icon_torita-3.pngはーい! がんばるッス!
よいしょー!!

 

icon_torita-gj.pngできたッス!!

 

icon_neko-5.pngよーし!
プレビューするニャ!!

img_fcblog_14-10.jpg

 

icon_neko-3.pngうむ!! できたニャ!

 

icon_torita-3.pngおおお!
これで新卒採用もばっちりッス!

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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