フォームに背景画像を追加する

フォームに背景画像を追加する方法を知りたいですか？CSSを使用して、フォームの背景に画像や色のグラデーションで簡単にスタイルを設定できます！

このチュートリアルでは、フォームに背景画像を追加する方法を説明します。

---

1. 背景画像の選択

まず、フォームの背景として使用する画像を選択する必要があります。メディアライブラリの画像、またはサイトからアクセスできるインターネット上の任意の画像を使用できます。

考慮事項

最大限の可読性を確保するために、背景画像と、フォーム内のテキストまたはフィールドとの間に十分なコントラストがあることを確認してください。

たとえば、明るい背景に明るいテキストを使用することは避けてください。代わりに、明るい背景に暗いテキスト、暗い背景に明るいテキストを使用してください。

2. フォームの選択

次に、カスタマイズしたいフォームを選択します。まだフォームを作成する必要がある場合は、WPForms » 新規追加をクリックして新しいフォームを追加してください。

開始するには、多くの利用可能なフォームテンプレートから選択できます。

デフォルトのいずれも要件に合わない場合は、同様のテンプレートを選択して、フォームビルダーでカスタマイズすることもできます。

3. フォームへの背景画像の追加

フォームビルダーで、設定 » 一般 » 詳細設定に移動します。

ここで、フォームCSSクラスの下にクラス名を入力します。クラス名は自由に設定できますが、接頭辞としてwpf-を追加することをお勧めします。これにより、カスタムCSSコードとサイトのテーマまたはプラグインとの競合を回避できます。

既存の画像の使用

メディアライブラリの画像を使用したい場合は、完全な画像URLが必要です。これを入手するには、まずWordPress管理ダッシュボードからメディア » ライブラリに移動します。

ここで、使用したい画像をクリックします。

開いたダイアログボックスで、URLをクリップボードにコピーをクリックします。

これにより、画像URLがクリップボードにコピーされます。

これを行ったら、WordPress管理ダッシュボードに戻り、外観 » カスタマイズに移動して、追加CSSを選択します。

次に、background-image プロパティを持つカスタムクラスを作成し、先ほどコピーした URL を貼り付けます。

以下にそのようなクラスの例を作成しました。/path/wpforms-backdrop.png を実際の画像の URL に置き換えることを忘れないでください。

設定は次のようになります。

コードが正しいことを確認したら、公開 をクリックして変更を保存します。

コードにエラーがなければ、フォームに背景画像が表示されます。上記のコードを使用したフォームの例を次に示します。

グラデーションを背景画像として使用する

CSS では、カラーグラデーションを画像として使用でき、このソリューションはフォームでも機能します。グラデーションは高度にカスタマイズ可能で、任意の数の色を使用できます。

グラデーションは自動生成されるため、メディアライブラリやインターネット上の他の場所からソース画像を取得する必要はありません。これにより、速度と独自性が向上するという利点があります。ソース画像が失われる心配もありません。

CSS で利用できるグラデーションには 3 種類あります。

• conic-gradient()
• linear-gradient()
• radial-gradient()

この例では、単純な線形グラデーションをフォームの背景として使用する方法を示します。以前と同様にクラスを記述するだけで、URL の代わりに CSS 関数 linear-gradient() を使用します。

これがどのように機能するかを確認するには、以下のコード例を参照してください。

.wpf-custom-background {
    background-image: linear-gradient(#0299ed, #FFFFFF) !important;
    /*Padding isn't necessary, but highly recommended*/
    padding: 15px 35px !important;
}

これにより、フォームの背景画像としてソフトな青から白へのグラデーションが生成されます。

よくある質問

以下に、フォームに背景画像を追加することに関するよくある質問への回答をいくつか示します。

Conversational Forms アドオンを使用するフォームに背景画像を追加するにはどうすればよいですか？

上記の方法で背景画像を追加しても、フォームには適用されません。これは、会話型フォームが異なるスタイリング オプションを使用するためです。

Conversational Forms アドオンを使用するフォームに背景画像を追加するには、#wpforms-conversational-form-page CSS セレクターを使用する必要があります。以下にコード例を示します。url() プロパティのパスを、使用する実際の画像に置き換えてください。

#wpforms-conversational-form-page {
     background-image: url(/path/wpforms-backdrop.png) !important;
     background-position: center; /* Center the image */
     background-repeat: no-repeat; /* Do not repeat the image */
     background-size: cover;
}

以上です！これで、WPForms のフォームに背景画像を追加する方法がわかりました。

次に、コードを使用せずにフォームをスタイルする方法を知りたいですか？CSS Hero で WPForms をカスタマイズするガイドをご覧ください。