如何使用 WordPress 添加郵件中繼訂閱表單

已發表: 2019-04-16

如果您想吸引新訂閱者以增加您的郵件列表,您應該在您的網站上提供訂閱表格。 如果您使用 WordPress,您可以輕鬆地將這些表單添加到您的博客中。

為什麼? 主要是因為它允許您從對您提供的產品或服務感興趣的人那裡獲取數據,以便您可以定期與他們聯繫。

此時,您可能會想:我很感興趣,但是我必須做什麼才能在我的 WordPress 網站上創建訂閱表單? 我不熟悉 HTML 代碼,我需要一些簡單易行的東西。

別擔心,在本教程中; 我們將向您展示在使用 WordPress 創建的網站中添加由 Mailrelay 生成的 HTML 代碼的不同方法,無論是否使用插件。

很有趣,對吧?

重要說明:對於本教程,我們將假設您已經在您的帳戶中創建了一個選擇加入表單,並且您已經復制了 HTML 代碼。 因此,我們將重點解釋如何在 WordPress 上添加此代碼。 如果您還沒有創建表單,或者您還沒有復制 HTML 代碼,我們建議您先閱讀另一篇文章並按照指示的步驟操作:Mailrelay V3 訂閱表單

  • 1 ·如何在不使用任何插件的情況下集成Mailrelay訂閱表單
  • 2 ·如何將 WordPress 中的 Mailrelay 訂閱表單與 Elementor 集成(免費版)
  • 3 ·如何在WordPress與Bloom中集成Mailrelay訂閱表單
  • 4 ·結論
    • 4.1相關帖子:

Envia hasta 75.000 emails gratis!

· 如何在不使用任何插件的情況下集成Mailrelay訂閱表單

我們要開始這個教程說我們不能欺騙自己; 我們中的大多數人會嘗試找到一個插件來為我們在我們的網站上完成所有任務,因為它們使我們的生活變得更加簡單。

但是,請務必記住,在我們的網站上安裝許多插件可能會使頁面過載。

在很多情況下,這意味著頁面加載時間的增加,直接影響我們的 SEO 策略和用戶體驗。

對於這一切,如果您想避免網站超載或者只是不想在您的 WP 網站上安裝更多插件,您可以將 HTML 代碼直接集成到您的網站上,無需任何插件。

如何?

通過以下步驟:

首先,您必須登錄 WordPress,然後單擊“外觀”和“小部件”。

在小部件部分,我們必須找到一個名為“自定義 HTML ”的小部件 ” 找到後,我們可以將其拖動到要添加選擇加入表單的小部件區域。

默認情況下,WordPress 在頁面的側邊欄中有一個小部件區域。

我們可以在那裡插入它,或者如果我們的主題或模板啟用小部件的其他區域我們可以更改位置(例如,在頁腳中)。

在這種情況下,我們將把它添加到最常見的小部件區域,因為所有 WordPress 網站默認都有這個選項; 讓我們在側邊欄中添加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 集成(免費版)

如何將 WordPress 中的 Mailrelay 訂閱表單與 Elementor 集成(免費版)

Elementor 是目前最著名的 WordPress 佈局設計師之一,事實上,它是最常用的編輯選擇加入表單的插件之一。

我們可以找到其主要功能之一:具有許多功能的免費版本,它允許任何用戶創建有吸引力和個性化的部分,而無需投資。

Elementor 是目前免費提供的插件,具有更多有限的功能以及帶有一些額外選項的付費/高級版本。

但是,無論您使用免費版還是付費版,都可以將 Mailrelay 表單集成到所需的部分和位置。 您將通過幾個步驟學習如何做到這一點:

第一個要求是在我們的網站上安裝 Elementor 插件。 如果您還沒有安裝它,您應該轉到插件選項卡並單擊“添加新的”。

plugins y hacer clic en “anadir nuevo”

在 WordPress 存儲庫中搜索“Elementor page builder” ,然後單擊“安裝”。

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 是我們可以找到的用於創建訂閱表單的最完整的插件之一。 如果您已經在 WordPress 中安裝了此插件,或者您正在考慮購買許可證,我們將解釋如何將其與您的 Mailrelay 帳戶集成。

訪問管理面板後,您應該做的第一件事是單擊 Bloom / Opt-in 表單。 在此選項卡中,您可以找到所有已創建的訂閱表單。 在這種情況下,我們將從頭開始創建一個新表單,以了解如何輕鬆地將其與 Mailrelay 集成。

Bloom/ optin forms

要創建新表單,只需單擊屏幕頂部的藍色按鈕“新選擇加入 ”或新形式。

系統將打開一個下拉列表,您必須在其中選擇要創建的表單類型。 讓我們選擇“內聯”選項,因為它允許您稍後在所需的部分或頁面中實施它。

Escogeremos la opcion “inline”

在下一個窗口中,您必須開始配置我們的新表單。 您應該做的第一件事是命名它以便能夠在內部識別它(此名稱僅對您可見,不會向訪問者顯示。)

之後,我們將不得不選擇一個電子郵件提供商。 在這種情況下,由於我們有來自 Mailrelay 的 HTML 代碼,我們可以直接轉到下拉列表的底部並選擇“自定義 HTML 表單”選項。

Custom HTML form

選擇此選項後,系統會立即顯示一個灰色框,我們可以在其中插入表單的片段代碼。 在這種情況下,您應該粘貼 Mailrelay 生成的 HTML 代碼,然後單擊“下一步設計您的選擇”按鈕。

“Next, design your optin”

下面,我們將看看不同的形式,具有不同的顏色和样式。 您應該根據站點的佈局選擇最佳選項以適合頁面配色方案。 需要理解的是,由於我們已經介紹了代碼,所以風格不會和插件顯示的一樣,但最終的結果通常是很不錯的。

下一步將是自定義我們要在表單中使用的字段。 在“選擇加入標題”中,我們應該寫下將在表單標題中突出顯示的標題。 如果不想輸入標題,可以將此字段留空。

之後,我們將必須填寫表格的文本。 如果您正在考慮解釋為什麼您的訪問者應該訂閱您的時事通訊,或者您向訂閱者提供什麼以換取訂閱,這是您應該用來添加所有這些信息的字段。

texto del formulario

所以我們可以調整圖像。 大多數 Bloom 的標準模板在頂部都包含一個圖像,但如果您想修改它和/或用您的徽標替換它,例如,您必須在本節中執行此操作。

我們來到了樣式部分。 如果您想進一步自定義您的訂閱表格,更改字體、顏色、背景或任何其他美學方面,這裡就是您的最佳選擇。 在選擇加入樣式和表單樣式中,您可以從許多選項和替代方案中進行選擇。

之後,我們將找到更多選項來自定義表單。 我們可以在頁腳中添加文本(非常適合澄清或快速評論)和確認消息,這是訪問者成功訂閱時事通訊後將顯示的文本。

設置完所有字段後,我們可以單擊“保存”來保存我們的工作。 當我們點擊保存時,插件會將我們帶離屏幕並顯示所有活動的選擇加入表單。

好吧,我們已經創建並配置了我們的 Bloom 表單。 下一步是將其正確集成到我們的網站中。

為此,在 Bloom / opt-in 表單中,我們將查找我們剛剛創建的表單,並在左側找到這個符號“[]”。

Bloom/optim forms

當我們點擊它時,我們將看到一個帶有此表單短代碼的新窗口。 將此代碼複製或保存在某處,因為您稍後需要使用它。

ventana con el shortcode

複製短代碼後,我們必須將其添加到我們要顯示此表單的網站。 如果我們有像Elementor 或 Divi這樣的視覺佈局我們可以將它與代碼模塊或短代碼集成到任何我們想要的地方。

相反,如果我們已經在使用 WordPress 創建的新系統 Gutenberg,我們可以使用專門用於此目的的嵌入式小部件來集成我們的短代碼。

因此,我們應該打開頁面或部分進行編輯。 訪問後,我們將單擊“+”按鈕,在小部件中,我們將選擇“Shortcode”塊。 之後,我們必須輸入我們之前保存的代碼或簡碼。 在這裡,您只需粘貼內容並保存更改。

Pegaremos el contenido y guardaremos los cambios.

按照這些步驟操作後,您的新表單將在您的網站上可用。 這個過程比你想像的要容易得多,對吧?

· 結論

正如我們在整篇文章中看到的,使用 WordPress 集成 Mailrelay HTML 表單有很多選項。 在這篇文章中,我們希望關注我們認為簡單的方法,這樣您就不會害怕操縱代碼。

正如我們所見,您可以通過小部件部分甚至使用 WordPress 提供的新功能 Gutenberg,在沒有插件的情況下將 Mailrelay 與 WordPress 集成

但是,如果您已經擁有 Divi、Elementor 或任何其他選擇加入的插件等可視化編輯器,您也可以使用它們在任何您想要的地方添加表單。 在 Bloom 的案例中,我們的主要優勢是該插件允許我們輕鬆編輯表單樣式,賦予它們更個性化的風格,並使代碼適應我們網站的佈局。

但是,如果您已經熟悉 HTML 並且想要對代碼進行一些更改,以添加樣式或顏色,那也是可能的。 當然,請記住要謹慎,因為如果您的選擇加入表格無法正常工作,它將影響您的電子郵件營銷策略。

現在,您想將您的 Mailrelay 表單集成到您的 WordPress 網站嗎?

Cristina Aguayo