2014年12月9日火曜日

How to use the Contact Form 7 shortcodes embedded in the other plugin shortcode for Contact Form 7 template. #wpacja2014

Nice to meet you!
I'm Kimiya Kitani (@kimipooh) who takes charge of 9th in WordPress Advent Calendar 2014 in Japan.


 In last year, I joined the WordPress Advent Calendar for the first time. Fortunately, I can also find out the interesting idea in this year, so I'm also joining.  The last year's idea is "How to code the descending order for "The Event Calendar" plugin (The article is here, but this is in Japanese).  This coding is very useful for displaying the event information in the descending order. WordPress Advent Calendar 2013, Thank you for giving me good opportunity. Then, I have been joining the local WordPress communities (WordBench Kyoto and WordBench Osaka) in Japan.

Well, do you think that the title is difficult? Can you understand what's purpose?
I think that this is special case, so I would like to explain by using the concrete example.


Purpose with Concrete Example

  1. Input Contact Form 7 shortcode ([text *email] and so on) in the table data of TablePress plugin.
  2. Use TablePress shoftcode in Contact Form 7 form.
  3. Input Contact Form 7 shortcode to the Static Page and Display the contact page using TablePress plugin layout and design.
The purpose is the creation of Contact Page using TablePress plugin (the design and layout) and Contact Form 7 plugin (the system).

The characters in the figure are in Japanese, so I explain the English translation.

  • お問い合わせ = Contact Us
  • 氏名 = Full name
  • (必須) = (required)
  • 所属 = Affiliation
  • メールアドレス = E-mail address
  • タイトル = Title
  • 内容 = Message
  • 送信 = Send

Standard Layout in Contact Form 7


TablePress Layout in Contact Form 7


This is very simple case, so you may not be able to  find out the different layout and design. But I think that the case of the application form using the table layout  is useful.

I'd like to explain how to set up it with the issue.

How to use it

Step 1. Input Contact Form 7 shortcode in the table data of TablePress

  • テーブルの内容 = Table Contents
  • 氏名 = Full name
  • (必須) = (required)
  • 所属 = Affiliation
  • メールアドレス = E-mail address
  • タイトル = Title
  • 内容 = Message


  • 新規固定ページを追加 = Add New Static Page
  • お問い合わせ = Contact Us
  • パーマリンク = Permalink
  • メディアを追加 = Add the Media
In case of inputing the TablePress shortcode to the static page,

The Contact Form 7 shortcode in the table data of TablePress plugin is displayed.


Of course, the Contact Form 7 shortcodes aren't extracted.

Step 2. Input TablePress shortcode to the Contact Form 7 form.


Creates the form in Contact Form 7  and  input the created TablePress shortcode.
  • お問い合わせ = Contact Us
  • フォーム = Form
  • 送信 = Send

Please set up the table data ID of [table id=1/] in TablePress.

Of course, the form view in the static page is below.
(TablePress shortcode isn't extracted.)


When you use the method which Mr. Miyoshi (Contact Form 7 plugin author)  explains in the following Wordpress forum,
[table id=1/] shortcode will be extracted, but The Contact Form 7 shortcodes embedded in the [table id=1/] shortcode are not extracted.

  • お問い合わせ = Contact Us
  • 氏名 = Full name
  • (必須) = (required)
  • 所属 = Affiliation
  • メールアドレス = E-mail address
  • タイトル = Title
  • 内容 = Message
  • 送信 = Send
This is the special issue.
I had been directly changing the code of Contact Form 7 (*1) until I find out the other way. The way is inconvenient because I have to directly change the code when the Contact Form 7 is updated.
Fortunately, I could find out the way using the hook for Contact Form 7.

Step 3. Use the plugin hook for Contact Form 7


Please add the following code to "functions.php" in the theme.


add_filter('wpcf7_contact_form_properties', 'wpcf7_add_other_shortcodes');

function wpcf7_add_other_shortcodes( $properties ) {
$properties['form']= do_shortcode($properties['form']);

return $properties;
}


The "wpcf7_form_elements" hook was used in [resolved] Include Custom Shortcodes in Form?. My way uses  "wpcf7_contact_form_properties" hook.

By my way, the Contact Form 7 shortcodes embedded in the other plugin shortcode for Contact Form 7 template are extracted.
TablePress Layout in Contact Form 7

The way can use to other plugins....


9th December, 2014 Kimiya Kitani(@kimipooh



*1 In do_shortcode function in "contact-form-7/includes/shortcodes.php" (Contact Form 7), "$content = do_shortcode($content); " code is added.


0 件のコメント:

コメントを投稿