, , ,

フォームデザイン

¥4,900.00

商品コード: ninja-forms-style カテゴリー: , , , タグ:

フォームデザイン を使用することで、フォームをカスタマイズできます。

サイト全体のコンバージョン率を向上させる上でフォームの改善は重要です。

小さな変更や多くのオプションを追加したい時は CSS の知識が必要です。

このプラグインは CSS の知識を必要とせずフォームをカスタマイズできます。

 

フォームレイアウトを変更

入力項目を複数行にする場合、ドラッグ & ドロップするだけで変更できます。

また、列と入力項目の幅はドラッグで調整ができます。

フォーム全体のレイアウトも整理できるので、訪問者に最適なレイアウトを作成しましょう。

フォームスタイルをカスタマイズ

「レイアウト」と「スタイル設定」を使用すると、フォームの外観を変更できます。

各項目の設定画面を開くだけで項目スタイルを個別に設定できます。

  • フォームに要素やラベルの追加
  • デフォルトのスタイルを要素に追加、要素タイプ、フォーム、項目ごとにスタイルの設定
  • カレンダー表示、フォーム入力完了メッセージ、偶数行の項目と奇数行の項目などのスタイルの設定
  • フォーム入力の成功、失敗メッセージの追加
  • フォームスタイルのインポートとエクスポート

レイアウトとスタイル設定を特におすすめしたい人

フォームに小さな変更を加えたいけど、CSS をほとんど知らない、またはフォームに多くのオプションや細かい制御を必要とする人におすすめです。

 

フォームデザインの使い方

 

フォームのレイアウトを変更する

レイアウトとスタイルをインストールして有効化すると、フォームビルダーにフォームのレイアウトを変更するオプションが表示されます。

ここでは、お問い合わせフォームを新規で作成したものを使って、フォームのレイアウトを変更してみましょう。

  1. サイドメニュー  >  [Ninja Forms]  >  [新規追加]  をクリックします。
    ninja-forms-style_Ninja Forms＞新規追加
  2.  [お問い合わせフォーム] をクリックします。
    ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせ
    フォームが表示されます。
    ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせフォームの表示
  3. 列の作成
    項目をクリックして、フォームの左側または右側にドラッグして、列を作成します。
    ① [メール] を [名前] の項目の右側にドラッグ＆ドロップします。
    ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせフォーム＞メール項目を移動png
    ② [名前] の右横に、 [メール] の項目が配置され、列が２列になりました。
    ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせフォーム＞２列png
  4. 行にスペースを作る
    項目を別の項目の下にドラッグして、行に空白のスペースを追加します。
    ① [メール] の項目を [名前] の項目の下にドラッグします。
    ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせフォーム＞メール項目を移動②空白
    ② [名前] と [メール] の横に空白の行が追加されました。ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせフォーム＞メール項目を移動②空白表示
  5. 項目を別の項目と同じ列に追加する
    項目を別の項目と同じ列に追加するには、そのフィールドの下にドラッグします。
    ① [本文] を [メール] の列の下にドラッグします。
    ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせフォーム＞メール項目を移動③他項目と同列
    ② [メール] の下に [本文] の項目が配置されました。
    ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせフォーム＞メール項目を移動③他項目と同列表示
  6.  空白の行を削除する
    [列の削除] をクリックして、フォームの空白のスペースを削除します。
    ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせフォーム＞メール項目を移動④削除
    削除後
    ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせフォームの表示
  7. 列のサイズを変更する
    項目間に表示されるバーをドラッグして、列のサイズを変更できます。
    ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせフォーム＞列のサイズ調整
  8. レイアウトの変更が終わったら、 画面上部の [プレビュー] ボタンをクリックします。
    ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせフォーム＞レイアウト変更後＞プレビュー
    プレビューが表示されます。
    ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせフォーム＞レイアウト変更後＞プレビュー表示画面
  9. 問題がなければ、 [公開] ボタンをクリックして、サイトに公開します。
    ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせフォーム＞レイアウト変更後＞公開

以上の方法で、フォームのレイアウトを自在に変更します。

 

フォームのスタイルを編集する

フォームのスタイル：背景、枠線や文字のサイズ、色や大きさなどを設定します。

デフォルトのフォームスタイル、デフォルトの項目のスタイル、項目スタイルタイプ、エラースタイル、または個々の項目スタイルのいずれを編集する場合でも、主に以下のスタイルを編集できます。

編集できる主なスタイル：

・背景色
・境界線の幅
・テキストの色
・高さ
・幅
・フロート（left, right, name）
・フォントサイズ
・マージン（外側の余白）
・パディング（内側の余白）

　　各項目のスタイルを編集する

  1. [高度な設定] をクリックします。
    ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせ＞高度な設定
  2. 画面の最下部の [スタイル] の項目をクリックします。ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせ＞高度な設定＞スタイル
  3. 表示された各項目を設定します。
    ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせ＞高度な設定＞スタイル設定＋完了
  4. 設定後、画面右上の [完了] ボタンをクリックします。（上図）
  5.  [プレビュー] アイコンをクリックして、フォームを確認します。
    ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせ＞高度な設定＞スタイル設定プレビュー画面
  6. 問題がなければ、 [公開] ボタンをクリックして、サイトに公開します。
    ninja-forms-style_Ninja Forms＞新規追加＞お問い合わせ＞高度な設定＞スタイル設定後＞公開

以上の方法で、スタイルを自由に設定します。

 

「レイアウト」と「スタイル設定」は、CSS をほとんど知らない方でも、自由にそして簡単にフォームをカスタマイズできます。

レビュー

レビューはまだありません。

“フォームデザイン” の口コミを投稿します

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です