OWLetのすごいところ vol.3 簡単フォーム構築

  • このエントリーをはてなブックマークに追加
OWLetではプログラムの知識は一切不要でブラウザ上で簡単にフォームを構築することができます。
実際の構築フローを解説します。

step1 レイアウトを設定する

まずはレイアウトを作成

sample

まずはレイアウトを作成します。

下層ページ用と同階層にフォーム用のレイアウトを作成しましょう。

sample

フォームレイアウトの中身は下記パーツ構成で構築しています。

(筆者の構築例です。フォームレイアウトに必須の項目はシステムコンテンツになります)

 

・セクション:フォームページのセクション枠

・ページ名見出し:ページ名見出しを選択することで自動的にフォーム名を取得します。

・継承エリア:見出し下にテキストを配置する為の継承エリア

・枠:class「inquiry_form」を設定します。

・システムコンテンツ:システムコンテンツを設置した箇所にフォームが出力されます。必ず必要です。

 

以上でレイアウトの設定は完了しました。

step2 管理画面の設定

sample

管理画面でフォームの設定を行っていきます。

「setting」→「フォーム」から設定します。

 

フォームを作成する為に項目を設定していきます。

 

フォーム種別:一般的なお問合せ、資料請求、注文受付、求人関連、予約申込み

※種別による機能の差はありません。管理画面TOPでのアイコンが変わります。

レイアウト:作成したフォーム用を選択

ページURL:inquiry

ページ名:入力・確認・完了があります。レイアウトにページ名見出しを設置したことにより、ここに設置したものがh2として出力されます。

ページデザイン:オリジナルレイアウトのフォームを作成できます。今回は割愛

必須マーク:必須項目のマークを設定します。

入力項目設定

sample

フォームの入力項目を設定していきます。

 

一覧表示:お問合せ一覧に項目を表示するか設定します。

必須入力:必須項目の有無を設定します。

コード:英語で項目のコードを指定します。わかりやすいものを指定しましょう。

(例)名前:name

コードは自動返信メールの変数に使用されます。

入力例等:項目の下にテキストを表示します。

入力タイプ:項目に対応したものを選択します。

 

基本的にアーティクルの項目設定と違いはありません。
ここで気をつける点は入力タイプにメールアドレスを選択時、
「通知用メールアドレス」にチェックを入れましょう。

自動返信設定

sample

入力項目の設定後は自動返信設定を行いましょう。

自動返信設定ではお問い合わせ者と管理者への設定が行なえます。

 

自動返信:有効にチェックを入れます。

送信元メールアドレス:メール送信元アドレスを設定します。基本的にサイトドメインアドレスになります。

件名:メール件名を入力します。

本文(テキスト):メール本文を入力します。

本文(HTML):HTMLメールの設定が行なえます。

 

メール設定の右には変数が表示されます。
入力項目で設定したものが全て表示されます。
件名、本文にコピペすることで自動返信メールに項目に入力された値が変数に出力されます。

これで管理画面側の設定は一通り完了です。

step3 入力・確認・完了画面を設定する

sample

ページ管理を表示します。

管理画面で設定したページが生成されているのが確認できます。

sample

ページを確認してみましょう。

事前にレイアウト設定をしたので表層はほぼ完成しています。

 

見出しには管理画面で設定したページ名が表示され、

class「inquiry_form」の中のテーブルに事前にスタイルを設定しておくことで、フォームの見た目も入っています。

残り必要なものは「入力」「確認」「完了」ページのテキスト文になります。

ページ管理からそれぞれのページに遷移しテキストを配置して完了となります。

 

以上でフォームの構築は完了です。

ものすごく簡単ではないでしょうか?
この流れを覚えてしまえばフォーム1基構築するのに15分もかからないでしょう。
プログラマいらずのOWLetならではの簡単構築が可能となっています。

< >

OWLet DEMOサイト利用状況

今、利用中のDEMOサイト数

site/
analyzer

OWLet イベントTOPIX

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

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

【注目】OWLet動画

OWLet おもしろコンテンツ

OWLet無料相談センター

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

今すぐ相談する

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

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

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

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