瞭解如何在 Adobe Muse 網站新增、設定及測試聯絡表單。設定 reCAPTCHA 以防止垃圾郵件或網路釣魚。

註解:

Adobe Muse 不再增加新功能,並將於 2020 年 3 月 26 日停止支援。如需詳細資訊和協助,請參閱 Adobe Muse 終止服務頁面

您造訪的網站大多都有一個聯絡頁面,讓訪客能夠聯絡網站擁有者。表單非常實用,因為您可以收集潛在客戶的聯絡資訊,同時也可避免將電子郵件地址直接發佈到網頁時可能產生的垃圾郵件。

在本文中,瞭解如何將聯絡表單新增至 Adobe Muse 網站並設定聯絡表單。

新增聯絡表單至您的網站

請依照下列步驟將「聯絡表單」Widget 新增至您的網站設計:

  1. 開啟 Adobe Muse。對著您要新增聯絡表單的頁面連按兩下,該頁面隨即在「設計」視圖中開啟。

  2. 開啟「Widget 資料庫」面板 (視窗 > Widget 資料庫)。按一下「表單」,然後在下列兩種類型的表單中擇一選用:

    • 詳細聯絡方式
    • 簡單聯絡方式
  3. 將聯絡 Widget 拖移到頁面。

    展開「表單」區段並將需要的聯絡表單拖移到頁面。
    展開「表單」區段並將需要的聯絡表單拖移到頁面。

    註解:

    如果您想讓表單出現在每個頁面上,可以將「聯絡表單」Widget 新增至主版頁面。在此情況下,使用主版頁面的每個頁面都會顯示聯絡表單。

  4. 將表單拖移到頁面上之後,使用「選取」工具按一下即可選取表單,然後將表單置於所需位置。

    由於表單 Widget 會自適應調整,因此您可預視及查看此 Widget 在不同大小的畫面中的行為。如果您想要變更 Widget 的位置,或對聯絡表單欄位的固定選項與調整大小選項進行修改,就必須先在所需位置新增中斷點。然後,對著您要固定或調整大小的欄位連按兩下加以選取。在調整大小選項,可選擇「無」或「自適應寬度」。

    如果您想要將表單 Widget 固定在頁面的特定位置,請在頂端的工具列,選取「固定」選項。

  5. 設計自適應網站時,您可以選擇將特定聯絡表單欄位固定在固定的位置上。若要如此操作,請新增中斷點。當使用對應此中斷點的螢幕大小檢視您的網站時,即會顯示聯絡表單欄位,且該欄位會固定於您將在下個步驟中指定的位置上。

    連按兩下您要固定的欄位加以選取,然後選取想要的固定選項。

  6. 您也可以針對您的表單 Widget 以及個別的表單欄位選取調整大小選項。選取您要設定其調整大小屬性的元素,然後從頁面頂端的環境選單中選取調整大小選項。

    針對聯絡表單的調整大小選項,您可選取「無」或「自適應寬度」。

進行聯絡表單的設定

在本節中,您會看到表單 Widget 的設定,並瞭解如何使用「選項」選單進行聯絡表單的設定。

  1. 使用「選取」工具來選取整個「聯絡表單」Widget。在選取整個表單的情況下,「控制」面板左上角的選取指示器會顯示:「表單: 正常」

    「正常」連結是一個含四種可能狀態的選單,功能類似選單項目或按鈕:

    • 正常
    • 送出中
    • 送出成功
    • 送出錯誤
    送出選取工具
    選取指示器顯示整個表單的可用狀態。

    當表單以各種狀態顯示時,如果您想要調整表單,可以從此選單中選取對應的狀態名稱。

    送出錯誤狀態
    表單處於「送出錯誤」狀態時的樣子。

    在選取此狀態的情況下,您可以調整錯誤訊息的外觀。例如,您可以變更文字內容或者將錯誤文字顏色從紅色變更為藍色。

  2. 再次從選取指示器選單中選取「正常」狀態。

  3. 當仍在「正常」狀態下選取整個表單時,按一下藍色箭頭存取「選項」選單。「選項」選單中的選項設定會對整個 Widget 產生影響:

    「選項」選單
    「選項」選單會顯示整個聯絡表單的設定。

    系統預設會將目前頁面的名稱填入「表單名稱」欄位,您可以視需要變更名稱。

    如果您想將送出的表單轉寄至多個電子郵件地址,則可以在「傳送電子郵件至」欄位中輸入地址 (以英文分號區隔)。

    表單送出的行為是由您在「傳送之後」選單中選取的選項所設定。請在「選項」選單中的下列選項之間進行選擇:

    • 停留在目前頁面 (預設)
    • 連結至檔案 (上傳在表單送出之後連結的檔案)
    使用「傳送之後」選單選擇表單的行為
    使用「傳送之後」選單選擇表單的行為。

    您可以新增兩種類型的新表單元素:

    標準欄位

    標準欄位的清單包括:

    • 電子郵件
    • 公司
    • 名稱
    • 公司電話號碼
    • 手機號碼
    • 公司地址
    • 住家電話號碼
    • 網站
    • 住家地址
    • Captcha

    若要新增前述任何欄位,請選取所需欄位的核取方塊。

  4. 若要在聯絡表單上新增自訂欄位,請在要新增的自訂欄位旁邊的「+」按鈕按一下,然後在「設計」視圖中輸入標籤,為表單上新增的新表單欄位元素提供說明。

    下列自訂欄位類型可供您新增到聯絡表單:

    • 單行文字:單行文字欄位適用於較短的文字,例如訪客的年齡或郵遞區號。
    • 多行文字:當您想讓訪客輸入更多資訊,例如送出留言或詢問問題時,可以新增多行文字欄位。
    • 核取方塊
    • 核取方塊群組
    • 選項按鈕群組

進行個別表單元素的設定

當您選取表單元素時,選取指示器會更新為顯示元素的名稱,例如「標籤」、「文字輸入」或「送出」。使用「選取指示器」,您可以輕鬆瞭解目前在表單中選取的巢狀元素為何。

  1. 按一下整個表單,就會將表單 Widget 整個選取。若要選取表單 Widget 裡的個別元素,請對該元素連按兩下加以選取。

    若要知道選取的是整個 Widget 還是個別元素,請查看選取指示器。若選取的是整個 Widget,選取指示器會顯示「表單」;若選取的是特定欄位,選取指示器會顯示「文字輸入」。

    當您選取「文字輸入」表單元素並按一下藍色箭頭按鈕以存取「選項」選單時,顯示的選項會提供與該元素特別相關的設定。

    相關內容選項集
    「選項」選單顯示所選表單元素的相關內容選項集。

    在「選項」選單中,若選取「文字輸入」元素,您可以選擇欄位是否為必填。您也可以選擇欄位是否顯示描述性文字,以幫助訪客瞭解要在填寫欄位時輸入的內容。

    在「組件」區段中,選取或取消選取核取方塊以顯示或隱藏欄位的標籤與訊息文字。

    在選取表單元素的情況下,選取指示器會顯示元素的名稱以及您可以在「控制」面板 (若適用) 中存取的「狀態」選單。選取指示器中的選單可讓您更容易在編輯表單元素的情況下選取所需狀態。

    選取指示器
    在選取表單元素的情況下,使用選取指示器選單來選取所需的狀態。

    在選取狀態的情況下,您可以使用「填色」面板或「控制」面板來調整其外觀。

    表單欄位能設定的可能狀態如下:

    • 空白
    • 非空白
    • 滑鼠指向效果
    • 焦點
    • 錯誤

    「送出」按鈕的狀態會在選取「送出」按鈕時顯示。

    「送出」按鈕可設定的狀態如下:

    • 正常
    • 滑鼠指向效果
    • 滑鼠按下
    • 送出中
    送出按鈕狀態
    選取「送出」按鈕以存取該按鈕的狀態。

    請注意,若選取整個表單,畫面隨即顯示整個表單的狀態:

    • 正常
    • 送出中
    • 送出成功
    • 送出錯誤
    按鈕狀態
    在選取整個表單的情況下,您可以選擇整個表單的狀態來影響其顯示方式。

設計聯絡表單並設定樣式

您可以設計表單 Widget 與表單元素的外觀,方式同於在 Adobe Muse 中更新其他 Widget 的外觀。請依照下列基本工作流程執行:

  1. 使用「選取」工具選取整個表單或您要更新的表單元素。

    例如,如果您想要變更「送出」按鈕中出現的文字,可以在聯絡表單中,直接連按兩下「送出」按鈕。您可以使用「文字」工具選取「送出」文字,藉此變更「送出」按鈕中的文字。刪除文字,輸入新文字。您也可以使用選取指示器中的選單來選取「送出」按鈕的其他狀態,並變更其他狀態的文字。

  2. 選取表單元素之後,便可以調整元素外觀。

    例如,連按兩下「名稱」欄位加以選取。若要為「名稱」欄位選取文字輸入,可使用「控制」面板或「填色」面板中的選項來設定文字欄位的背景顏色。

    「填色」面板
    使用「填色」面板設定「文字輸入」欄位的填色顏色。

    您可以使用「填色」面板選項來將填色顏色設定為實色或漸層。亦可設定填色的背景影像,然後設定「符合」與「位置」選項。若要調整填色的透明度,可修改「不透明度」設定。

    請注意,除非您停用「一併編輯」選項 (預設為啟用),否則當您編輯單一欄位時,所有欄位都會更新。這項功能有助於在您的表單中建立一致的設計並節省時間。不過,您隨時可以選取整個表單,按一下藍色箭頭按鈕來開啟「選項」選單,並取消選取「一併編輯」(如果您想要為欄位單獨設定樣式)。

    新增自訂欄位
    「一併編輯」選項停用時,您對某類型表單元素所做的變更不會自動套用至相同類型的其他元素。

測試表單並擷取送出的訊息

表單及表單樣式設定完畢後,請儲存網站,然後發佈網站。現在,您可以在瀏覽器中對表單進行測試。

  1. 按一下「發佈」按鈕,然後按一下「確定」。

    按一下「發佈」按鈕
    發佈含有最近所做之變更的網站。

    瀏覽器視窗即會開啟,顯示發佈的網站。

  2. 造訪含聯絡表單的頁面,並在實際上線網站上與其互動。測試當您在必填欄位中沒有輸入內容的情況下送出表單時,會發生什麼情況。檢查表單的出現及運作方式,並密切注意其顯示錯誤訊息的方式。

    當您判斷出表單如預期般運作及顯示時,請嘗試送出含某項預留位置訊息的表單以傳送訊息。檢查您的電子郵件,確保已在收件匣中收到訊息。

  3. 在左邊列,按一下「報告」類別中的「網頁表單使用情況」選項。出現的圖表顯示與表單送出相關的最近表單活動。

    「網頁表單使用情況」報告
    檢查「網頁表單使用情況」報告,瞭解送出表單的訪客數量。

    您可以使用「儀表板」中的報告,瞭解關於您網站訪客的詳細資訊。您可以追蹤趨勢來查看網站接收最多流量的時間,並檢查您新增至網站之表單的效能。

    此資訊在決定何時升級或更新網站內容時很有幫助。它也有助於您與訪客進行互動,因為您讓他們向您傳送訊息與意見反應。您可以與訪客進行對話,而不是只有透過網站顯示資訊這一種單向溝通方式。

    若要瞭解有關使用 Muse 建置網站的詳細資訊,請造訪 Adobe Muse 教學課程頁面。另請參閱每日最佳網站頁面,查看使用 Muse 建立之最近網頁設計的範例。

新增 Google reCAPTCHA 以防止垃圾郵件

Adobe Muse 可讓您新增 Google 提供的免費服務 reCAPTCHA,以保護您的網站免受到垃圾留言、假註冊等騷擾。您可以在 Adobe Muse 的聯絡表單中啟用 reCAPTCHA,僅允許有效的使用者在您的網站上提供資訊。如需有關 reCAPTCHA 的詳細資訊,請參閱 Google reCAPTCHA

reCAPTCHA 服務會要求您為網站網域產生獨一無二的公開和私密金鑰。這些金鑰必須拷貝到 Adobe Muse 內的特定欄位,才能在您的網站上完全啟用 reCAPTCHA。

在表單中新增和設定 reCAPTCHA

  1. 在 Adobe Muse 中,選取「視窗 > Widget 資料庫 > 表單」。拖移並新增簡單或詳細的聯絡表單。

    「表單」Widget 選項
  2. 在「選項」面板的「Captcha」下拉式清單中,選取「reCAPTCHA v2」。

    建議您選擇「reCAPTCHA v2」,因為 Google 已不再支援 reCAPTCHA 版本 1。

    reCAPTCHA 選項
    新增 reCAPTCHA v2

    reCAPTCHA 欄位 (影像驗證) 現已新增至表單。

    reCAPTCHA 欄位
    進行 reCAPTCHA v2 設定

  3. 使用下列選項設定 reCAPTCHA:

    • 公開金鑰:用於以 JavaScript 程式碼的方式提供給使用者。如需產生金鑰 reCAPTCHA 的相關資訊,請參閱產生公開和私密金鑰
    • 私密金鑰:用於在您的網站伺服器和 Google 伺服器之間進行通訊。強烈建議您安全地儲存私密金鑰,切勿將其洩漏。私密金鑰一旦遺失,便無法從 Google 復原。如需產生金鑰 reCAPTCHA 的相關資訊,請參閱產生公開和私密金鑰
    • 必填項目:指定是否強制輸入 reCAPTCHA。此選項預設為不可編輯和不可選取。
    • 主題:針對 reCAPTCHA 方塊指定您要選擇淺色或深色主題。
    • 類型:針對 reCAPTCHA 驗證指定您要啟用影像驗證或音效播放。音效播放可讓失明或弱視的使用者輕鬆導覽網站。
    • 大小:指定您要一般或壓縮的 reCAPTCHA 大小。
    • 標籤:選取此核取方塊即可選擇顯示 reCAPTCHA 欄位的標籤。您可以使用此欄位為表單中的 reCAPTCHA 區段新增標題。
    • 訊息文字:選取此核取方塊以選擇顯示訊息。

產生公開和私密金鑰

  1. 註解:

    您不需要為目前 Business Catalyst 上所發佈的網站取得金鑰。

    在瀏覽器中開啟 Google Admin Console。在 Google Admin Console 上,按一下「Sign Up Now」以登入 Google 帳戶,或使用「Create An Account」選項進行註冊。

    登入後,您將會重新導向至 Google reCAPTCHA 首頁。

    Google reCAPTCHA Admin Console
    Google reCAPTCHA

  2. 按一下頁面頂端的「取得 reCAPTCHA」按鈕。

  3. 在「網域」欄位輸入網站的網域名稱。請僅提供網域名稱,而非網站的完整 URL。例如,mysamplemusewebsite.com

    為您的網站註冊 Google reCAPTCHA
    為您的網站註冊 Google reCAPTCHA

  4. 按一下「Register」,為您的網站產生獨一無二的公開和私密金鑰。

    記住產生的公開金鑰 (網站金鑰) 和私密金鑰 (祕密金鑰)。

    產生公開和私密金鑰
    產生公開和私密金鑰

  5. 將網站金鑰與祕密金鑰分別複製到 Adobe Muse 的「公開金鑰」與「私密金鑰」欄位。

    請確保完整拷貝金鑰,而且未遺失任何字元。

    在取得網域的金鑰組之後,Adobe Muse 網站的所有表單均會共用同一個金鑰組。變更其中一個項目便會自動變更所有項目,且系統會排定重新轉存所有頁面和對應的 .php 程式碼。如果您是使用第三方工具透過 FTP 方式將檔案上傳至伺服器,除了拷貝已更新的檔案,也請務必拷貝伺服器上的所有 .html 和 .php 檔案 (.php 檔案位於「scripts/」檔案夾內)。

  6. 在瀏覽器或 Adobe Muse 內預視頁面以測試 reCAPTCHA。

     

疑難排解聯絡表單問題

我可以自訂聯絡表單嗎?

您無法使用 Adobe Muse 自訂聯絡表單。但是,您可以使用協力廠商的 Widget 來自訂聯絡表單。您也可以插入自訂 HTML 或使用協力廠商的 Widget 來設計自訂表單。

您也可以使用 Business Catalyst 來自訂您的聯絡表單。如需使用 Business Catalyst 處理表單的相關資訊,請參閱 http://docs.businesscatalyst.com/user-manual/CRM/web-forms/customizing-webforms

如何解決聯絡表單中的 reCAPTCHA 錯誤?

Google 已發行 reCAPTCHA v2。若您使用的是舊版 reCAPTCHA,則必須讓公開和私密金鑰保持完整。Google 已不再支援 reCAPTCHA v1。更簡單的解決方式是換成使用 reCAPTCHA v2。若要瞭解如何在 Adobe Muse 中設定及使用 reCAPTCHA v2,請參閱在 Adobe Muse 中設定 recAPTCHA

當我使用 FTP 上傳功能將網站上傳到我的主機供應商時,Muse 顯示表單 Widget 可能無法運作的警告。該如何解決此錯誤?

部分網頁主機並不支援 Adobe Muse 中聯絡表單的所有需求。當您使用 Adobe Muse 中的 FTP 上傳功能上傳至您的主機時,服務中的邏輯會嘗試判斷主機供應商伺服器上的每個項目是否皆已正確設定。若未正確設定,Adobe Muse 即會顯示警告並提供未達到需求的相關資訊。您可以洽詢網頁主機供應商,並請求其解決設定方面的問題。

如何查看我的主機供應商是否支援 Adobe Muse 聯絡表單的需求?

上傳內含聯絡表單的 Adobe Muse 網站之後,您便可將瀏覽器指向 <yoursite-address.com/scripts/form_check.php>。如果網站支援讓表單順利運作的每個所需項目,您就會在此頁面上看到三個綠色的核取標記。如果沒有看到,請洽詢您的主機供應商。他們應該能夠查看此檔案的 php 程式碼,並判斷您的伺服器需進行哪些設定變更,以便讓 Muse PHP 表單正常運作。

為什麼我沒有收到內含表單資料的電子郵件?

這個問題可能是由某些問題所導致。請依照下列疑難排解步驟進行:

1. 查看電子郵件收件匣的垃圾郵件檔案夾。若您在垃圾郵件檔案夾中發現表單訊息,請將訊息標示為非垃圾郵件。

2. 有些主機供應商拒絕將電子郵件傳送至不同網站網域的電子郵件地址。例如,如果您的網站是 www.example.com,但是您的表單設定為將電子郵件傳送至 someone@email.com,則您的網頁主機供應商可能會拒絕傳送由表單 Widget 產生的電子郵件。

若要解決此問題:

  • 更新您的表單以將電子郵件訊息傳送至 someone@example.com。這項變更可能會解決問題並允許郵件傳送。如果您的主機供應商是 GoDaddy,但您的表單電子郵件地址傳送至非 GoDaddy 電子郵件帳戶,則您必須在 cPanel 中啟用「遠端」郵件。(在其他主機供應商上可能也必須進行類似的變更)。
  • 從 GoDaddy 頁面導覽至您的 cPanel。該處即為您管理網頁主機的地方。
  • 在 cPanel 主頁面上,向下捲動至標註「:::Email」(電子郵件) 之處
  • 按一下位於「Accounts」(帳戶) 正下方的「MX entry」(MX 項目)。此即為「Mail Exchanger」(郵件交換程式) 設定。依預設,GoDaddy 會假設您將使用 GoDaddy 電子郵件帳戶。
  • 請確認已選取「Remote Mail Exchanger」(遠端郵件交換程式)。
  • 依預設,GoDaddy 會假設您將透過 GoDaddy 來代管您的電子郵件。若您為表單設定的電子郵件地址並非 GoDaddy 代管的電子郵件地址,則依預設 GoDaddy 不會接受此郵件地址。您必須給予 GoDaddy 權限,使其可將表單傳送至 GoDaddy 認定為是「遠端」的電子郵件地址。

3. 有些 IT 部門會封鎖從 someone@bigcompany.com 傳送至 someone_else@bigcompany.com 的電子郵件 (如果電子郵件訊息並非由標準的 bigcompany.com 郵件伺服器寄送)。請嘗試變更表單選項,以新增另一個結尾不是 @bigcompany.com 的電子郵件地址 (列在第一個)。這項變更可能會允許將表單訊息同時遞送至兩個電子郵件地址。

4. 在網頁瀏覽器上造訪 http://my-site.com/scripts/form_check.php,並確認您看到所有綠色核取標記。如果部分項目沒有顯示綠色核取標記,則表示主控伺服器並未正確設定為允許表單 Widget 將電子郵件訊息傳送至您指定的地址。

若有伺服器設定問題,請洽詢您的網頁主機供應商。詳述在表單檢查頁面上未標示為綠色的項目,以便供應商協助您將伺服器設定為使用正確的設定。

我可以使用 URL 預先填入聯絡表單欄位嗎?

您需要 JavaScript 從 URL 擷取資訊,或是需要填入表單欄位的動態後端。若要在 Adobe Muse 中預先填入表單欄位,請使用「插入 HTML」選項,將聯絡表單整合至 Adobe Muse 頁面。

在 Adobe Muse 頁面上將連結整合至設定的 script preset.js 中 (head)。然後使用 Adobe Muse 中的「插入 HTML」選項整合<body onload="populate('myForm');">。

PHP 設定的常見問題集

何謂 PHP 以及 Muse 為何建立 PHP 檔案?

PHP 是伺服器端指令碼語言。此語言通常用於以動態方式建置網頁。您可於下列位置進一步瞭解 PHP:http://en.wikipedia.org/wiki/PHP

若您使用 Adobe Muse 中的「同步文字」功能,則當您使用 FTP 上傳至網頁主機時,應用程式將會輸出使用同步內容當作 PHP 檔案的任何頁面。完成之後,網站僅會包含共用資料的一份副本。此共用資料會動態插入至頁面,並於呈現頁面時使用。

PHP 檔案也允許使用 Adobe「In-Browser Editing」技術的同步內容。您可以編輯內容一次,然後在網站上重複使用同步內容的任意位置進行更新。

我嘗試使用 Muse 的 FTP 上傳至我的網站,但是出現缺少 PHP 支援的警告。這是什麼意思?

當您使用 FTP 上傳時,Adobe Muse 會嘗試確認您的網頁主控伺服器是否支援讓「同步文字」功能適用於網站訪客的必要技術。如果您的主機完全不支援 PHP,或是僅支援極舊版本的 PHP,Adobe Muse 即會停用 PHP 生成。這會導致在上傳程序中出現警告。

何謂 .htaccess 檔案且為何 Muse 會建立此檔案?

大多數網頁伺服器都會使用 .htaccess 檔案來設定頁面重新導向以及控制其他選項。您可於下列位置進一步瞭解 .htaccess 檔案:http://en.wikipedia.org/wiki/.htaccess

如果 Adobe Muse 為您的網站產生 PHP 檔案,其便會嘗試將舊頁面 (例如 mysite.com/about.html) 的任何要求重新導向至新的 php 頁面 (mysite.com/about.php)。此任務便是使用 .htaccess 檔案來完成。

我必須使用哪個版本的 PHP 方可支援「同步文字」功能?

目前 Adobe Muse 要求使用 PHP 版本 5.1,才能提供動態同步文字支援。

在 Adobe Muse 中使用哪個 PHP 版本?

您必須在 Adobe Muse 中針對聯絡表單使用比 5.1 更新的 PHP 版本。

我的網站主機供應商並未提供 PHP,但是我想使用「In-Browser Editing」工具在我的網站上編輯同步文字。我該怎麼做?

您應與主機供應商聯繫,並請求其協助您在網站上順利使用 PHP,或是考慮換成有支援 PHP 的主機供應商。

我可以設定偏好設定而使 Adobe Muse 不會產生 PHP 嗎?

可以。在 Adobe Muse 中開啟「網站屬性」對話框。取消核取「In-Browser Editing」區段中的「啟用同步文字」核取方塊。現在 Adobe Muse 將會產生 .html 檔案,而非.php 檔案。若您要使用 Adobe 的「In-Browser Editing」在同一處編輯同步文字,則應再次選取核取方塊。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策