Customize message modal on single listing

[Tomanija]

Hi all,
how can I modify the message modal on the single listing page to include fields such as first name, last name, email, phone number and an attachment? All fields can be plain text without validation, it should be just clearly separated to help users understand what information they should provide.

[Tomanija]

This is what I got from the AI, does this seem like good advice to you?

Step 1: Add the Custom Fields to the Message Form

This code snippet uses the hivepress/v1/forms/message_send filter to add the new fields to the message sending form within the modal.

add_filter(
    'hivepress/v1/forms/message_send',
    function( $form ) {
        $form['fields'] = array_merge(
            $form['fields'],
            [
                'first_name' => [
                    'label'       => 'First Name',
                    'type'        => 'text',
                    'required'    => true,
                    '_order'      => 10,
                ],
                'last_name' => [
                    'label'       => 'Last Name',
                    'type'        => 'text',
                    'required'    => true,
                    '_order'      => 20,
                ],
                'user_email' => [
                    'label'      => 'Email',
                    'type'       => 'email',
                    'required'   => true,
                    '_order'     => 30,
                ],
                'phone_number' => [
                    'label'      => 'Phone Number',
                    'type'       => 'text',
                    'required'   => true,
                    '_order'     => 40,
                ],
                'attachment' => [
                    'label'       => 'Attachment',
                    'type'        => 'attachment',
                    'description' => 'You can attach a file to your message.',
                    'max_size'    => 2048, // in KB (e.g., 2MB)
                    '_order'      => 60,
                ],
            ]
        );

        // Adjust the order of the default 'text' field (the message body)
        if ( isset( $form['fields']['text'] ) ) {
            $form['fields']['text']['_order'] = 50;
        }

        return $form;
    },
    1000
);

Step 2: Register the New Fields as Message Attributes

Now, you need to tell HivePress to save the data from these new fields. This is done using the hivepress/v1/models/message/attributes filter.

add_filter(
    'hivepress/v1/models/message/attributes',
    function( $attributes ) {
        $attributes['first_name'] = [
            'type' => 'text',
        ];
        $attributes['last_name'] = [
            'type' => 'text',
        ];
        $attributes['user_email'] = [
            'type' => 'text',
        ];
        $attributes['phone_number'] = [
            'type' => 'text',
        ];
        return $attributes;
    },
    1000
);

Step 3: Display the Custom Fields in the Message View

By default, the content of the new fields will not be visible in the message thread. To display them, you need to override the message template.

1. Create the directory structure: In your child theme’s folder, create the following nested directories: your-child-theme/hivepress-messages/templates/message/view/
2. Copy the template file: Find the original template file located at: /wp-content/plugins/hivepress-messages/templates/message/view/message-text.php Copy this file into the new directory you created in your child theme.
3. Edit the copied message-text.php file: Open the copied message-text.php file and add the following code at the beginning of the file, right after the opening <?php tag.

<?php
/**
 * The message text template part.
 *
 * @package HivePress\Messages\Templates
 */

// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;

?>

<?php if ( $message->get_first_name() || $message->get_last_name() || $message->get_user_email() || $message->get_phone_number() ) : ?>
    <div class="hp-message__custom-fields" style="margin-bottom: 12px; padding: 12px; border: 1px solid #e5e5e5; border-radius: 6px;">
        <?php if ( $message->get_first_name() && $message->get_last_name() ) : ?>
            <p><strong>Name:</strong> <?php echo esc_html( $message->get_first_name() ); ?> <?php echo esc_html( $message->get_last_name() ); ?></p>
        <?php endif; ?>

        <?php if ( $message->get_user_email() ) : ?>
            <p><strong>Email:</strong> <?php echo esc_html( $message->get_user_email() ); ?></p>
        <?php endif; ?>

        <?php if ( $message->get_phone_number() ) : ?>
            <p><strong>Phone Number:</strong> <?php echo esc_html( $message->get_phone_number() ); ?></p>
        <?php endif; ?>
    </div>
<?php endif; ?>

<?php // The original content of the message-text.php file will follow, you can leave it as is. ?>

[ChrisB]

Hey @Tomanija,

I’m not HivePress staff, but I also use AI to help with coding challenges.

What the AI has suggested all sounds good on the surface level anyway, but the only way to know for sure if it works, is by trying it - or, having a good understanding of the code.

From my findings AI doesn’t always get things perfect on the first attempt, so you might need to have a bit of back and forth with it, and do your best to describe what is or isn’t working, but most of the time, it gets there eventually.

I look forward to hearing how it goes!

Cheers,
Chris

[andrii]

Hi,

Thanks for the request. Please note that we are unable to debug third-party code, as this is outside the scope of our support. If you need help with customization, we recommend hiring an expert: Customize your website | HivePress