←

Example 4: Bot Fills Website Form

💡 What This Example Demonstrates

This example shows how your AI bot can collect information through conversation and automatically fill a form on your website. The bot gathers data naturally through chat, then sends it back to populate form fields.

🎯 Try It Now

Chat with the bot, answer its questions, and watch the form fill automatically

💬 Chat with Bot

📝 Form Gets Filled

🔧 How It Works

1 HTML: Create Container for Bot and Form
HTML 
<!-- Bot Container -->
<div id="myLandbot" style="width: 100%; height: 600px"></div>

<!-- Form -->
<form id="contactForm">
    <input type="text" id="fullName" placeholder="Full Name">
    <input type="email" id="email" placeholder="Email">
    <input type="tel" id="phone" placeholder="Phone">
    <input type="text" id="company" placeholder="Company">
    <textarea id="message" placeholder="Message"></textarea>
    <button type="submit">Submit Form</button>
</form>
2 JavaScript: Load SDK and Initialize Bot
JavaScript - Bot Initialization 
<!-- Load Landbot SDK -->
<script src="https://cdn.landbot.io/landbot-3/landbot-3.0.0.js"></script>

<script>
// Initialize Landbot Container (embedded bot)
var myLandbot = new Landbot.Container({
    container: '#myLandbot',
    configUrl: 'YOUR-BOT-CONFIG-URL'
});
</script>
3 JavaScript: Create Window Function to Fill Form
JavaScript - Window Function 
// ⭐ Window function that bot can call to fill the form
window.fillContactForm = function(data) {
    console.log('Filling form with data:', data);

    // Fill form fields
    if (data.name) document.getElementById('fullName').value = data.name;
    if (data.email) document.getElementById('email').value = data.email;
    if (data.phone) document.getElementById('phone').value = data.phone;
    if (data.company) document.getElementById('company').value = data.company;
    if (data.message) document.getElementById('message').value = data.message;

    // Enable fields and submit button
    document.querySelectorAll('#contactForm input, #contactForm textarea').forEach(el => {
        el.removeAttribute('readonly');
        el.classList.add('filled');
    });
    document.querySelector('.submit-btn').disabled = false;
};

🎯 Key Concept: Window-Scoped Function

This is the key! By creating a function on the window object, the bot can call it directly from its flow.

  • window.fillContactForm: Makes the function globally accessible
  • Bot calls it: From a Code block in your bot flow
  • Simple & clean: No event listeners, no complexity!
4 Bot Configuration: Call Window Function
Landbot - Code Block 
// Inside your Landbot flow, add a Code block to call the window function:
window.fillContactForm({
    name: @name,
    email: @email,
    phone: @phone,
    company: @company,
    message: @message
});

📝 Bot Setup Required

In your Landbot builder, you need to:

  • Create variables to collect data (@name, @email, @phone, etc.)
  • Add a Code block at the end of your conversation
  • Call window.fillContactForm() with an object containing the collected data

📸 Landbot Code Block - JavaScript Trigger Function

How to configure the Code block in Landbot to call window.fillContactForm()

Screenshot showing the Code block that calls window.fillContactForm() with the collected data

5 JavaScript: Handle Form Submission
JavaScript 
document.getElementById('contactForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Get form data
    const formData = {
        fullName: document.getElementById('fullName').value,
        email: document.getElementById('email').value,
        phone: document.getElementById('phone').value,
        company: document.getElementById('company').value,
        message: document.getElementById('message').value
    };
    
    // Send to your backend
    console.log('Submitting form:', formData);
    
    // Show success message
    alert('Form submitted successfully!');
});

📝 Summary: What Happens

  1. Bot is embedded on page as a Container (side by side with form)
  2. User chats with bot directly in the embedded interface
  3. Bot asks questions and collects information in variables
  4. Bot reaches a Code block at the end of conversation
  5. Code block calls window.fillContactForm() with collected data
  6. JavaScript function fills form fields next to the bot
  7. User can review and submit the pre-filled form

💼 Use Cases

⚠️ Important: Bot Configuration Required

For this example to work, you need to configure your Landbot to call the window function. This involves:

📸 Complete Bot Flow Configuration

Complete Landbot flow showing question blocks collecting user data

Screenshot showing the complete bot flow with question blocks that collect user information (name, email, phone, company, message)

🤖 AI Agent Configuration

This example uses Landbot's AI Agent to have natural conversations with users. The AI Agent needs to be configured to collect specific information during the conversation.

📸 AI Agent Setup & Configuration

AI Agent configuration in Landbot showing how to set up natural data collection

Screenshot showing the AI Agent configuration that enables natural conversation-based data collection