超簡単！Wix フォームを使った問い合わせページの作り方

今回は、Wixのフォームを使った問い合わせページの作り方を紹介します。

初心者さん向けに基本的な操作を書いています。
目次から必要部分を読んでいただき、ホームページ作成に役立ててください。

本記事では「グラフィックデザイナーB」のテンプレートをカスタマイズしたサイトを例に解説します。

Wixの問い合わせページの作り方

Wix エディタで問い合わせページを作る方法は2つあります。

1. テンプレートに初期設定されている問い合わせページを使う
2. 問い合わせページを自作する

❶は初期設定のフォームをカスタマイズします。
❷は追加ページとして問い合わせページを作ります。

作例サイトは❶の方法でフォームを作成しました。

「グラフィックデザイナーB」の初期設定の問い合わせページはこちら

カスタマイズ後のページがこちら

順番にカスタマイズ内容を紹介します。

問い合わせフォームの設定

Wixの問い合わせフォームは、送信先メールアドレスなどの項目があらかじめ設定されています。

フォームをクリック → アイコンから「設定」を選択→「お問い合わせ設定」を表示させます。
「お問い合わせ設定」では以下の項目が設定可能です。

基本的に全て設定されているので、確認する程度でOKです。
ボクは以下の4項目を確認・修正しました。

1. 送信先のメールアドレス
2. 送信後のアクション
3. 送信完了メッセージの変更
4. 必須項目の記入漏れメッセージの変更

❶ 送信先メールアドレスの確認

メールアドレスはWixに登録したメールアドレスが自動設定されています。
問い合わせを受信したいメールアドレスに変更しましょう。

❷ 送信後のアクションの設定

問い合わせを送信したユーザーに「メッセージ」または「リンク先のページ」を表示することができます。

❸ 送信完了メッセージの変更

送信後のアクションで表示されるメッセージを設定します。

初期設定は「Success! Message received.」という英文表示です。

英文表示はお洒落で良いのですが、分かりにくいですよね。
作例は「お問い合わせが完了しました」に変更しました。

❹ 必須項目の記入漏れメッセージの変更

フォーム内の「*」マークは入力必須項目を表しています。
該当項目が未入力の場合、入力を促すメッセージが表示されます。

初期設定は、「Please fill in all required fields.」と英文表記です。
ここも分かりやすいように日本語表記をおすすめします。

作例では「必須項目は全て入力してください」に変更しました。

Wix フォームのデザインのカスタマイズ方法

基本的にはテンプレートのままでも良いと思います。
今回はWixエディタに慣れる意味でフォームのデザインを一部カスタマイズしました。

フォームをクリック → アイコンから「デザインを変更」をクリックします。

「お問合わせデザイン」のメニューが表示されます。

サンプルデザインをクリックするとプレビューに反映されます。
好きなデザインを選びましょう。

デザインの詳細を変更する時は、メニュー下部の「デザインをカスタマイズ」をクリックします。

「お問合わせデザイン」のメニュー表示が切替わり、詳細なカスタマイズが可能になります。
細かい設定が不要な方向けにプリセットも用意されています。

今回はプリセットを使いました。

プリセットの変更で影付きの問い合わせフォームができました。
とても簡単ですね。

ここまでのまとめ

サイトテンプレートに問い合わせページがある場合は、用意されたフォームをカスタマイズした方が作業効率が良いでしょう。

基本的なフォームの動作が設定済みで便利ですね。

この2点は確認しておきましょう。

次に、問い合わせページを１から作成する方法を紹介します。

Wixの問い合わせページを自作する場合は？

Wixエディタで問い合わせページを１から作成することも可能です。

① 問い合わせフォームを設置するページを用意

サンプルとして「TEST FORM」という名前で新しいページを作りました。

ページの追加方法は、Wixのサンプルサイトで解説！Wixエディタでよく使う機能と操作方法 のページで詳しく紹介しています。

② フォームのテンプレートを選ぶ

問い合わせフォームの基本デザインをテンプレートから選びます。

Wxiエディタの画面左メニューから、「追加」→「お問い合わせ」と進むと問い合わせフォームのテンプレートが表示されます。

テンプレートクリックするとWixエディタ上にフォームが配置されます。

③ デザインをカスタマイズする

問い合わせページを自作する場合もフォーム自体はWixのテンプレートを使用するため、カスタマイズは難しくありません。

• フォームタイトルの変更
• 各項目名のフォントとサイズの変更
• 項目枠にシャドウ（影）をつける
• 全体のバランス調整

基本は変更したい部分を選択、「デザインを変更」をクリックしてメニューから変更内容を選んでいけばOKです。

Wixのフォームカスタマイズに使う操作

Wixエディタでフォームを作る際に使う機能と操作方法をまとめます。

カラム数を変更する

フォームを選択して「レイアウト」をクリック→「レイアウトを選択」からカラム数を変更できます。
カラム数はシングルカラムまたは2分割から選択可能です。

フォームの項目表記を編集する

フォーム内の項目を選択→「項目を編集」をクリックします。
ここで設定できるのは以下の内容です。

項目のタイトル表示

オンにすると「項目のタイトル」が表示されます。

プレースホルダー

各項目の枠内に表示される文字です。基本は項目のタイトルと同じで良いでしょう。

必須項目に設定

チェックを入れると必須項目を示す「*」マークが表示されます。
必須項目のマークは「項目のタイトルを表示」をオンにした時に表示されます。

項目名を入力

サイト上には表示されません。送信されるメールに表示される項目名です。

Wixコンタクト

フォームに入力された名前・電話番号・メールアドレスなどが連絡先として同期されます。基本は初期設定のままでOKでしょう。

フォームの項目を削除・追加する方法

項目を削除する

テンプレートに不要な項目がある場合は削除できます。
フォームを選択し「項目を管理」をクリックするとフォームの項目がリスト表示されます。
リストから不要な項目を削除すればOKです。

項目を追加する

フォームを選択し「項目を管理」をクリックします。
リストの最下部にある「＋新しい項目を追加」をクリックすると追加できる項目が表示されます。

選択した項目がフォームの最下段に追加されます。
追加項目はドラッグで位置調整が可能です。

最後に、今回のまとめ

Wixで作ったサンプルを例に、問い合わせフォームの作り方を紹介しました。

テンプレートサイトに問い合わせフォームが設置されてる場合は、そのデータをカスタマイズした方が進めやすいと思います。

Wixって面白そうだなと感じた方はぜひチャンレジしてください。
操作はとっても簡単ですよ。

それでは、今回はこのへんで。

Wixのまとめ記事はこちら