デジタル化

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

( oneechanblog ) –

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

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

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

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

WordPressで1行のフォームを表示する理由

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

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

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

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

WordPressで単一行フォームを作成する

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

WPForms

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

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

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

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

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

フォームテンプレートを選択

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

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

WPFormsはフォームビルダーをドラッグアンドドロップします

すべてのフィールドは、それらをクリックして左側の列に変更を加えることで編集できます。

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

WPFormsフォームエディタパネル

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

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

詳細設定のフォームに移動

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

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

インラインCSSクラスを追加します

その後、フィールドラベルを非表示にすることで、フォームをさらに小さくすることができます。

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

フォームラベルを非表示にするトグル

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

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

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

フォームプレースホルダーテキストを追加する

フォームのカスタマイズが完了したら、必ず[保存]ボタンをクリックして変更を保存してください。

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

WordPressWebサイトに単一行フォームを追加する

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

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

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

WPFormsブロックを追加

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

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

ドロップダウンから単一行フォームを選択します

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

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

単一行フォームの例

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

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

WordPressでフォームを1行で表示する方法(Easy Way)の投稿は、WPBeginnerに最初に掲載されました。

あなたはおそらくそれも好きでしょう

より類似した投稿

コメントを残す

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

Fill out this field
Fill out this field
有効なメールアドレスを入力してください。
You need to agree with the terms to proceed

メニュー