### [フォームを1行で表示する](https://wpforms.com/docs/how-to-display-your-form-in-a-single-line/)

**公開日:** 2023年11月23日
**著者:** Umair Majeed

**概要:** フォームのすべての入力項目を1行で表示する方法をご紹介します。

**内容：**

フォームのフィールドを1行に表示したいとお考えですか？フォームを1行レイアウトにすることで、サイトの重要な場所（ホームページのトップセクションなど）に配置し、最大限の露出を得ることができます。

このチュートリアルでは、フォームを1行で表示する方法をご紹介します。

![インラインフォーム](https://wpforms.com/wp-content/uploads/2023/06/inline-form.gif "Inline Form")**注：** フォームのレイアウトをカスタマイズする際に、シンプルなドラッグ＆ドロップ操作を好む場合は、[レイアウトフィールド](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/)の使用をお勧めします。ただし、このチュートリアルで取り上げる `inline-fields` クラスは引き続きサポートされており、送信ボタンをフォームフィールドと同じ行に配置したい場合には推奨されます。

---

この例では、**名前**、**電話番号**、**メールアドレス**の3つの入力フィールドを持つフォームを作成します。

フォームの入力フィールドを1行に並べて表示するには、フォームビルダーの**設定 » 一般**に移動し、**フォームCSSクラス**フィールドにCSSクラス `inline-fields` を追加してください。

**注意：** WPFormsで`inline-fields`クラスを使用すると、WordPressテーマのスタイルと競合する場合があることにご注意ください。その結果、期待通りの表示にならない可能性があります。

![インラインフィールドのCSS](https://wpforms.com/wp-content/uploads/2021/07/Inline-fields-CSS.png)次に、フォームの高さを抑えるには、各フィールドの**詳細**セクションを開き、**ラベルを非表示**オプションを選択します。

![フィールドのラベルを非表示にする](https://wpforms.com/wp-content/uploads/2021/07/Hide-Label-for-field-1.png)次に、ユーザーへのガイダンスとなるプレースホルダーテキストを設定します。この例では、メールアドレスフィールドのプレースホルダーテキストとして**メールアドレス**を追加します。

![プレースホルダーテキストの追加](https://wpforms.com/wp-content/uploads/2021/07/add-placeholder-text.png)**注：** フォームのスタイルに合わせて送信ボタンの外観を変更したい場合は、[送信ボタンのカスタマイズに関するガイド](https://wpforms.com/docs/how-to-customize-the-submit-button/)を参照してください。

サイト上のフォームは、以下のように表示されます：

このフォームを送信するには、ブラウザでJavaScriptを有効にしてください。

名前

メールアドレス

電話番号

送信！[読み込み中](https://wpforms.com/wp-content/plugins/wpforms/assets/images/submit-spin.svg)

 **注：** 1行形式のフォームに関する別の例や、すぐに使えるテンプレートをお探しの場合は、当社の [インラインニュースレター登録フォームテンプレート](https://wpforms.com/templates/inline-newsletter-signup-form/) をご覧ください。

これで完了です！これで、1行で表示されるフォームを作成できるようになりました。

次に、フォームを通じてユーザーから送信された情報のコピーを受け取りたいですか？詳細については、[フォーム通知の設定方法](https://wpforms.com/docs/setup-form-notification-wpforms/ "WPFormsでのフォーム通知の設定方法")に関するチュートリアルをぜひご覧ください。

**カテゴリ：** スタイリング、スタイリングとカスタマイズ

---