Docs

Docs

menu-to-arrow-top-3
Join.chat

Contact form with Chat Funnels

Do you want to use Joinchat as a conversational contact form? In this guide, we’ll show you step by step how to do it using Chat Funnels (+): a system for creating conversational flows that collect data in a much more natural way than traditional forms.

What is Chat Funnels (+)?

With Chat Funnels (+), you can design custom conversations where the assistant guides the user step by step to collect information such as their name, email, or message. All in a friendly, conversational, and frictionless way.

This allows you to replace classic forms with a smoother experience, where the user feels like they’re talking to a real person. Ideal for:

  • Contact forms.
  • Quote requests.
  • Qualified lead capture.
  • Product or service inquiries.

Step 1: Create the flow in Chat Funnels (+)

We’ll create a simple Chat Funnel with 6 steps:

  1. An initial greeting step.
  2. Three “Input” steps to capture the name, email, and subject fields.
    These fields can later be used anywhere in the Funnel with {{field_name}}.
  3. An “Action / Webhook” step.

    Here we configure the endpoint using {wp_admin_ajax}, which will send the data to our own wp-admin/admin-ajax.php, set the request method to POST, and the format to Form.

    We also added an extra field "action" with the value "joinchat_contact". We’ll use this action in Step 2 with WordPress hooks.
  4. A final thank-you message step.
image

Chat Funnels are internally saved in YAML format, so it’s very easy to copy and edit them (just be careful not to break the structure). Here is the code for our example (just copy and paste it into a new Chat Funnel):

- step: 0
  name: Greeting
  content: 👋 Hi there! Welcome to *{SITE}*.
  options:
    - option: 0
      type: goto
      text: ''
      value: 1
- step: 1
  input: text
  name: name
  content: What's your name?
  options:
    - option: 0
      type: goto
      text: ''
      value: 2
- step: 2
  input: email
  name: email
  content: |-
    Nice to meet you, {{name}}!
    ===
    What's your email address?
    >>>
    This is just a demo; we won't store anything. 😉
  options:
    - option: 0
      type: goto
      text: ''
      value: 3
- step: 3
  input: text
  name: subject
  content: |-
    Thanks!
    ===
    What's the reason for your inquiry?
  options:
    - option: 0
      type: goto
      text: ''
      value: 5
- step: 4
  name: Send to admin-ajax.php / action "joinchat_contact"
  content: '["all","action:joinchat_contact"]["all"]'
  options:
    - option: 0
      type: goto
      text: ''
      value: 5
  action: webhook
  endpoint:
    - ''
    - POST
    - form
- step: 5
  name: End
  content: |-
    Great, {{name}}! We have everything we need.
    ===
    An email would be sent to the admin with the following details:
    ---
    *Subject:*
    New Message from {{name}}
    *Content:*
    Name: {{name}}
    Email: {{email}}
    Message:
    {{subject}}
    ===
    *Have a wonderful day!*
  options: []

Step 2: Create a PHP snippet to capture the data and send an email

In your functions.php file or in a custom plugin (we like using the Code Snippets plugin), add the following code to receive the data and send the email.

The actions follow the format do_action( “wp_ajax_{$action}” ) and do_action( “wp_ajax_nopriv_{$action}” ). Here we’ll use the action we defined earlier: "joinchat_contact".

add_action('wp_ajax_joinchat_contact', 'joinchat_send_email_via_ajax');
add_action('wp_ajax_nopriv_joinchat_contact', 'joinchat_send_email_via_ajax');

function joinchat_send_email_via_ajax() {
 // Check for required parameters
 if (!isset($_POST['name'], $_POST['email'], $_POST['subject'])) {
 wp_send_json_error(['message' => 'Missing parameters']);
 wp_die();
 }

 // Sanitize input data
 $name = sanitize_text_field($_POST['name']);
 $email = sanitize_email($_POST['email']);
 $subject = sanitize_textarea_field($_POST['subject']);

 // Validate email
 if (!is_email($email)) {
 wp_send_json_error(['message' => 'Invalid email address']);
 wp_die();
 }

 // Prepare email
 $to = get_option('admin_email'); // Send to the site admin email
 $subject = 'New Message from ' . $name;
 $body = "Name: $name\nEmail: $email\nMessage:\n$subject";
 $headers = ['Content-Type: text/plain; charset=UTF-8'];

 // Send email
 if (wp_mail($to, $subject, $body, $headers)) {
 wp_send_json_success(['message' => 'Email sent successfully']);
 } else {
 wp_send_json_error(['message' => 'Failed to send email']);
 }

 wp_die();
}add_action('wp_ajax_joinchat_contact', 'joinchat_send_email_via_ajax');
add_action('wp_ajax_nopriv_joinchat_contact', 'joinchat_send_email_via_ajax');

function joinchat_send_email_via_ajax() {
 // Check for required parameters
 if (!isset($_POST['name'], $_POST['email'], $_POST['subject'])) {
 wp_send_json_error(['message' => 'Missing parameters']);
 wp_die();
 }

 // Sanitize input data
 $name = sanitize_text_field($_POST['name']);
 $email = sanitize_email($_POST['email']);
 $subject = sanitize_textarea_field($_POST['subject']);

 // Validate email
 if (!is_email($email)) {
 wp_send_json_error(['message' => 'Invalid email address']);
 wp_die();
 }

 // Prepare email
 $to = get_option('admin_email'); // Send to the site admin email
 $subject = 'New Message from ' . $name;
 $body = "Name: $name\nEmail: $email\nMessage:\n$subject";
 $headers = ['Content-Type: text/plain; charset=UTF-8'];

 // Send email
 if (wp_mail($to, $subject, $body, $headers)) {
 wp_send_json_success(['message' => 'Email sent successfully']);
 } else {
 wp_send_json_error(['message' => 'Failed to send email']);
 }

 wp_die();
}

The result?

A conversational form tailored to your business, 100% integrated with WordPress, and offering a much smoother experience for your users.

With Chat Funnels (+), you can automate repetitive tasks and collect valuable information in a conversational way — without overwhelming visitors with traditional forms.

Note: Add this filter using Code Snippets: