WordPressを使用してMailrelayサブスクリプションフォームを追加する方法

公開: 2019-04-16

メーリングリストを増やすために新しい購読者を引き付けたい場合は、サイトで購読フォームを提供する必要があります。 WordPressを使用している場合は、これらのフォームをブログに簡単に追加できます。

どうして? 基本的には、提供する製品やサービスに関心のある人々からデータを収集して、定期的に連絡できるようにするためです。

この時点で、あなたは考えているかもしれません:私は興味がありますが、WordPressサイトでサブスクリプションフォームを作成するために何をしなければなりませんか? 私はHTMLコードに精通していないので、シンプルで簡単なものが必要です。

このチュートリアルでは、心配しないでください。 プラグインの有無にかかわらず、WordPressを使用して作成されたWebサイトにMailrelayによって生成されたHTMLコードを追加するさまざまな方法を紹介します。

おもしろいですよね?

重要な説明:このチュートリアルでは、アカウントでオプトインフォームを作成済みであり、HTMLコードをコピー済みであると想定します。 したがって、WordPressにこのコードを追加する方法の説明に焦点を当てます。 フォームをまだ作成していない場合、またはHTMLコードをコピーしていない場合は、最初にこの他の投稿を読んで、指示された手順に従うことをお勧めします。MailrelayV3サブスクリプションフォーム

  • 1・プラグインを使用せずにMailrelayサブスクリプションフォームを統合する方法
  • 2・WordPressのMailrelayサブスクリプションフォームをElementorと統合する方法(無料版)
  • 3・WordPressのMailrelayサブスクリプションフォームをBloomと統合する方法
  • 4・結論
    • 4.1関連記事:

Envia hasta 75.000 emails gratis!

・プラグインを使用せずにMailrelayサブスクリプションフォームを統合する方法

私たちは自分自身を欺くことはできないと言ってこのチュートリアルを開始する必要があります。 私たちのほとんどは、私たちの生活をはるかに簡単にするので、私たちのサイトで私たちのためにすべてのタスクを実行するためのプラグインを見つけようとします。

ただし、当サイトに多くのプラグインをインストールすると、ページが過負荷になる可能性があることに注意してください。

これは、多くの場合、ページの読み込み時間が長くなることを意味し、SEO戦略とユーザーエクスペリエンスに直接影響します。

これらすべてについて、Webサイトの過負荷を回避したい場合、またはWPサイトにプラグインを追加インストールしたくない場合は、プラグインなしでHTMLコードをWebサイトに直接統合できます。

どのように?

次の手順に従います。

開始するには、WordPressにログインし、[外観]と[ウィジェット]をクリックする必要があります

ウィジェットセクションで、「カスタムHTML 」という名前のウィジェットを見つける必要があります。 見つけたら、オプトインフォームを追加するウィジェット領域にドラッグできます。

デフォルトでは、WordPressのページのサイドバーにウィジェット領域があります。

そこに挿入するか、テーマまたはテンプレートでウィジェットの他の領域が有効になっている場合は、場所を変更できます(フッターなど)。

この場合、すべてのWordPress Webサイトにデフォルトでこのオプションがあるため、ウィジェットの最も一般的な領域に追加します。 サイドバーにHTMLコードを追加しましょう

ウィジェットをこの領域にドラッグし、タイトルを追加して、Mailrelayによって生成されたコードを貼り付けるだけです。 このチュートリアルを読み始める前に、すでにHTMLコードを生成していることを忘れないでください。

ウィジェットに名前を付け(タイトルセクションに)、コードを挿入した後(コンテンツセクションに)、[保存]ボタンをクリックする必要があります。

後で、すべてが正常に機能しているかどうかを確認するために、ブログにアクセスできます。サイドバーにサブスクリプションフォームが表示されます。

ya tienes incorporado el formulario

*フォームには、テンプレートまたはテーマで構成されたスタイル(色とフォント)があることに注意してください。

この場合、フォームをサイドバーに統合する方法を見てきました。 サイトでウィジェットの他の領域が有効になっている場合は、前に説明したのと同じ手順に従うことができますが、ウィジェットをその領域にドラッグする必要があります。

結果は同じになります。 唯一の違いは、オプトインフォームがサイドバーではなく、指定された領域に表示されることです。

Como integrar un formulario de suscripcion de Mailrelay en WordPress con Elementor (version gratuita)

・WordPressのMailrelayサブスクリプションフォームをElementorと統合する方法(無料バージョン)

MailrelayサブスクリプションフォームをWordPressとElementor(無料版)と統合する方法

Elementorは、現時点で最も有名なWordPressレイアウトデザイナーの1つであり、実際、オプトインフォームを編集するために最も使用されているプラ​​グインの1つです。

その主な機能の中には、多くの機能を備えた無料バージョンがあります。これにより、ユーザーはお金をかけずに魅力的でパーソナライズされたセクションを作成できます。

Elementorは現在無料で利用できるプラグインで、機能が制限されており、有料/プレミアムバージョンといくつかの追加オプションがあります。

ただし、無料版と有料版のどちらを使用しているかは関係ありません。Mailrelayフォームを目的のセクションと場所に統合することができます。 ほんの数ステップでそれを行う方法を学びます:

最初の要件は、Elementorプラグインをサイトにインストールすることです。 まだインストールしていない場合は、[プラグイン]タブに移動し、[新規追加]をクリックする必要があります

plugins y hacer clic en “anadir nuevo”

WordPressリポジトリで「Elementorpagebuilder」を検索し、[インストール]をクリックします。

Busca en el repositorio de WordPress “Elementor Page Builder” y haz clic en Instalar.

インストールしたら、忘れずに有効にしてください。そうすれば、コードを統合する準備が整います。

統合を開始するには、サブスクリプションフォームを入力するページまたはセクションを開く必要があります。 このセクションにアクセスした後、HTMLコードモジュールを探す必要があります。

tendras que buscar el modulo de codigo HTML.

見つかったら、フォームを表示するページの列またはセクションにモジュールを追加します。 問題の領域にドラッグした後、前に保存したHTMLコードを貼り付ける必要があります。

pega el codigo HTML que habiamos guardado con anterioridad.

HTMLコードを入力すると、選択したセクションまたは列のサブスクリプションフォームでフォームがどのように使用できるかがわかります。 すべてが正しいことを確認し、変更を公開します。 結果はあなたのサイトに表示されます:

veras como aparece el formulario

前に述べたように、この場合と前の場合の両方で、フォームにはテンプレートまたはテーマで設定されたスタイルがあることに注意することが重要です。

スタイルを変更または修正するには、HTMLを編集するか、サブスクリプションフォーム(Bloomなど)をカスタマイズできる特定のプラグインを使用する必要があります。

Como integrar un formulario de suscripcion de Mailrelay en WordPress con Bloom

・WordPressのMailrelayサブスクリプションフォームをBloomと統合する方法

Bloomは、サブスクリプションフォームを作成するために見つけることができる最も完全なプラグインの1つです。 このプラグインをWordPressに既にインストールしている場合、またはライセンスの購入を検討している場合は、このプラグインをMailrelayアカウントと統合する方法について説明します。

管理パネルにアクセスした後、最初にすべきことは、ブルーム/オプトインフォームをクリックすることです。 このタブでは、作成済みのすべてのサブスクリプションフォームを見つけることができます。 この場合、Mailrelayと簡単に統合する方法を学ぶために、新しいフォームを最初から作成します。

Bloom/ optin forms

新しいフォームを作成するには、画面上部の「新しいオプトイン」の青いボタンをクリックするだけです。 」または新しいフォーム。

作成するフォームのタイプを選択する必要があるドロップダウンリストが開きます。 「インライン」オプションを選択しましょう。これにより、後で必要なセクションまたはページに実装できるようになります。

Escogeremos la opcion “inline”

次のウィンドウで、新しいフォームの構成を開始する必要があります。 最初にすべきことは、内部で識別できるように名前を付けることです(この名前はあなただけに表示され、訪問者には表示されません)。

その後、メールプロバイダーを選択する必要があります。 この場合、MailrelayからのHTMLコードがあるので、ドロップダウンリストの一番下に直接移動して、[カスタムHTMLフォーム]オプションを選択できます。

Custom HTML form

このオプションを選択するとすぐに、フォームのスニペットコードを挿入できる灰色のボックスが表示されます。 この場合、Mailrelayによって生成されたHTMLコードを貼り付けて、[次のオプトインの設計]ボタンをクリックする必要があります。

“Next, design your optin”

以下では、さまざまな色とスタイルのさまざまなフォームを見ていきます。 ページの配色に合わせて、サイトのレイアウトに応じて最適なオプションを選択する必要があります。 すでにコードを導入しているため、スタイルはプラグインによって表示されるものと同じではないことを理解することが重要ですが、最終的な結果は通常かなり良好です。

次のステップは、フォームで使用するフィールドをカスタマイズすることです。 「オプトインタイトル」では、フォームヘッダーに目立つように表示されるタイトルを入力する必要があります。 タイトルを入力したくない場合は、このフィールドを空白のままにすることができます。

その後、フォームのテキストに記入する必要があります。 訪問者がニュースレターを購読する理由、または購読と引き換えに購読者に提供するものを説明することを検討している場合、これはこのすべての情報を追加するために使用する必要があるフィールドです。

texto del formulario

画像を調整できます。 ブルームの標準テンプレートのほとんどは上部に画像が含まれていますが、たとえば、画像を変更したり、ロゴに置き換えたりする場合は、このセクションでこれを行う必要があります。

スタイルのセクションに来ました。 サブスクリプションフォームをさらにカスタマイズしたり、フォント、色、背景、またはその他の美的側面を変更したりする場合は、ここが最適です。 オプトインスタイリングとフォームスタイリングでは、多くのオプションと選択肢から選択できます。

その後、フォームをカスタマイズするためのいくつかのオプションがあります。 フッターにテキスト(説明や簡単なコメントに最適)と確認メッセージを追加できます。確認メッセージは、訪問者がニュースレターを正常に購読した後に表示されるテキストです。

すべてのフィールドを設定したら、 「保存」をクリックして作業を保存できます。 [保存]をクリックすると、プラグインによって画面が表示され、アクティブなオプトインフォームがすべて表示されます。

さて、私たちはすでにブルームフォームを作成して構成しました。 次のステップは、それを私たちのサイトに正しく統合することです。

そのために、ブルーム/オプトインフォームで、作成したばかりのフォームを探します。左側に、この記号「[]」があります

Bloom/optim forms

それをクリックすると、このフォームのショートコードを含む新しいウィンドウが表示されます。 後で使用する必要があるため、このコードをコピーするか、どこかに保存してください。

ventana con el shortcode

ショートコードをコピーした後、このフォームを表示するWebサイトにショートコードを追加する必要があります。 ElementorやDiviのような視覚的なレイアウトがある場合は、コードモジュールやショートコードを使用してどこにでも統合できます。

それどころか、WordPressによって作成された新しいシステムであるGutenbergをすでに使用している場合は、この目的のために埋め込まれたウィジェットを使用してショートコードを統合できます。

したがって、ページまたはセクションを開いて編集する必要があります。 アクセス後、「+」ボタンをクリックし、ウィジェットで「ショートコード」ブロックを選択します。 その後、前に保存したコードまたはショートコードを入力する必要があります。 ここでは、コンテンツを貼り付けて変更を保存するだけです。

Pegaremos el contenido y guardaremos los cambios.

これらの手順を実行すると、新しいフォームがサイトで利用できるようになります。 プロセスはあなたが思っていたよりずっと簡単ですよね?

・ 結論

記事全体で見てきたように、WordPressを使用してMailrelayHTMLフォームを統合するための多くのオプションがあります。 この投稿では、コードを操作する恐れをなくすために、簡単だと思われる方法に焦点を当てたいと思いました。

これまで見てきたように、ウィジェットセクションを介して、またはWordPressが提供する新機能であるGutenbergを使用して、プラグインなしでMailrelayをWordPressと統合できます。

ただし、Divi、Elementor、その他のオプトインプラグインなどのビジュアルエディタがすでにある場合は、それらを使用して、必要な場所にフォームを追加することもできます。 ブルームの場合、私たちが持っている主な利点は、プラグインを使用すると、フォームスタイルを簡単に編集して、よりパーソナルなタッチを与え、コードをサイトのレイアウトに適合させることができることです。

ただし、既にHTMLに精通していて、コードに変更を加えたり、スタイルや色を追加したりする場合は、それも可能です。 もちろん、オプトインフォームが正しく機能しない場合は、メールマーケティング戦略に影響を与えるため、注意が必要です。

そして今、あなたはあなたのMailrelayフォームをあなたのWordPressウェブサイトに統合したいですか?

Cristina Aguayo