人物紹介:羽村鳥太
鳥巣株式会社の新入社員。
パソコンに詳しくないホームページ担当。
人物紹介:猫先生
特別顧問のしゃべる猫。
パソコンやホームページに詳しい。
人物紹介:羽雲つぐみ
鳥太の部署の先輩。
特技はたとえ話と除霊。
【第14回】お申し込みフォームを作ろう!つかってみようFeather cloud
ホームページ作成は知識がないと難しい、そう思っている方におすすめのBIGLOBEホームページサービス『Feather cloud』。きれいなホームページを、かんたんな操作で作ることができます。
この第十四回では、新卒採用のページに設置するお申し込みフォームを作成していきます。
完成に向けてその3☆お申し込みフォーム作成もかんたん!SmoothContact!の巻
おはようニャ、鳥太、つぐみ。
随分涼しくなって秋めいてきたニャ。
おはよッス! 猫先生、つぐみ先輩!!
昨日うちの夕飯、初サンマだったッス! 美味かったッスよ!
おはよう、鳥太くん、猫先生。
読書しながら、あったかいお茶を楽しむのもいいですよね♪
うむ、秋はよい季節ニャ……。 思わず就職活動もしたくなるというものニャ。
ということで、今日は鳥巣株式会社のトップページにある「新卒採用はこちら」の先のページを作成し、実際に申し込み出来るようにするニャ。
おっ、強引な導入でさっそく始めるッスね!!
今回は「説明する工程が多いから、雑談は尺が余ったら」ってことらしいわ♪
だいぶメタな説明だが、まあそういうことニャ。
では、申し込みフォームをばしっと作って、新しいお仲間をゲットだニャ!!
まずはこのページのブロックエディタを開くニャ!

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

あっ、見たことない画面になったわね。
強引な導入も納得だわ。
そうなんだニャ。
だが案ずることはない。吾輩の導きに従えば、必ずや世界を救……、いや、完成まで辿り着けるニャ。
あっ、その中二っぽい感じ、ひさびさッスね!
くっ、忘れてた設定を掘り起こしてきた的な指摘はやめるニャ鳥太!
まずは「新規フォームを登録」をクリックするニャ!
はーい! 勇者鳥太、ぽちっといきまーす!

テンプレートを選ぶみたいよ、勇者様♪
……えっと、どれ選べばいいんッスかね、大賢者様。
ふ、まだまだだな勇者よ。
今回は採用ページの作成ニャ。「採用応募フォーム」を選ぶがいいニャ!!
はーい。 ばしゅっとー。
開いたッスよ、猫先生。
くっ……振っておいて突然寸劇を止めるニャ!
のってしまった吾輩のほうが、なんだか恥ずかしいニャ……!!
まあまあ、気を取りなおして先に進みましょ!
あっ、「新規作成フォーム」っていうのができてるわね。

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

うんうん、ここで項目のテキストを変えたり、項目自体の追加・削除をするのね♪
えっと、今フォームに入ってる内容は、っと……
内容は、現行の古いページと同じで頼むとの社長の指示を受けたニャ。
ということで、古いページの採用情報を開くニャ、鳥太。
はーい。ぽちっとー。

あ、このページ懐かしいッスね。
オレ、ここから申し込みしたッスよ。
わたしは大学の紹介で受けたから、始めて見るけど……
氏名、性別、年齢、メールアドレス、最終学歴、資格、志望動機・自己PR……けっこう項目少ないのね。
送信したら「詳しくは面接で!」みたいな返信がきたッスよー。
履歴書の内容をまるまる入力する感じのページはオレ疲れるんで、ここらへんも好印象だったッス。
鳥巣株式会社は、主に志望動機と自己PRで面接を決めるからニャ。
「項目を追加」ボタンや、カーソルを合わせて項目の移動・編集などを行って編集するニャ、鳥太。
了解ッス! 一番上の氏名から~……
できたッス!
よし!
では、次にデザインを設定するニャ。
「デザイン」タブを開くと、テンプレートを選ぶことができるニャ。

いろんな色から選べるのね。
会社やお店のイメージにあわせられて便利ね♪
うむ。気軽に色を設定できるのは嬉しいことニャ。
鳥巣株式会社は青が基調だから、青系のデザインを選ぶと統一感があるニャ。
なるほどッス!
じゃあ、この「プリセット/Blue」ってやつにするッス!
よし。
では、仕上げに詳細設定を設定するニャ。

ここでは、申し込みがあったときの通知メールの受取先を決めたり、申し込みが終わった相手にメールを自動で送る設定をつけたりできるニャ。
へえ、めっちゃ便利ッスね!
うむ、そうなんだニャ。
鳥巣株式会社は手動で返信しているから、今回は通知メールの設定だけするニャ。
はーい。これッスね! ぽちぽちっとー。
他の設定の詳細については、Feather cloudサポートサイトの「フォームの詳細設定をする」を見てみてね!
よし!
では、作成したフォームをページに配置するニャ!!

うんうん、あと一息ね!
はーい! がんばるッス!
よいしょー!!
できたッス!!
よーし!
プレビューするニャ!!

うむ!! できたニャ!
おおお!
これで新卒採用もばっちりッス!
すっきりして、見やすくなったわ!
これなら、このサイトからの申し込みも増えそうね♪
は~、設定多くて疲れたッス……。
でも、無事に申し込みフォームが完成して嬉しいッス!!
Feather cloudがなかったら、オレじゃ絶対作れなかったッスよ!
うむ! 項目の設定をしていけばフォームが作れる……素晴らしいことニャ。
実際に白紙の状態から作ると、まず、ちゃんと動くようにフォームのソースを組むところから大変だからニャ。
Feather cloudさまさまね♪
さて、やっぱり今回は雑談する尺がなかったみたいね!!
次が最終回なのに、雑談カットなんッスね……。
うう、残念ッス。。
そう気を落とすニャ、鳥太。また来週があるニャ。
来週は作ったページ同士をつなげる「リンクの貼り方」と、サイト作成のラスボス、公開を行うニャ!
最後まで気合入れていくニャ!!
次回「最終回もきっちりレクチャー!猫先生よ永遠に!!」お楽しみに!
人物紹介:羽村鳥太
鳥巣株式会社の新入社員。
パソコンに詳しくないホームページ担当。
人物紹介:猫先生
特別顧問のしゃべる猫。
パソコンやホームページに詳しい。
人物紹介:羽雲つぐみ
鳥太の部署の先輩。
特技はたとえ話と除霊。
ホームページ作成は知識がないと難しい、そう思っている方におすすめのBIGLOBEホームページサービス『Feather cloud』。きれいなホームページを、かんたんな操作で作ることができます。
この第十四回では、新卒採用のページに設置するお申し込みフォームを作成していきます。
完成に向けてその3☆お申し込みフォーム作成もかんたん!SmoothContact!の巻
おはようニャ、鳥太、つぐみ。
随分涼しくなって秋めいてきたニャ。
おはよッス! 猫先生、つぐみ先輩!!
昨日うちの夕飯、初サンマだったッス! 美味かったッスよ!
おはよう、鳥太くん、猫先生。
読書しながら、あったかいお茶を楽しむのもいいですよね♪
うむ、秋はよい季節ニャ……。 思わず就職活動もしたくなるというものニャ。
ということで、今日は鳥巣株式会社のトップページにある「新卒採用はこちら」の先のページを作成し、実際に申し込み出来るようにするニャ。
おっ、強引な導入でさっそく始めるッスね!!
今回は「説明する工程が多いから、雑談は尺が余ったら」ってことらしいわ♪
だいぶメタな説明だが、まあそういうことニャ。
では、申し込みフォームをばしっと作って、新しいお仲間をゲットだニャ!!
まずはこのページのブロックエディタを開くニャ!
では、図示のとおり、パーツ一覧のフォームを開くニャ。
はーい。ぽちっとー。
あっ、見たことない画面になったわね。
強引な導入も納得だわ。
そうなんだニャ。
だが案ずることはない。吾輩の導きに従えば、必ずや世界を救……、いや、完成まで辿り着けるニャ。
あっ、その中二っぽい感じ、ひさびさッスね!
くっ、忘れてた設定を掘り起こしてきた的な指摘はやめるニャ鳥太!
まずは「新規フォームを登録」をクリックするニャ!
はーい! 勇者鳥太、ぽちっといきまーす!
テンプレートを選ぶみたいよ、勇者様♪
……えっと、どれ選べばいいんッスかね、大賢者様。
ふ、まだまだだな勇者よ。
今回は採用ページの作成ニャ。「採用応募フォーム」を選ぶがいいニャ!!
はーい。 ばしゅっとー。
開いたッスよ、猫先生。
くっ……振っておいて突然寸劇を止めるニャ!
のってしまった吾輩のほうが、なんだか恥ずかしいニャ……!!
まあまあ、気を取りなおして先に進みましょ!
あっ、「新規作成フォーム」っていうのができてるわね。
うむ。「採用応募フォーム」のテンプレートが反映された、新しいフォームができたんだニャ。
まずここまでの冒険をセーブ……いや、保存するニャ。右上の「保存」を押すニャ。
はーい。セーブしたッス!
……うむ。
では、フォームの項目について詳しく説明していくニャ。
うんうん、ここで項目のテキストを変えたり、項目自体の追加・削除をするのね♪
えっと、今フォームに入ってる内容は、っと……
内容は、現行の古いページと同じで頼むとの社長の指示を受けたニャ。
ということで、古いページの採用情報を開くニャ、鳥太。
はーい。ぽちっとー。
あ、このページ懐かしいッスね。
オレ、ここから申し込みしたッスよ。
わたしは大学の紹介で受けたから、始めて見るけど……
氏名、性別、年齢、メールアドレス、最終学歴、資格、志望動機・自己PR……けっこう項目少ないのね。
送信したら「詳しくは面接で!」みたいな返信がきたッスよー。
履歴書の内容をまるまる入力する感じのページはオレ疲れるんで、ここらへんも好印象だったッス。
鳥巣株式会社は、主に志望動機と自己PRで面接を決めるからニャ。
「項目を追加」ボタンや、カーソルを合わせて項目の移動・編集などを行って編集するニャ、鳥太。
了解ッス! 一番上の氏名から~……
できたッス!
よし!
では、次にデザインを設定するニャ。
「デザイン」タブを開くと、テンプレートを選ぶことができるニャ。
いろんな色から選べるのね。
会社やお店のイメージにあわせられて便利ね♪
うむ。気軽に色を設定できるのは嬉しいことニャ。
鳥巣株式会社は青が基調だから、青系のデザインを選ぶと統一感があるニャ。
なるほどッス!
じゃあ、この「プリセット/Blue」ってやつにするッス!
よし。
では、仕上げに詳細設定を設定するニャ。
ここでは、申し込みがあったときの通知メールの受取先を決めたり、申し込みが終わった相手にメールを自動で送る設定をつけたりできるニャ。
へえ、めっちゃ便利ッスね!
うむ、そうなんだニャ。
鳥巣株式会社は手動で返信しているから、今回は通知メールの設定だけするニャ。
はーい。これッスね! ぽちぽちっとー。
他の設定の詳細については、Feather cloudサポートサイトの「フォームの詳細設定をする」を見てみてね!
よし!
では、作成したフォームをページに配置するニャ!!
うんうん、あと一息ね!
はーい! がんばるッス!
よいしょー!!
できたッス!!
よーし!
プレビューするニャ!!
うむ!! できたニャ!
おおお!
これで新卒採用もばっちりッス!
すっきりして、見やすくなったわ!
これなら、このサイトからの申し込みも増えそうね♪
は~、設定多くて疲れたッス……。
でも、無事に申し込みフォームが完成して嬉しいッス!!
Feather cloudがなかったら、オレじゃ絶対作れなかったッスよ!
うむ! 項目の設定をしていけばフォームが作れる……素晴らしいことニャ。
実際に白紙の状態から作ると、まず、ちゃんと動くようにフォームのソースを組むところから大変だからニャ。
Feather cloudさまさまね♪
さて、やっぱり今回は雑談する尺がなかったみたいね!!
次が最終回なのに、雑談カットなんッスね……。
うう、残念ッス。。
そう気を落とすニャ、鳥太。また来週があるニャ。
来週は作ったページ同士をつなげる「リンクの貼り方」と、サイト作成のラスボス、公開を行うニャ!
最後まで気合入れていくニャ!!
次回「最終回もきっちりレクチャー!猫先生よ永遠に!!」お楽しみに!