header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

Wix フォーム:エディタフォームをデザインする

5分
フォームをデザインして、訪問者に独自のウェブサイトでの体験を提供しましょう。背景色をカスタマイズしたり、ボタンテキストを変更したり、影や枠線を調整して、フォームに息を吹き込みます。
カスタマイズされたライラック色の項目が表示されたお問い合わせフォームのスクリーンショット。
新旧どちらの Wix フォームを使用しているかはどうすればわかりますか?
こちらの記事で新旧 Wix フォームの違いをご確認いただけます。

デスクトップでエディタフォームをデザインする

高度なスタイルオプションを使用して、デスクトップでのフォームの表示方法をすぐにデザインできます。

デスクトップでエディタフォームをデザインする方法:

新フォーム
旧フォーム
  1. ページで該当するフォームをクリックします。
  2. 設定」をクリックします。
  3. デザイン」タブをクリックします。
  4. 利用可能なオプションを使用してフォームデザインをカスタマイズします:
    • フォームの背景:フォームの背景色、枠線の色、太さを選択します。
    • フォームの項目:フォーム項目のスタイルを選択し、不透明度、フォント、フォントサイズなどをカスタマイズします。
      ヒント:さまざまな状態(通常時、ホバー時、エラー)での項目の表示方法をデザインできます。
    • 見出し・段落:フォームテキストのフォントと色を選択します。
    • ボタン:ホバー時の表示方法など、フォームボタンをデザインします(例:「送信」ボタン、「戻る」ボタンなど)。
ボタンの色オプションが選択されたフォームの「デザイン」タブのスクリーンショット。

モバイルでエディタフォームをデザインする

モバイル画面用にフォームをデザインして、外観と操作を確実にします。

モバイルでエディタフォームをデザインする方法:

新フォーム
旧フォーム
  1. モバイルエディタ(Wix エディタ)またはモバイルブレイクポイント(Wix Studio エディタ)に移動します。
  2. 該当するフォームをクリックします。
  3. 設定」をクリックします。
  4. デザイン」をクリックします。
  5. 利用可能なオプションを使用してフォームデザインをカスタマイズします:
    • フォームの背景:フォームの背景色、枠線の色、太さを選択します。
    • フォームの項目:フォーム項目のスタイルを選択し、不透明度、フォント、フォントサイズなどをカスタマイズします。
      ヒント:さまざまな状態(通常時、ホバー時、エラー)での項目の表示方法をデザインできます。
    • 見出し・段落:フォームテキストのフォントと色を選択します。
    • ボタン:ホバー時の表示方法など、フォームボタンをデザインします(例:「送信」ボタン、「戻る」ボタンなど)。
Wix フォームのモバイルデザイン設定のスクリーンショット。
ヒント:
フォームビルダーを使用して、モバイル端末での項目の位置を編集する ことができます。
ヒント:
マルチステップフォームを作成して、サイト訪問者が完了しやすいようにフォームを管理できるセクションに分割します。