# Hide quick replies until form is filled

**URL:** <https://community.elfsight.com/t/hide-quick-replies-until-form-is-filled/114159>\
**Category:** AI Chatbot\
**Tags:** Released\
**Created:** [April 15, 2025, 2:43pm UTC](https://community.elfsight.com/t/hide-quick-replies-until-form-is-filled/114159 "2025-04-15T14:43:12Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![backhome84](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/backhome84/32/49202_2.png) [@backhome84](https://community.elfsight.com/u/backhome84)\
**Post date:** [April 15, 2025, 2:43pm UTC](https://community.elfsight.com/t/hide-quick-replies-until-form-is-filled/114159/1 "2025-04-15T14:43:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 15, 2025, 3:01pm UTC](https://community.elfsight.com/t/hide-quick-replies-until-form-is-filled/114159/2 "2025-04-15T15:01:42Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![backhome84](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/backhome84/32/49202_2.png) [@backhome84](https://community.elfsight.com/u/backhome84)\
**Post date:** [April 15, 2025, 5:16pm UTC](https://community.elfsight.com/t/hide-quick-replies-until-form-is-filled/114159/3 "2025-04-15T17:16:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 15, 2025, 5:23pm UTC](https://community.elfsight.com/t/hide-quick-replies-until-form-is-filled/114159/4 "2025-04-15T17:23:29Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![backhome84](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/backhome84/32/49202_2.png) [@backhome84](https://community.elfsight.com/u/backhome84)\
**Post date:** [April 15, 2025, 5:35pm UTC](https://community.elfsight.com/t/hide-quick-replies-until-form-is-filled/114159/5 "2025-04-15T17:35:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 15, 2025, 5:36pm UTC](https://community.elfsight.com/t/hide-quick-replies-until-form-is-filled/114159/6 "2025-04-15T17:36:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![backhome84](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/backhome84/32/49202_2.png) [@backhome84](https://community.elfsight.com/u/backhome84)\
**Post date:** [April 15, 2025, 5:38pm UTC](https://community.elfsight.com/t/hide-quick-replies-until-form-is-filled/114159/7 "2025-04-15T17:38:00Z")

</div>

So why you were asking me in the first place

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 15, 2025, 5:41pm UTC](https://community.elfsight.com/t/hide-quick-replies-until-form-is-filled/114159/8 "2025-04-15T17:41:39Z")

</div>

Sorry for the confusion!

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

---

<div class="post-metadata">

**Author:** ![backhome84](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/backhome84/32/49202_2.png) [@backhome84](https://community.elfsight.com/u/backhome84)\
**Post date:** [April 16, 2025, 2:54pm UTC](https://community.elfsight.com/t/hide-quick-replies-until-form-is-filled/114159/9 "2025-04-16T14:54:14Z")

</div>

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>

```

---

<div class="post-metadata">

**Author:** ![Toby\_Mahoney](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/toby_mahoney/32/53473_2.png) [@Toby\_Mahoney](https://community.elfsight.com/u/Toby_Mahoney)\
**Post date:** [May 19, 2025, 12:25am UTC](https://community.elfsight.com/t/hide-quick-replies-until-form-is-filled/114159/12 "2025-05-19T00:25:38Z")

</div>

even if this was the same as the collect client details delay, but just have it as an option to show up after client hits submit or they type / send insomething in the chat.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [May 19, 2025, 8:58am UTC](https://community.elfsight.com/t/hide-quick-replies-until-form-is-filled/114159/13 "2025-05-19T08:58:32Z")

</div>

Got you! Thank you so much for the feedback, @Toby_Mahoney 🙂

---

<div class="post-metadata">

**Author:** ![backhome84](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/backhome84/32/49202_2.png) [@backhome84](https://community.elfsight.com/u/backhome84)\
**Post date:** [May 19, 2025, 1:49pm UTC](https://community.elfsight.com/t/hide-quick-replies-until-form-is-filled/114159/14 "2025-05-19T13:49:17Z")

</div>

Same request for me as well

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [January 20, 2026, 12:29pm UTC](https://community.elfsight.com/t/hide-quick-replies-until-form-is-filled/114159/15 "2026-01-20T12:29:20Z")

</div>

Hey everyone!

We’re happy to share that now you can make the assitant provide quick replies only when the form is submitted 🎉

Check this post for more details - [AI Chatbot: Make form completion required to continue chat](https://community.elfsight.com/t/ai-chatbot-make-form-completion-required-to-continue-chat/143296)