WordPress Contact Form 7 (CF7) 新增自訂義欄位

Contact Form 7 這插件應該不用我多說了,是WordPress百萬級插件,但他的表單欄位有限,是一些常用的欄位,這樣怎麼能應付刁鑽的客戶呢?本篇介紹幾種方式新增自訂義欄位

  1. 透過 CF7 shortcode 來建立自訂義欄位。
  2. 透過 CF7 的 wpcf7_form_elements 這個 filter 新增自訂欄位HTML。
  3. 透過 WP shortcode 新增自訂欄位HTML。

透過 CF7 shortcode 來建立自訂義欄位。

Contact Form 7 提供的 shortcode API 跟 WordPress 不同,Contact Form 7 shortcode API 則是用wpcf7_add_shortcode() 來建立簡碼,至於使用方式其實大同小異。

可以把下面的程式碼添加到主題的 functions.php 檔案中

/**
* contact form 7 (CF7) add custom shortcode
* https://v123.tw
*/
wpcf7_add_shortcode('v123_cf7_fields', 'v123_cf7_fields_handler', true);
function v123_cf7_fields_handler($tag) {
    if (!is_object($tag)) return '';

    $name = $tag['name'];
    if (empty($name)) return '';

	$the_title = get_the_title(); 
    $html = '<input type="text" name="' . $name . '" value="' . $the_title . '" />';
    return $html;
}

這邊有一點比較不一樣的是,傳入 shortcode callback function 是 CF7的 WPCF7_FormTag Object
大概長這樣

WPCF7_FormTag Object
(
    [type] => v123_cf7_fields
    [basetype] => v123_cf7_fields
    [name] => hello
    [options] => Array
        (
        )

    [raw_values] => Array
        (
        )

    [values] => Array
        (
        )

    [pipes] => WPCF7_Pipes Object
        (
            [pipes:WPCF7_Pipes:private] => Array
                (
                )

        )

    [labels] => Array
        (
        )

    [attr] => 
    [content] => 
)

使用範例:

可以在 CF7 中的表單(Form)中填入簡碼:

 

[v123_cf7_fields the_title]

v123_cf7_fields:為自訂欄位簡碼名稱

the_title:為欄位名稱,可替換名稱,之後可用於郵件本文(message body)的名稱,但記得在表單使用什麼名稱,在郵件本文(message body)中記得要使用相同名稱,才取得到值,這就像我們用html表單的欄位名稱一樣。

WordPress Contact Form 7 (CF7) 運用簡碼新增自訂義欄位

在「郵件」標籤中的郵件本文(message body)欄位,填入下列簡碼:

 

[the_title]

WordPress Contact Form 7 (CF7) 運用簡碼新增自訂義欄位
切換至「郵件」頁籤,CF7會自動把可用欄位名稱顯示出來,這就是我們在表單設定時輸入的欄位名稱

WordPress Contact Form 7 (CF7) 運用簡碼新增自訂義欄位
在郵件本文我們可以用 [the_title] 取得欄位值


前端表單呈現

WordPress Contact Form 7 (CF7) 運用簡碼新增自訂義欄位

新增了一個自訂義的「頁面標題」欄位

WordPress Contact Form 7 (CF7) 運用簡碼新增自訂義欄位

最後收到的郵件內容,”email”就是當前頁面的標題囉


透過 CF7 的 wpcf7_form_elements 這個 filter 新增自訂欄位HTML

 
/**
* contact form 7 (CF7) add custom use html
* https://v123.tw
*/
add_filter( 'wpcf7_form_elements', 'v123_cf7_fields_html' );
function v123_cf7_fields_html( $form ) {
	ob_start();
	?>
          <label> Custom fields label<br/>
            <span class="wpcf7-form-control-wrap your-name">
            	<input type="text" name="fields_name" value="Hello World!!">
            </span>
          </label>
    <?php
	$content = ob_get_clean();
	$form = $content.$form;
	return $form;
}

透過 WP shortcode 新增自訂欄位HTML

透過 WordPress 原生的 shortcode API,把自訂表單欄位HTML放到簡碼裡面,這方法的好處是可以在CF7的編輯頁自由配置,也可以一次新增幾個欄位或較複雜的編排,另外,除了簡碼,當然也是可以在開頭或結尾加上單純的文字。

可以把下面的程式碼添加到主題的 functions.php 檔案中:

 
/**
* contact form 7 (CF7) add custom use shortcode
* https://v123.tw
*/
add_shortcode('v123_cf7_fields_shortcode','v123_cf7_fields_shortcode');
function v123_cf7_fields_shortcode( $form ) {
	ob_start();
	?>
          <label> Custom fields label<br/>
            <span class="wpcf7-form-control-wrap your-name">
            	<input type="text" name="fields_name" value="Hello World!!">
            </span>
          </label>
    <?php
	$content = ob_get_clean();
	return $content;
}
add_filter( 'wpcf7_form_elements', 'do_shortcode' );

表單使用範例:

[v123_cf7_fields_shortcode]

郵件內文使用範例:

[fields_name]

參考資料:

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料