OWLetのすごいところ vol.5 オリジナルレイアウトフォーム

  • このエントリーをはてなブックマークに追加
「OWLetのすごいところ vol.3 簡単フォーム構築」では如何に簡単にフォームが作成出来るか、
「OWLetのすごいところ vol.4 フォームと規約文章連動」ではフォームと他の機能の連動を解説してきました。
OWLetフォームはまだまだ出来ることがあるんです。
今回はオリジナルレイアウトについて解説していきます。

フォームをオリジナルレイアウトで構築する

速く、簡単にフォームを構築

「OWLetのすごいところ vol.3 簡単フォーム構築」で解説していますが、 OWLetでは速く簡単にフォームを構築することが出来ます。 この時、管理画面で設定したフォーム内容はtableタグで自動的に出力されます。 table以外でレイアウトを組みたい、項目の間に他の要素を入れたい・・・ そんなご要望にもOWLetフォームは対応することが出来ます。

STEP1 管理画面設定

sample

オリジナルレイアウトのフォームを作る際に必要な設定はたった1つ。

「ページデザイン:ページ編集でカスタマイズする」にチェックをいれるだけです。

ここにチェックを入れることで、フォームの入力・確認画面に自動的にtableタグで囲まれたフォームが出力されなくなります。

STEP2 入力ページを構築する

sample

管理画面の設定後、入力・確認ページに遷移してみましょう。

画像の通り確認画面へのボタンが表示されているだけで、

テーブルや入力項目は表示されていません。

sample

ページ編集でカスタマイズするにチェックを入れると、

フォームを出力する為にレイアウトに設置している、

「システムコンテンツ」にパーツを設置できるようになります。

sample

パーツには「フォームプレースホルダ」というパーツが新しく追加されます。

このパーツをシステムコンテンツエリアに設置することで入力項目が表示されます。

sample

参考例として入力項目をカテゴライズし、見出しを設置してみました。

例では見出しとテーブルを使っていますが、

通常ページ作成時と同じく自由にパーツを使用することが出来ます。

tableタグでは実現出来ないようなデザインにすることも出来ますし、

画像やテキスト等を好きに設置することが出来ます。

 

気をつける点は1点のみ。「フォームプレースホルダを配置する」のみです。

STEP3 確認ページを構築する

sample

確認ページで気をつける点も1点のみ。

「フォームプレースホルダを配置する」のみです。

 

確認ページも基本的にまっさらな状態でボタンのみが表示されています。

入力ページ同様構築し、フォームプレースホルダを設置しましょう。

フォームプレースホルダを設置する事で、入力された値が、

確認ページで表示されるようになっています。

まとめ

フォームをオリジナルレイアウトで構築する方法は以上です。

 

毎回言っていますがものすごく簡単ではないでしょうか?

プログラム知識がないWEBデザイナーだけで簡単に高速にカスタマイズすることが出来ます。

そして覚えることは1点のみ「フォームプレースホルダを配置する」だけです。

< >

OWLet DEMOサイト利用状況

今、利用中のDEMOサイト数

site/
analyzer

OWLet イベントTOPIX

OWLetに関する旬のイベント情報をお届け!

EXPOバナー全国セミナーよくある御質問OWLetの改修要望募集WordPressの脆弱性≪ 既存サイトを撃退するひっくり返し営業法 ≫OWLetイベント情報はコチラ

【注目】OWLet動画

OWLet おもしろコンテンツ

OWLet無料相談センター

今なら無料で専門家がアドバイスします
OWLetでお悩みのことがあれば、OWLet
無料相談センターにご相談してみませんか?

今すぐ相談する

0120-307-555
受付時間 10:00~18:00 (月~金)

参考になった記事のランキング

【新着】OWLet製WEBサイト実績

OWLet製WEBサイト実績一覧へ>