インターンでしていること2

前回に引き続き私は有限会社アップルップルでインターンで学んだことをまとめていけたらと思います。
今までは特定の箇所のテキストや画像の一部が追加・変更ができるようにしてきましたが、今回は今までと違ってお問い合わせフォームを作っていきました。

お問い合わせフォームとは

お問い合わせフォームとはwebサイトなどにあるお問い合わせを送るためのツールです。
よくwebサイトの1番下や別ページに入力欄と送信ボタンがあると思います。そちらがお問い合わせフォームで、送信ボタンを押すと入力欄に入れた情報が指定のメールボックスに届くようになっています。

課題内容

サンプルデータに静的なフォームが用意されていたので、a-blog cmsを使って動的化していきました。a-blog cmsにはフォームのモジュールがあるのでそれを使用しました。

<!-- BEGIN_MODULE Form -->

<!-- BEGIN step-->
<!-- 新規 -->
<!--#include file="/include/form/input.html"-->
<!-- END step -->

<!-- BEGIN step#reapply -->
<!-- 修正 -->
<!--#include file="/include/form/update.html"-->
<!-- END step#reapply -->

<!-- BEGIN step#confirm -->
<!-- 確認 -->
<!--#include file="/include/form/confirm.html"-->
<!-- END step#confirm -->

<!-- BEGIN step#result -->
<!-- 完了 -->
<!--#include file="/include/form/result.html"-->
<!-- END step#result -->

<!-- END_MODULE Form -->

こちらがモジュールになるのですが、最初の「新規」というところが入力画面になります。入力画面で指定された文字以外や必須項目に入力されていなかったりすると次の「修正」が表示されます。これは再入力画面になります。
入力画面や再入力画面で正しい入力がされていると次の「確認」が表示されます。これは入力が本当に正しいかの確認をする画面です。
確認画面で入力があっていた場合、次の「完了」が表示されます。こちらが送信の完了を表す画面になります。

最初はbeginnerテーマのフォームのファイルを使ってレイアウトを修正しました。ここはclass名をつけたりdiv要素をつけたりするだけだったので楽な方でした。

レイアウトの修正は完了して、いざ送信してみようと思ったら何度やっても修正画面に飛ばされてしまいました。この問題の解決が1番大変でした。
何度もコードをコードを見直してもどこもおかしいところはないので長い時間悩んでました。
そこで管理画面のフォーム設定を確認したら、コードにはない項目、必須じゃない項目が必須になっていて原因が発覚しました。
管理側も修正して、うまく動作させることができました。

残りは確認画面と完了画面のレイアウトだけでした。細かいところがどうしても崩れてしまうので修正も大変でした。

感想

かなり短くまとめましたが、4,5日かかったと思います。インターンの中で1番大変でした。コードだけではなく、管理画面にも問題があることがあると学びました。
これを加味してもa-blog cmsでフォームをつくるのは思ったより楽でした。
今回学んだことを今後に活かしていきたいなと思います。