Mailrelayを使用してランディングページにサブスクリプションフォームを追加する方法

マーケティングを担当している場合は、効果的な販売戦略の一環としてランディングページを作成することの重要性に関する情報を読んでいることでしょう。 サブスクライバー、リード、または顧客を獲得する必要がある場合は、この機能の操作方法を学ぶ必要があります。

ご存知のように、ランディングページは、広告やバナー（Facebook、Google、その他のプラットフォーム）をクリックした後にサイトを見つけた訪問者を受け入れるために設計されたページです。 その使用はますます普及しており、ほとんどの場合、その主な目的はリードを獲得するか、コンバージョンを生成することです。

ランディングページは、コンバージョンを生成するという1つの目的で作成されたページです。 一般的に言って、このページにアクセスするユーザーはあなたが提供しているものに興味を持っています。 効果的なランディングページを作成することは、ページのデザインやコンテンツなどのさまざまな側面を考慮する必要があるため、芸術です。 ランディングページが何であるかをすでに知っていて、マーケティング戦略でこのオプションを使用したい場合。 Mailrelayサブスクリプションフォームをランディングページに追加して、リードとサブスクライバーを獲得する方法を説明します。

重要な説明：この投稿では、 Mailrelayでサブスクリプションフォームを作成し、使用するHTMLコードをコピーしたことを前提としています。 したがって、このコードをランディングページに統合する方法の説明に焦点を当てます。 フォームを作成していない場合、またはHTMLコードをコピーしていない場合は、次の別の投稿を確認することをお勧めします：MailrelayV3サブスクリプションフォーム。

・WordPressのランディングページにサブスクリプションフォームを追加する方法

オプション1：Elementorの使用

Elementorについては他の記事ですでに話しました。 これはWordPressで利用できる強力なプラグインで、無料版と有料版があります。 ランディングページをすばやく簡単に作成および編集するための理想的なオプションです。

WordPressを使用してサイトを作成した場合、プロセスが簡単でシンプルになるため、このプラグインを使用してランディングページを設定することを強くお勧めします。 プラグインをまだインストールしていない場合は、WordPressリポジトリから無料でダウンロードし、それを使用してランディングページを作成できます。 はじめましょう？

WP管理パネルに入ったら、「ページ」をクリックして新しいページを追加する必要があります。

この新しいページを使用して、訪問者に表示されるコンテンツを挿入する必要があります。 この場合、レイアウトの編集を開始する前に、事前に調整を行うことをお勧めします。 たとえば、セクションに名前を付けたり、テンプレートを選択したりする必要があります。

トップバーメニューのないランディングページをよく目にします。 これは、訪問者が他のリンクをクリックして「エスケープ」するのではなく、コンテンツのみに集中するようにする場合によく使用されます。 これは、オンラインキャンペーン用に作成されたランディングページで特に役立ちます。

この対策を実装してランディングページのナビゲーションメニューを削除する場合は、右側の列で属性を探す必要があります。 このオプションを見つけたら、テンプレートセクションで「ElementorCanva」を選択して作業を保存します。

その後、Elementor Builderを開き、[ Edit with Elementor ]をクリックして、使用する構造に従ってランディングページの作成を開始します。

ページを作成したら、サブスクリプションフォームを実装する必要があります。 この場合、HTMLコードを取得してページに挿入できます。

これを行うには、「コード」モジュールを探して、必要な列またはセクションに含める必要があります。 配置したら、この記事を読み始める前に、コピーしたコードを挿入する必要があります。 この場合、Mailrelayによって生成されたコードを貼り付けて、ランディングページに埋め込む必要があります。

フォームを追加すると、結果は次のようになります。 構造と設計は、インストールしたモジュールと要素によって異なることに注意することが重要です。

この時点で、フォームはテンプレートまたはテーマでマークされた外観とスタイルで表示されることを指摘したいと思います。 スタイルを変更または変更するには、HTMLを編集するか、特定のプラグインを使用してオプトインフォームをカスタマイズする必要があります。

オプション2：Diviを使用する

Diviは、WordPressでサイトを作成するために最もよく使用されるテンプレートの1つです。 このテンプレートは、数回クリックするだけで魅力的でカラフルなページを作成できる強力なビジュアルビルダーを提供するため、非常に人気があります。

Diviは現在プレミアム（有料）ツールであり、WordPressのテンプレートおよびビジュアルビルダーとして利用できます。 サイトがこのテンプレートで作成されている場合、またはDivi Builderプラグインをインストールしている場合は、Diviを使用してランディングページにサブスクリプションフォームを追加する方法を段階的に説明するので、読み続けてください。 はじめましょう？

手順は前のガイドで見たものと非常に似ているため、これから行うプロセスはElementorで見たものと非常に似ています。

まず、[ページ]セクションに移動し、[新規追加]をクリックします。

新しいページにアクセスした後、メイン設定の編集を開始します。 前の場合のように、ランディングページのトップバーを削除する場合は、右側の列で「テンプレート」オプションを探し、「空白のページ」をクリックする必要があります。

これで、サイトのこの特定のセクションにトップバーを表示したくないことをWordPressに伝えます。 おもしろいですよね？

ページに名前を付けてテンプレート設定を選択したら、変更を保存することを忘れないでください。

次に、Diviを使用してランディングページの作成を開始します。 これを行うには、「Diviビルダー」をクリックすると、プラグインがランディングページビルダーの画面を表示します。 Diviは、デフォルトで、いくつかのオプションから選択できます。デフォルトのテンプレートを使用してそれを適合させるか、最初から作成することができます。 2つのオプションのいずれかを選択できます。

ランディングページを設定したら、Mailrelayサブスクリプションフォームを挿入します。 この場合、Diviの右バーで「コード」モジュールを探して、必要な列またはセクションに挿入する必要があります。 その後、プラグインは、Mailrelayによって生成されたHTMLコードを埋め込むことができるフィールドを含むウィンドウを開きます。 HTMLフォームをまだ作成していない場合は、今すぐ生成してください。

コードを追加すると、ランディングページのようにコードがどのように役立つかを確認できます。

前の場合と同様に、フォームはテンプレートまたはテーマで定義されたスタイルで表示されます。 変更を加えるには、HTMLを手動で編集するか、外部プラグインを使用する必要があります。

・WordPressを使用せずにランディングページにサブスクリプションフォームを追加する方法

WordPressはWebサイトの作成に最も一般的に使用されているCMSの1つですが、このプラットフォームを使用せずにランディングページを作成することをお勧めします。 ただし、WPを使用していない場合は、独自のランディングページをすばやく作成するために使用できるいくつかのツールをお勧めします。

この時点で、これらのツールのほとんどは無料ではないことに注意することが重要ですが、通常は2週間以上のテストが提供されるため、サービスの使用を開始して、これが探しているものかどうかを確認できます。 ツールをテストした後、あなたはあなたがそれの支払いに興味があるかどうかを決めることができます。

この記事では、Instapressを使用してランディングページを作成する方法の説明に焦点を当てます。 このツールは、ページを手動でデザインしたくないユーザー向けに作成されているため、使用可能なテンプレートを編集したり、独自のレイアウトを作成したりできます。

最初に行う必要があるのは、無料のデモの使用を開始するためにプラットフォームに登録することです。 これを行うには、Instapageページに移動してアカウントを作成します。

プラットフォームにアクセスした後、デスクトップセクションで[新しいページの作成]をクリックして、ランディングページの作成を開始します。

ここでは、いくつかのオプションがあります。 このチュートリアルでは、最初の「標準ページ」を選択します。

このオプションを選択すると、いくつかのテンプレートから選択できる別の画面が表示されます。 ページを最初から作成する場合は、「空白ページ」オプションを選択するか、事前定義されたテンプレートの1つを選択できます。

この場合、Mailrelayによって生成されたHTMLコードを処理する必要があるため、テンプレートで使用可能なサブスクリプションボックスを使用できないことを明確にすることが重要です。

オプションを選択したら、使用し、ページに名前を追加して、オプトインフォーム用のスペースを残して、ランディングページの編集を開始します。

レイアウトを編集した後、フォームを挿入する必要があります。 上部を確認すると、いくつかのオプションが表示されます。 フォームを追加するには、 「HTML」をクリックします。

プラグインは、好きな場所に配置できるボックスを表示します。 このボックスはフォームに対応しているため、フォームを表示する場所に配置する必要があることに注意してください。 HTMLコードを入力するには、ボックスをクリックして[編集]ボタンを選択します。

ボックスは空白になり、コードを入力できます。 Mailrelay HTMLフォームを貼り付けて、[完了]をクリックします。 すべての手順を正しく実行すると、フォームがどのように表示されるかがわかります。

前の場合と同様に、フォームにはHTMLコードに埋め込まれたスタイルが含まれていないことに注意することが重要です。 したがって、カスタマイズする場合は、コードを手動で編集する必要があります。 HTMLに慣れていない場合は、Mailrelayによって生成されたデフォルトのフォームを使用することをお勧めします。

最後に、画面の右上隅にある[保存]ボタンをクリックする必要があります。

変更を保存した後、ページを公開する必要があります。 これを行うには、公開するページをクリックし、次のウィンドウで[公開]ボタンを探してクリックします。

ランディングページを永続的に投稿するには、ページのURLを設定する必要があります。 したがって、[公開]をクリックすると、システムはそれを構成するためのオプションを含むポップアップを表示します。 [URLを設定]ボタンをクリックし、利用可能なさまざまなオプションの中から、デジタルマーケティング戦略に最適なオプションを選択します。

WordPressを使用している場合は、このオプションを選択し、画面の手順に従ってページを公開できます。 WordPressを使用しない場合は、最初のオプションである「カスタムドメイン」をクリックして、ドメインの設定手順に従う必要があります。

各オプションの横に、「詳細」リンクがあります。 実行する必要のある手順の詳細を見つける必要がある場合は、このリンクをクリックしてください。 必要な変更を加えてページを永続的に公開するために知っておく必要のあるすべての情報が記載された有益なセクションに移動します。

・ 結論

あなたがオンラインビジネスを運営しているなら、あなたは確かにあなたの販売戦略の一部としてランディングページを作成する必要があるでしょう。 投稿の冒頭で説明したように、これらのページは潜在的な顧客を獲得するのに非常に役立ちます。

実際、これはデータの収集とメーリングリストの作成に広く使用されているツールです。 ほとんどのウェブマスターはデータと引き換えに「ギフト」または「餌」を提供することを好みますが、この情報を取得するための戦略は大きく異なる可能性があります。 どんな贈り物ができますか？ チュートリアル、ミニコース、ガイドを作成できます。 それはあなたの販売戦略に依存します。

このタスクを支援するために、この記事では、ランディングページを作成するためのさまざまなオプションと、Mailrelayサブスクリプションフォームをページに統合するために実行する必要のある手順を示しました。 この機会に、私たちは3つの異なるオプションに焦点を当てました。 ただし、外部HTMLを埋め込むためのオプションを提供する他のツールを使用してランディングページを作成できます。

ランディングページを使用して顧客を獲得したことはありますか？ 便利だと思いますか？