ダブスト

日本のスモールビジネスに武器を

ホーム chevron_right プラグイン chevron_right 機能から探す chevron_right WordPress プラグイン chevron_right ページ作成・カスタマイズ chevron_right フォーム作成 chevron_right Ninja Forms chevron_right アドオン chevron_right Layout and Styles chevron_right Ninja Forms – Layout and Styles の使い方 (3.0.29)

Ninja Forms – Layout and Styles の使い方 (3.0.29)

 

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

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

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

  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 をほとんど知らない方でも、自由にそして簡単にフォームをカスタマイズできます。