市川ウェブデザイン

同一ページ内で入力、確認、完了画面へと変化する予約フォームを作りました

同一ページ内で入力、確認、完了画面へと変化する予約フォームを作りました 。

デモサイトはこちら

今回のデモサイトは、セミナーの予約フォームにしました。ランディングページなどで活用できるかと思います。

同一ページ内で入力、確認、完了画面へと変化するフォームとは?

フォームは入力画面、確認画面、完了画面を作りましたので、その流れで画面が変わります。

今回は、入力画面から確認画面へ移った時に別ページに行かないようにしました。確認画面から完了画面への移動も同様です。

要するに、入力画面→確認画面→完了画面と画面自体は変わりますが、ホームページのアドレス(URL)はそのままの状態になります。

 

どんな利点があるのか?

例えば、ランディングページでページ下部にお問い合わせフォーム、もしくは予約フォームを設置します。今回のサンプルでは、ランディングページ内でフォーム入力、確認、完了まで持っていくことが出来ます。つまり、他ページに移動することなく画面が変わって、フォーム送信まで完結することが出来ます。

普通のホームページでも今回のサンプルを利用する価値はあります。トップページ下部に、お問い合わせフォームを設定している場合がありますが、トップページ内だけで入力、確認、完了と画面が変わりフォーム送信まで完結することが出来ます。

 

仕様

  • HTML形式のお問い合わせフォーム・・・HTML形式のお問い合わせフォームを自作。
  • レスポンシブ対応・・・スマートフォン、タブレットでも見やすいデザインに対応。

 

使用目的

ホームページ(HTML形式)やランディングページのお問い合わせフォームとして使用する目的で制作。

 

特徴

予約フォームにあると良いと思われる機能を付けました。この予約フォームを元に、項目を追加・変更など様々なカスタマイズが可能です。

1.入力、確認、完了画面の表示

入力、確認、完了画面を作成。また自分がどの画面にいるのか判別できるように配色にて識別できるようにしました。

 

2.入力チェックの設置

入力必須項目(サンプルではお名前、メールアドレス)に入力チェックを設けています。文字を入力しないと確認画面へ移動しません。

3.お客様用メール、担当者用のメールを送信

予約フォームから送信されるメールを作成。お客様用、担当者用の2つのメールを作成しました。

 

以上、予約フォームのサンプルのご紹介でした。市川ウェブデザインへの制作のご依頼は、当HPのお問い合わせをご利用ください。

 

 

予約フォームのサンプルを作りました

予約フォームのサンプルを作りました。

デモサイトはこちら

 

制作した背景

普段はWordPressの「Contact Form 7」「MW WP Form」という定番プラグインを使って予約フォームを作成します。しかし、WordPressでは無いHTML形式のホームページは、自分で予約フォームをコーディングして作成する必要があります。

そこでHTML形式のホームページの予約フォームのサンプルを制作しました。この予約フォームを元に様々なカスタマイズが可能です。

 

仕様

・HTML形式の予約フォーム・・・HTML形式の予約フォームを自作。

・レスポンシブ対応・・・スマートフォン、タブレットでも見やすいデザインに対応。

 

使用目的

ホームページ(HTML形式)やランディングページの予約フォームとして使用する目的で制作。

 

特徴

予約フォームにあると良いと思われる機能を付けました。この予約フォームを元に、項目を追加・変更など様々なカスタマイズが可能です。

1.入力、確認、完了画面の表示

入力、確認、完了画面を作成。また自分がどの画面にいるのか判別できるように配色にて識別できるようにしました。

 

2.入力必須項目にアクセント

入力必須項目(サンプルではお名前、メールアドレス)の背景に色をつけてアクセントとしています。文字を入力すると背景の色が消えます。

 

3.カレンダーの表示

クリックするとカレンダーが表示されます。日付をクリックすると、日付が入力されます。日付を手動入力する手間を省いています。

 

4.個人情報の取り扱いについての記載

確認画面に個人情報の取扱についての文章とチェック項目を表示。

 

5.お客様用メール、担当者用のメールを送信

お客様用メール

担当者用メール

予約フォームから送信されるメールを作成。お客様用、担当者用の2つのメールを作成しました。

 

以上、予約フォームのサンプルのご紹介でした。市川ウェブデザインへの制作のご依頼は、当HPのお問い合わせをご利用ください。

 

 

 

お問い合わせフォームのサンプル

お問い合わせフォームのサンプルを制作しました。デモサイトはコチラ

 

制作した背景

普段はWordPressの「Contact Form 7」「MW WP Form」という定番プラグインを使ってお問い合わせフォームを作成します。しかし、WordPressでは無いHTML形式のホームページは、自分でお問い合わせフォームをコーディングして作成する必要があります。

そこでHTML形式のホームページのお問い合わせフォームのサンプルを制作しました。このお問い合わせフォームを元に様々なカスタマイズが可能です。

 

仕様

・HTML形式のお問い合わせフォーム・・・HTML形式のお問い合わせフォームを自作。

・レスポンシブ対応・・・スマートフォン、タブレットでも見やすいデザインに対応。

 

使用目的

ホームページ(HTML形式)やランディングページのお問い合わせフォームとして使用する目的で制作。

 

特徴

お問い合わせフォームにあると良いと思われる機能を付けました。このお問い合わせフォームを元に、項目を追加・変更など様々なカスタマイズが可能です。

1.入力画面、確認画面、完了画面の表示

入力画面、確認画面、送信完了画面を作成。また自分がどの画面にいるのか判別できるようにデザイン。

 

2.入力必須項目にアクセント

入力必須項目(サンプルではお名前、メールアドレス)の背景に色をつけてアクセントとしています。文字を入力すると背景の色が消えます。

 

3.住所の自動入力

郵便番号を入力すると都道府県・市町村・町域が自動表示されます。住所の手入力作業の軽減を目的としています。

 

4.同意確認の表示

確認画面に同意確認の文章とチェック項目を表示。

 

5.お客様用メール、担当者用のメールを送信

お客様用メール

担当者用メール

 

お問い合わせフォームから送信されるメールを作成。お客様用、担当者用の2つのメールを作成しました。

 

以上、お問い合わせフォームのサンプルのご紹介でした。市川ウェブデザインへの制作のご依頼は、当HPのお問い合わせをご利用ください。