Title: Buff Chat UI for Contact Form 7 Author: buffinc Published: July 12, 2026 Last modified: July 12, 2026 --- Search plugins ![](https://ps.w.org/buff-chat-ui-for-contact-form-7/assets/banner-772x250.png?rev =3604914) ![](https://ps.w.org/buff-chat-ui-for-contact-form-7/assets/icon-256x256.png?rev =3604914) # Buff Chat UI for Contact Form 7 By [buffinc](https://profiles.wordpress.org/buffinc/) [Download](https://downloads.wordpress.org/plugin/buff-chat-ui-for-contact-form-7.1.0.0.zip) * [Details](https://wordpress.org/plugins/buff-chat-ui-for-contact-form-7/#description) * [Reviews](https://wordpress.org/plugins/buff-chat-ui-for-contact-form-7/#reviews) * [Installation](https://wordpress.org/plugins/buff-chat-ui-for-contact-form-7/#installation) * [Development](https://wordpress.org/plugins/buff-chat-ui-for-contact-form-7/#developers) [Support](https://wordpress.org/support/plugin/buff-chat-ui-for-contact-form-7/) ## Description This plugin renders an existing Contact Form 7 (CF7) form as a **chat-style, one- question-at-a-time UI**. Form definition, input validation, and email sending are all delegated to Contact Form 7 itself, so your existing settings, auto-reply emails, and spam protection (reCAPTCHA v3) keep working. This plugin is not affiliated with or endorsed by the Contact Form 7 project or its authors. You can turn any CF7 form into a chat with a single shortcode: ``` [buff_chat id="123"] ``` #### Features * Automatically converts a CF7 form into a one-question-at-a-time chat UI (by scanning the form tags). * Answered items remain editable, with a confirmation step before submitting. * Customize **colors, font size, background, and bot icon** from the settings screen( or fine-tune with additional CSS). * **Inline narration**: add an element with `class="buffchat-message"` in the form body to show a bot bubble at that position. * **Conditional branching** (via Conditional Fields for Contact Form 7) to show or hide questions based on answers. * **reCAPTCHA v3** support (only when configured in the CF7 integration). * **Redirect to a thank-you page** after submission. * **Floating widget (site-wide chatbot)**: a corner launcher that opens the chat on click; can be shown on all pages. * **Template function** `buff_chat_ui( $id )` to call it directly from a theme. * **Postal-code to address auto-fill** (YubinBango; enabled via microformat classes such as `class:p-postal-code`; no API key required). * **Group multiple fields into one card** (e.g. address fields) instead of one at a time. * Validation rules and messages follow Contact Form 7. * Translation ready (a `.pot` template is bundled; Japanese is the source language). #### Supported form tags text / email / url / tel / number / range / date / textarea / select / checkbox / radio / acceptance / quiz / file / hidden / submit. Display-only tags (count, response, etc.), image CAPTCHA (Really Simple CAPTCHA), Cloudflare Turnstile, and Stripe are not supported (their output is skipped). For spam protection in the chat UI, use reCAPTCHA v3 or quiz. ### External services This plugin relies on the following third-party services. Each one is loaded only on forms that use the relevant feature. This section is provided so that end users are aware of what data is sent, when, and where. #### Google reCAPTCHA v3 Purpose: bot / spam detection on form submission. Only used when the site owner has configured reCAPTCHA v3 in the Contact Form 7 “Integration” screen. On such pages this plugin loads `https://www.google.com/recaptcha/api.js` and, on submission, calls `grecaptcha.execute()` which sends the visitor’s IP address, an anonymous token, and browsing signals to Google in order to receive a verification token. The token is then submitted to the site along with the form and validated by Contact Form 7 on the server side. * Terms of Service: https://policies.google.com/terms * Privacy Policy: https://policies.google.com/privacy #### YubinBango (postal-code to address auto-fill) Purpose: convert a Japanese postal code (7 digits) into a prefecture / city / street name so the visitor does not have to type them. Only used when the CF7 form contains a field with the microformat class `p-postal-code`. The library code (yubinbango. js) is bundled with the plugin and served from your own site. When a visitor types a valid 7-digit postal code, the library fetches a small JSON data file for that postal-code prefix from the YubinBango data host. The path pattern is the first three digits of the postal code, for example: https://yubinbango.github.io/yubinbango- data/data/100.js — only the postal code is used to select the JSON file; no personal data is sent. * Source and license (MIT): https://github.com/yubinbango/yubinbango * Data repository: https://github.com/yubinbango/yubinbango-data ## Installation 1. Install and activate Contact Form 7 (required). 2. Install and activate this plugin. 3. Find the ID of the CF7 form you want to convert, and place the shortcode on a page or post: `[buff_chat id="123"]` 4. Optionally adjust colors, text, icon, etc. under “Settings -> Buff Chat UI”. #### Shortcode attributes * `id` – CF7 form post ID (required) * `title` – heading (defaults to the form title) * `intro` – opening greeting * `avatar` – bot icon image URL * `thanks` – redirect URL after submission * `mode` – `inline` (default) or `float` (floating display) * `position` – position for `float`: `bottom-right` / `bottom-left` #### Calling from a template Use `` to output the chat. For a floating widget, use` buff_chat_ui( 123, array( 'mode' => 'float' ) )`. To get the markup as a string, use `buff_chat_ui_get( 123 )`. #### Floating widget (site-wide chatbot) Under “Settings -> Buff Chat UI -> Floating display”, enable “Show on all pages”, set the target form ID and position, and a chatbot-style launcher appears in the footer of every page. For a single page only, use `[buff_chat id="123" mode="float"]`. ## FAQ ### Is there a confirmation screen? Yes. A confirmation step is shown before submitting, and answered items can still be edited. ### Are CF7 date fields supported? Yes. `[date]` / `[date*]` are supported and shown as a date picker. ### Are validation rules the same as CF7? Yes. Validation rules and messages follow Contact Form 7; no custom rules are added. ### Can I place multiple chats on one page? Yes. Each one works independently. ### How is spam handled? reCAPTCHA v3 (configured in the CF7 integration) and CF7’s quiz are supported. Image CAPTCHA (Really Simple CAPTCHA) and Cloudflare Turnstile are not supported. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Buff Chat UI for Contact Form 7” is open source software. The following people have contributed to this plugin. Contributors * [ buffinc ](https://profiles.wordpress.org/buffinc/) [Translate “Buff Chat UI for Contact Form 7” into your language.](https://translate.wordpress.org/projects/wp-plugins/buff-chat-ui-for-contact-form-7) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/buff-chat-ui-for-contact-form-7/), check out the [SVN repository](https://plugins.svn.wordpress.org/buff-chat-ui-for-contact-form-7/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/buff-chat-ui-for-contact-form-7/) by [RSS](https://plugins.trac.wordpress.org/log/buff-chat-ui-for-contact-form-7/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.0.0 * Initial release. ## Meta * Version **1.0.0** * Last updated **9 hours ago** * Active installations **Fewer than 10** * WordPress version ** 6.0 or higher ** * Tested up to **7.0.1** * PHP version ** 7.4 or higher ** * Tags * [address autofill](https://wordpress.org/plugins/tags/address-autofill/)[chat](https://wordpress.org/plugins/tags/chat/) [chatbot](https://wordpress.org/plugins/tags/chatbot/)[contact form 7](https://wordpress.org/plugins/tags/contact-form-7/) [conversational form](https://wordpress.org/plugins/tags/conversational-form/) * [Advanced View](https://wordpress.org/plugins/buff-chat-ui-for-contact-form-7/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/buff-chat-ui-for-contact-form-7/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/buff-chat-ui-for-contact-form-7/reviews/) ## Contributors * [ buffinc ](https://profiles.wordpress.org/buffinc/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/buff-chat-ui-for-contact-form-7/)