如何在WordPress中創建聯繫人表單彈出窗口-分步指南

[ad_1]

如何在Wordpress中創建聯繫人表單彈出窗口

當用戶單擊聯繫人按鈕或鏈接時,是否要彈出您的聯繫表單?

這樣做的好處是,每次用戶單擊聯繫人按鈕或鏈接時,而不是轉到新頁面,聯繫人表單都會以彈出窗口的形式打開,這將增加表單的提交。在本文中,我們將向您展示如何在WordPress網站中創建聯繫人表單彈出窗口,而不逐步影響用戶體驗。

在WordPress中輕鬆創建聯繫人表單彈出窗口

使用WordPress,可以輕鬆創建聯繫人表單彈出窗口。要開始使用,您只需要具備以下兩點:

  1. 一個強大的彈出插件
  2. 強大的表單生成器插件

為了獲得最佳結果,我們建議您使用 WP表格 用於創建您的聯繫表單。它是一個功能強大的表單生成器插件,可讓您在不到5分鐘的時間內構建幾乎所有類型的表單。進一步了解 WPForms在這裡

WPForms,用戶註冊,插件,用戶登錄插件

到那個時刻 彈出插件,我們認為沒有其他選擇比這更好 OptionMonster。它是最受歡迎的 強大的潛在客戶生成插件 這樣一來,您就可以吸引訪問者的注意力,並鼓勵他們使用令人驚嘆的optins對您的網站採取行動。通過此插件,您可以提高用戶參與度並提高轉化次數和銷售量。

Optinmonster彈出窗口

要了解有關OptinMonster的更多信息,請閱讀我們的 OptinMonster詳細評論

步驟1:安裝WPForms和OptinMonster插件

add-wordpress-plugins「 width =」 745「 height =」 353「 class =」 alignnone size-full wp-image-220382「 srcset =」 https://www.isitwp.com/wp-content/uploads/2018/ 06 / add-wordpress-plugins.jpg 745w,https://www.isitwp.com/wp-content/uploads/2018/06/add-wordpress-plugins-300x142.jpg 300w「 size =」(max-width: 745px)100vw,745px「></p>
<p>首先下載 <a href=WP表格 插入。然後,安裝並激活它。不確定如何?沒問題。您可以跳到我們的指南 如何安裝WordPress插件 得到所有整理。我們將等待。

搞定?完善。

按照相同的過程激活OptinMonster插件。但是僅安裝插件是不夠的。你必須 創建一個帳戶 也可以使用OptinMonster應用。該插件僅充當將WordPress網站與OptinMonster應用程序連接的媒介。因此,要使其正常工作,您必須安裝插件並使用該應用程序創建一個帳戶。

步驟2:使用WPForms為彈出窗口創建聯繫表單

我們將首先使用WPForms插件創建聯繫表單。但是,如果您一直在使用WPForms並已使用它創建了聯繫表單,則可以跳過此步驟。

如果沒有聯繫表單,請轉到儀錶板,然後單擊WPForms»Add New。

wpforms-dashboard「 width =」 740「 height =」 324「 class =」 alignnone size-full wp-image-228947「 srcset =」 https://www.isitwp.com/wp-content/uploads/2018/12/ wpforms-dashboard.jpg 740w,https://www.isitwp.com/wp-content/uploads/2018/12/wpforms-dashboard-300x131.jpg 300w「 size =」(最大寬度:740px)100vw,740px「 ></a></p>
<p>這將帶您到另一個頁面,您可以在其中選擇表單模板並為表單添加名稱。選擇簡單聯繫人表單模板,然後為表單命名。 </p>
<p><a href=WPForms Lite模板

完成該過程後,將啟動表單生成器,這使您可以輕鬆設計表單。您可以使用拖放生成器輕鬆添加或刪除文件。

https://www.isitwp.com/「 width =」 775「 height =」 500「 class =」 alignnone size-full wp-image-239206「 srcset =」 https://www.isitwp.com/wp-content /uploads/2019/11/WPForms-builder.png 775w,https://www.isitwp.com/wp-content/uploads/2019/11/WPForms-builder-300x194.png 300w,https://www.isitwp .com / wp-content / uploads / 2019/11 / WPForms-builder-768x495.png 768w「 size =」(最大寬度:775px)100vw,775px「></a></p>
<p>您可以添加您認為對錶單必不可少的所有欄位。完成所有操作後,請點擊保存按鈕以保存您的更改。您的聯繫表格現已準備就緒。</p>
<p>現在點擊保存按鈕旁邊的嵌入標籤,然後複製簡碼。 </p>
<p><a href=https://www.isitwp.com/「 width =」 775「 height =」 537「 class =」 alignnone size-full wp-image-239439「 srcset =」 https://www.isitwp.com/wp-content /uploads/2019/11/WPForms-Builder-shortcode.png 775w,https://www.isitwp.com/wp-content/uploads/2019/11/WPForms-Builder-shortcode-300x208.png 300w,https:/ /www.isitwp.com/wp-content/uploads/2019/11/WPForms-Builder-shortcode-768x532.png 768w「 size =」(max-width:775px)100vw,775px「></a></p>
<h3>步驟3:使用OptinMonster創建WordPress彈出窗口</h3>
<p>下一步是在您的網站上創建一個彈出窗口。我們將使用創建一個模式彈出窗口 <a href=OptinMonster。因此,轉到您的WordPress儀錶板,然後單擊OptinMonster»創建新活動。

https://www.isitwp.com/「 width =」 561「 height =」 206「 class =」 alignnone size-full wp-image-239207「 srcset =」 https://www.isitwp.com/wp-content /uploads/2019/11/optinmonster-popups.jpg 561w,https://www.isitwp.com/wp-content/uploads/2019/11/optinmonster-popups-300x110.jpg 300w「 size =」(max-width :561px)100vw,561px「></a></p>
<p>這將打開一個新屏幕,您可以在其中選擇廣告系列類型,然後選擇您的選擇模板。對於廣告系列類型,我們將選擇彈出選項。 </p>
<p><a href=https://www.isitwp.com/「 width =」 775「 height =」 325「 class =」 alignnone size-full wp-image-239435「 srcset =」 https://www.isitwp.com/wp-content /uploads/2019/11/OptinMonster-Campaign-1-1.jpg 775w,https://www.isitwp.com/wp-content/uploads/2019/11/OptinMonster-Campaign-1-1-300x126.jpg 300w ,https://www.isitwp.com/cn/wp-content/uploads/2019/11/OptinMonster-Campaign-1-1-768x322.jpg 768w「 size =」(最大寬度:775px)100vw,775px「></a></p>
<p>對於模板,我們來看一下Canvas。這是一塊空白畫布,支持所有形式的短代碼。因此,您可以在此處插入任何HTML,CSS,JavaScript,甚至WordPress短代碼。</p>
<p><a href=https://www.isitwp.com/「 width =」 756「 height =」 454「 class =」 alignnone size-full wp-image-239436「 srcset =」 https://www.isitwp.com/wp-content /uploads/2019/11/template-optinmonster.jpg 756w,https://www.isitwp.com/wp-content/uploads/2019/11/template-optinmonster-300x180.jpg 300w「 size =」(max-width :756px)100vw,756px「></a></p>
<p>選擇模板後,將轉到一個新屏幕,您可以在其中命名廣告系列。 </p>
<p><a href=https://www.isitwp.com/「 width =」 537「 height =」 519「 class =」 alignnone size-full wp-image-239437「 srcset =」 https://www.isitwp.com/wp-content /uploads/2019/11/name-your-optinmonster-campaign.png 537w,https://www.isitwp.com/wp-content/uploads/2019/11/name-your-optinmonster-campaign-300x290.png 300w 「 size =」(最大寬度:537px)100vw,537px「></a></p>
<p>接下來單擊開始構建選項卡。現在,您將被定向到拖放生成器。您會注意到,畫布在設計上是空白的。您可以使用此畫布創建任何彈出窗口,並從頭開始設計它們。您可以使用「設計」選項卡下的選項進行操作。  </p>
<p>完成後,單擊「設計」選項卡下的「添加塊」選項卡。向下滾動以找到「元素塊」選項。在此下方,您將看到一個HTML塊。將其拖放到設計區域。 </p>
<p><a href=https://www.isitwp.com/「 width =」 775「 height =」 472「 class =」 alignnone size-full wp-image-239438「 srcset =」 https://www.isitwp.com/wp-content /uploads/2019/11/Add-blocks.jpg 775w,https://www.isitwp.com/wp-content/uploads/2019/11/Add-blocks-300x183.jpg 300w,https://www.isitwp .com / wp-content / uploads / 2019/11 / Add-blocks-768x468.jpg 768w「 size =」(最大寬度:775px)100vw,775px「></a></p>
<p>在這裡,您可以輸入聯繫方式簡碼以及您可能想要添加的任何其他自定義HTML。因此,我們添加如下的簡碼:</p>
<h3>你有任何問題嗎?</h3>
<p class=想進一步詢問我們的服務嗎?只需填寫表格,我們會儘快與您聯繫。

以下是有關操作方法的預覽。

https://www.isitwp.com/「 width =」 775「 height =」 425「 class =」 alignnone size-full wp-image-239441「 srcset =」 https://www.isitwp.com/wp-content /uploads/2019/11/HTML-code.png 775w,https://www.isitwp.com/wp-content/uploads/2019/11/HTML-code-300x165.png 300w,https://www.isitwp .com / wp-content / uploads / 2019/11 / HTML-code-768x421.png 768w「 size =」(最大寬度:775px)100vw,775px「></a></p>
<p>請注意,我們之前創建的表單的短代碼也已嵌入到代碼中。您可以用您的短代碼代替。現在保存您的更改。之後,轉到「顯示規則」選項卡,並將時間設置為零,如屏幕截圖所示。 </p>
<p><a href=https://www.isitwp.com/「 width =」 633「 height =」 395「 class =」 alignnone size-full wp-image-239442「 srcset =」 https://www.isitwp.com/wp-content /uploads/2019/11/Editing-popup-form-timing.jpg 633w,https://www.isitwp.com/wp-content/uploads/2019/11/Editing-popup-form-timing-300x187.jpg 300w 「 size =」(最大寬度:633px)100vw,633px「></a></p>
<p>向下滾動此屏幕,您會發現更多選項。如果要在特定頁面或帖子上顯示此表單,可以使用它們。完成後點擊「保存」按鈕。 </p>
<h3>步驟4:發布彈出式表單</h3>
<p>完成更改後,請點擊頂部的是/否選項,然後點擊激活標籤。 </p>
<p><a href=https://www.isitwp.com/「 width =」 604「 height =」 508「 class =」 alignnone size-full wp-image-239443「 srcset =」 https://www.isitwp.com/wp-content /uploads/2019/11/Editing-popup-form-OptinMonster-App.jpg 604w,https://www.isitwp.com/wp-content/uploads/2019/11/Editing-popup-form-OptinMonster-App- 300x252.jpg 300w「 size =」(最大寬度:604px)100vw,604px「></a></p>
<p>最後,轉到「發布」選項卡,然後將狀態切換為實時。</p>
<p><img loading=

完成後,返回到WordPress儀錶板,然後轉到OptinMonster»廣告系列。在這裡,您會看到自己的廣告系列。在其下單擊「編輯輸出設置」鏈接。它將展開以顯示一些選項。選中在網站上啟用廣告系列選項旁邊的框。

https://www.isitwp.com/「 width =」 752「 height =」 448「 class =」 alignnone size-full wp-image-239444「 srcset =」 https://www.isitwp.com/wp-content /uploads/2019/11/enable-optin-2.jpg 752w,https://www.isitwp.com/wp-content/uploads/2019/11/enable-optin-2-300x179.jpg 300w「 size =」 (最大寬度:752px)100vw,752px「></a></p>
<p>最後,單擊頁面末尾的「保存設置」選項。</p>
<h3>步驟5:添加鏈接以觸發「聯繫人」表單彈出窗口</h3>
<p>首先複製OptinMonster廣告活動子彈。您可以在廣告系列名稱旁邊找到它。 </p>
<p><a href=https://www.isitwp.com/「 width =」 758「 height =」 359「 class =」 alignnone size-full wp-image-239446「 srcset =」 https://www.isitwp.com/wp-content /uploads/2019/11/publish-optin-1.jpg 758w,https://www.isitwp.com/wp-content/uploads/2019/11/publish-optin-1-300x142.jpg 300w「 size =」 (最大寬度:758px)100vw,758px「></a></p>
<p>現在,在WordPress中創建一個新頁面,或編輯要在其中添加聯繫人表單彈出鏈接或按鈕的帖子或頁面。我們將在這裡創建一個新的。轉到您的文本編輯器並添加以下代碼。別忘了用自己的彈頭替換彈頭。  </p>
<p><a href=聯繫我們

https://www.isitwp.com/「 width =」 775「 height =」 491「 class =」 alignnone size-full wp-image-239447「 srcset =」 https://www.isitwp.com/wp-content /uploads/2019/11/text-editor.png 775w,https://www.isitwp.com/wp-content/uploads/2019/11/text-editor-300x190.png 300w,https://www.isitwp .com / wp-content / uploads / 2019/11 / text-editor-768x487.png 768w「 size =」(最大寬度:775px)100vw,775px「></a></p>
<p>完成後,點擊右側的「發布」按鈕。您的表格現已生效。從前端訪問您的網站,您會看到它。 </p>
<p>希望本文對您有所幫助。如果您想進一步了解 <a href=創建聯繫表格 使用WPForms,這裡是詳細的指南。

相關文章