Hide quick replies until form is filled

Wishlist AI Chatbot
1

I think, it is better if it is the other way around.
the bot first shows the form to collect the user data and after this process is completed, the bot show start showing the quick replies

2 Likes
2

Got it! Would you like to hide only quick replies before sending the form, or maybe you want to block the option to send any messages until the form is completed?

1 Like
3

I feel it’s better to block showing the quick replies until the user fill out the form and then the quick replies show up afterward

2 Likes
4

Got it, thanks!

Currently, there is no way to do this, unfortunately. I’ve moved your idea to the Wishlist and we’ll try to think about it in the future :slightly_smiling_face:

1 Like
5

Ok, can we at least for now hide the quick replies until the form is submitted?

2 Likes
6

I am sorry, but there is no custom solution at the moment

1 Like
7

So why you were asking me in the first place

2 Likes
8

Sorry for the confusion!

I just wanted to understand your use case better to choose the clear title for the feature request.

1 Like
9

here is a HTML sample that can be used to help you develop the code the way I described to you

Chatbot with Quick Replies .chat-container { max-width: 500px; margin: 0 auto; border: 1px solid #ccc; border-radius: 10px; padding: 20px; font-family: Arial, sans-serif; } 
    .chat-messages {
        height: 300px;
        overflow-y: auto;
        margin-bottom: 20px;
        padding: 10px;
        border: 1px solid #eee;
        border-radius: 5px;
    }
    
    .bot-message {
        background-color: #f0f0f0;
        padding: 8px 12px;
        border-radius: 15px;
        margin-bottom: 10px;
        display: inline-block;
        max-width: 80%;
    }
    
    .user-message {
        background-color: #007bff;
        color: white;
        padding: 8px 12px;
        border-radius: 15px;
        margin-bottom: 10px;
        display: inline-block;
        max-width: 80%;
        float: right;
    }
    
    .quick-replies {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
    }
    
    .quick-reply {
        background-color: #e9ecef;
        border: 1px solid #ced4da;
        border-radius: 20px;
        padding: 5px 12px;
        cursor: pointer;
        font-size: 14px;
    }
    
    .quick-reply:hover {
        background-color: #d1e7ff;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }
    
    input, textarea, select {
        width: 100%;
        padding: 8px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        box-sizing: border-box;
    }
    
    button {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 15px;
        border-radius: 4px;
        cursor: pointer;
    }
    
    button:hover {
        background-color: #0056b3;
    }
    
    .hidden {
        display: none;
    }
</style>

    <div id="form-container">
        <div class="bot-message">Please fill out this form to proceed:</div>
        
        <form id="user-form">
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
            </div>
            
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
            </div>
            
            <div class="form-group">
                <label for="question">Your question:</label>
                <textarea id="question" name="question" rows="3" required></textarea>
            </div>
            
            <button type="submit">Submit</button>
        </form>
    </div>
    
    <div id="quick-replies-container" class="hidden">
        <div class="bot-message">
            Thank you for your submission! How can I help you further?
            <div class="quick-replies">
                <div class="quick-reply" onclick="selectQuickReply('More information')">More information</div>
                <div class="quick-reply" onclick="selectQuickReply('Contact support')">Contact support</div>
                <div class="quick-reply" onclick="selectQuickReply('FAQ')">FAQ</div>
                <div class="quick-reply" onclick="selectQuickReply('Something else')">Something else</div>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('user-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Get form values
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const question = document.getElementById('question').value;
        
        // Display user's submission in chat
        const chatMessages = document.getElementById('chat-messages');
        
        // Create user message with submitted info
        const userMessage = document.createElement('div');
        userMessage.className = 'user-message';
        userMessage.innerHTML = `
            <strong>Submitted Information:</strong><br>
            Name: ${name}<br>
            Email: ${email}<br>
            Question: ${question}
        `;
        chatMessages.appendChild(userMessage);
        
        // Hide the form
        document.getElementById('form-container').classList.add('hidden');
        
        // Show quick replies
        const quickRepliesContainer = document.getElementById('quick-replies-container');
        quickRepliesContainer.classList.remove('hidden');
        
        // Scroll to bottom of chat
        chatMessages.scrollTop = chatMessages.scrollHeight;
    });
    
    function selectQuickReply(replyText) {
        const chatMessages = document.getElementById('chat-messages');
        
        // Display user's quick reply selection
        const userReply = document.createElement('div');
        userReply.className = 'user-message';
        userReply.textContent = replyText;
        chatMessages.appendChild(userReply);
        
        // Here you would typically process the reply and generate a bot response
        // For demonstration, we'll just show a generic response
        setTimeout(() => {
            const botResponse = document.createElement('div');
            botResponse.className = 'bot-message';
            botResponse.textContent = `Thanks for selecting "${replyText}". I'll help you with that.`;
            chatMessages.appendChild(botResponse);
            
            // Scroll to bottom of chat
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }, 500);
    }
</script>
2 Likes