WordPressでフォームを1行で表示する方法(簡単な方法)

フォームを1行で表示しますか?

単一行フォームを使用すると、フォームの配置に柔軟性が加わります。これは、サイトのトラフィックの多いエリアにフォームを簡単に追加して、コンバージョンを向上させることができることを意味します。

この記事では、WordPressでフォームを1行で簡単に表示する方法を紹介します。

WordPressでフォームを1行で表示する方法(簡単な方法)
WordPressで1行のフォームを表示する理由
単一行フォームを使用すると、フォームを配置する場所をより柔軟に選択できます。このスタイルのフォームは1行しかないため、スペースをあまりとらず、既存のコンテンツと簡単に統合できます。

メールマガジンの登録フォームは、ブログ投稿のコンテンツの上または下に1行で表示されることがよくあります。単一行フォームは、Webサイトのランディングページ、連絡先ページ、およびその他の重要なページでもうまく機能します。

より多くのサブスクライバーとリードを生成するだけでなく、あらゆる種類のフォームを1行のフォームに変えることができます。たとえば、ページのスペースを節約するために、お問い合わせフォームを1行で表示するのが理にかなっている場合があります。

そうは言っても、WordPressWebサイトに1行のフォームを表示する方法を紹介しましょう。

WordPressで単一行フォームを作成する
このチュートリアルでは、WPFormsプラグインを使用して単一行フォームを作成します。これは、500万を超えるウェブサイトで使用されているWordPress用の最高のリード生成プラグインです。

WPForms
ドラッグアンドドロップビルダーを使用して、サイトの任意のフォームをすばやく作成できます。さらに、人気のあるEメールマーケティングツールと統合されているため、Eメールリストを簡単に増やすことができます。

プラグインにはさらに多くの機能を備えたプレミアムバージョンがありますが、このチュートリアルでは、シンプルなフォームを作成してコンスタントコンタクトに接続してリードを生成できるライトバージョンを使用します。

最初に行う必要があるのは、プラグインをインストールしてアクティブ化することです。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。

その後、WordPress管理パネルでWPForms»Add Newに移動し、フォームに名前を付けます。次に、フォームテンプレートを選択する必要があります。

「オプトインフォーム」テンプレートを選択します。テンプレートにカーソルを合わせて、[テンプレートを使用]ボタンをクリックするだけです。

フォームテンプレートを選択
これにより、ドラッグアンドドロップフォームビルダーが表示されます。

選択したテンプレートには、名前とメールのフィールドと送信ボタンが自動的に含まれていることがわかります。

WPFormsはフォームビルダーをドラッグアンドドロップします
すべてのフィールドは、それらをクリックして左側の列に変更を加えることで編集できます。

フィールドをドラッグアンドドロップして、順序を変更することもできます。

WPFormsフォームエディタパネル
フィールドのカスタマイズが完了したら、フォームを1行で表示できます。

これを行うには、[設定]»[一般]に移動し、[詳細設定]ドロップダウンタブをクリックします。

詳細設定のフォームに移動
次に、[フォームCSSクラス]ボックスに「inline-fields」と入力します(引用符は含みません)。

これにより、そのCSSクラスがフォームに適用されます。 WPFormsには「inline-fields」クラスのスタイルが含まれているため、フォーム全体が1行で適切に表示されます。

インラインCSSクラスを追加します
その後、フィールドラベルを非表示にすることで、フォームをさらに小さくすることができます。

[フィールド]ナビゲーションオプションをクリックし、[詳細設定]メニューオプションを選択し、[ラベルを非表示]トグルをクリックしてオンにします。

フォームラベルを非表示にするトグル
次に、すべてのフォームフィールドラベルに対して同じことを行う必要があります。

その後、同じ[詳細設定]セクションで、[プレースホルダー]ボックスにテキストを入力できます。

これにより、各フォームフィールドの目的がユーザーに通知されます。

フォームプレースホルダーテキストを追加する
フォームのカスタマイズが完了したら、必ず[保存]ボタンをクリックして変更を保存してください。

フォームを使用してリードを生成している場合は、フォームをメールマーケティングプロバイダーに接続できます。詳細については、メールマガジンを正しい方法で作成する方法に関するガイドをご覧ください。

WordPressWebサイトに単一行フォームを追加する
次に、1行のフォームをWebサイトに追加します。任意のページ、投稿、またはウィジェット領域に追加できます。

既存のページに追加しますが、WordPressブログの別の領域に追加する場合も同様のプロセスになります。

単一行フォームを表示するページを開き、[プラス]ブロック追加アイコンをクリックして、[WPForms]を検索します。

WPFormsブロックを追加
次に、「WPForms」ブロックをクリックしてサイトに追加します。

これにより、前に作成した単一の線のフォームを選択するためのドロップダウンボックスが表示されます。

ドロップダウンから単一行フォームを選択します
フォームを選択すると、プラグインはコンテンツエディタ内にフォームのプレビューをロードします。次に、[更新]または[公開]ボタンをクリックして、新しいフォームを公開します。

これで、Webサイトにアクセスして、新しいフォームの動作を確認できます。

単一行フォームの例
この記事が、WordPressでフォームを1行で表示する方法を学ぶのに役立つことを願っています。また、無料の電子メールドメインを取得する方法に関するガイドや、無料のオプションを備えた最高の仮想ビジネス電話番号アプリの専門家による選択もご覧ください。

この記事が気に入った場合は、WordPressビデオチュートリアルのYouTubeチャンネルに登録してください。 TwitterやFacebookでも私たちを見つけることができます。

コメントする