Buff Chat UI for Contact Form 7
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
.pottemplate 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