Form Auto

Form Auto

Universal web form auto-fill tool. Automatically fills out any web form using OpenClaw's browser automation.

Features

• 📝 Universal Form Fill: Works with any web form
• 🔐 Browser Session: Uses existing login state
• 🎯 Smart Detection: Auto-detects form fields
• 📋 Template Support: Save and reuse form data
• 🌍 Multi-Language: Supports Chinese and English
• ⚡ Fast & Accurate: Reliable form filling

Trigger Conditions

• "帮我填表" / "Help me fill out this form"
• "自动填写报名表" / "Auto-fill registration form"
• "填写求职申请" / "Fill job application"
• "填写问卷" / "Fill out survey"
• "form-auto [url]"

---

⚠️ Privacy Warning

This skill accesses your browser profile to fill forms.

• 🔐 Reads browser session to access forms
• 📝 Fills form fields with your data
• 🌐 Interacts with websites on your behalf
• ⚠️ Only use on trusted websites

---

Step 1: Get User Information

Ask user for the information needed to fill the form:

请提供需要填写的信息：

基本信息：
- 姓名: ___
- 手机号: ___
- 邮箱: ___
- 地址: ___

其他信息（根据表单）：
- 公司: ___
- 职位: ___
- 备注: ___

Or use saved profile from previous sessions.

---

Step 2: Open Form URL

// Open the form page
await browser.open({
  url: "https://example.com/form"
})

// Wait for page load
await browser.wait({ timeout: 5000 })

---

Step 3: Detect Form Fields

// Detect all form fields on the page
const formFields = await browser.evaluate(() => {
  const fields = []
  
  // Find all input elements
  document.querySelectorAll('input, select, textarea').forEach(el => {
    const field = {
      type: el.type || el.tagName.toLowerCase(),
      name: el.name || '',
      id: el.id || '',
      placeholder: el.placeholder || '',
      label: '',
      required: el.required
    }
    
    // Try to find associated label
    if (el.id) {
      const label = document.querySelector(`label[for="${el.id}"]`)
      if (label) field.label = label.innerText.trim()
    }
    
    // Or find parent label
    if (!field.label) {
      const parentLabel = el.closest('label')
      if (parentLabel) field.label = parentLabel.innerText.trim()
    }
    
    // Or use placeholder as label
    if (!field.label && el.placeholder) {
      field.label = el.placeholder
    }
    
    fields.push(field)
  })
  
  return fields
})

console.log("检测到的表单字段:", formFields)

---

Step 4: Fill Form Fields

// Fill each field based on type and label
async function fillForm(userData) {
  for (const field of formFields) {
    const value = matchFieldToData(field, userData)
    
    if (value) {
      // Fill input/textarea
      if (field.type === 'text' || field.type === 'email' || 
          field.type === 'tel' || field.type === 'textarea') {
        await browser.evaluate((id, name, val) => {
          const el = id ? document.getElementById(id) : 
                     document.querySelector(`[name="${name}"]`)
          if (el) {
            el.value = val
            el.dispatchEvent(new Event('input', { bubbles: true }))
            el.dispatchEvent(new Event('change', { bubbles: true }))
          }
        }, field.id, field.name, value)
      }
      
      // Fill select
      if (field.type === 'select-one') {
        await browser.evaluate((id, name, val) => {
          const el = id ? document.getElementById(id) : 
                     document.querySelector(`[name="${name}"]`)
          if (el) {
            el.value = val
            el.dispatchEvent(new Event('change', { bubbles: true }))
          }
        }, field.id, field.name, value)
      }
      
      // Fill checkbox/radio
      if (field.type === 'checkbox' || field.type === 'radio') {
        if (value === 'true' || value === true) {
          await browser.evaluate((id, name) => {
            const el = id ? document.getElementById(id) : 
                       document.querySelector(`[name="${name}"]`)
            if (el && !el.checked) {
              el.click()
            }
          }, field.id, field.name)
        }
      }
    }
  }
}

---

Step 5: Smart Field Matching

def match_field_to_data(field, user_data):
    """Match form field to user data based on label/name"""
    
    label = (field.get('label', '') + ' ' + 
             field.get('name', '') + ' ' + 
             field.get('placeholder', '')).lower()
    
    # Name matching
    if any(kw in label for kw in ['姓名', '名字', 'name', '称呼']):
        return user_data.get('name', '')
    
    # Phone matching
    if any(kw in label for kw in ['手机', '电话', 'phone', 'tel', 'mobile']):
        return user_data.get('phone', '')
    
    # Email matching
    if any(kw in label for kw in ['邮箱', 'email', 'mail']):
        return user_data.get('email', '')
    
    # Address matching
    if any(kw in label for kw in ['地址', 'address', '住址']):
        return user_data.get('address', '')
    
    # Company matching
    if any(kw in label for kw in ['公司', 'company', '单位', '组织']):
        return user_data.get('company', '')
    
    # Position matching
    if any(kw in label for kw in ['职位', 'position', '岗位', '职务']):
        return user_data.get('position', '')
    
    # ID card matching
    if any(kw in label for kw in ['身份证', 'id card', '证件']):
        return user_data.get('id_card', '')
    
    return None

---

Step 6: Confirm & Submit

// Show filled form summary to user
const summary = await browser.evaluate(() => {
  const filled = []
  document.querySelectorAll('input, select, textarea').forEach(el => {
    if (el.value) {
      filled.push({
        label: el.placeholder || el.name || el.id,
        value: el.value
      })
    }
  })
  return filled
})

// Ask user to confirm
console.log("已填写的字段:")
summary.forEach(item => {
  console.log(`  ${item.label}: ${item.value}`)
})

// Wait for user confirmation before submit
// await browser.click({ selector: 'button[type="submit"]' })

---

Template System

Save commonly used form data:

{
  "profile_name": "个人信息",
  "data": {
    "name": "张三",
    "phone": "13800138000",
    "email": "zhangsan@example.com",
    "address": "北京市朝阳区xxx",
    "company": "xxx科技有限公司",
    "position": "产品经理"
  }
}

---

Example Usage

求职申请表

User: "帮我填写这个求职申请表，网址是 https://company.com/apply"

Agent:
1. 打开网址
2. 检测表单字段
3. 询问用户信息（或使用保存的模板）
4. 自动填写
5. 展示填写结果
6. 等待用户确认提交

报名表

User: "填写这个培训班报名表，我的信息：姓名李四，手机13912345678，邮箱lisi@test.com"

Agent:
1. 打开报名表网址
2. 检测字段
3. 直接使用用户提供的信息填写
4. 展示结果确认

---

Error Handling

表单无法加载       → 提示用户检查网址
字段检测失败       → 提示手动填写或提供更多信息
填写失败           → 记录失败字段，继续填写其他
提交失败           → 提示用户手动提交

---

Multi-Language Support

• User language → Output language
• 支持中文和英文表单

---

Limitations

• 验证码: 无法自动填写验证码
• 复杂表单: 动态加载的表单可能需要额外处理
• 文件上传: 不支持自动上传文件
• 支付表单: 不支持自动填写支付信息

---

Privacy & Security

Data Handling

• ✅ No data uploaded to external servers
• ✅ All processing done locally
• ⚠️ Browser profile accessed during execution
• ⚠️ Form data entered on websites

Recommendations

1. Trusted sites only: Only use on trusted websites
2. Review before submit: Always review before submitting
3. Sensitive data: Be careful with sensitive information
4. Separate profile: Use separate browser profile for testing

---

Notes

• Requires OpenClaw v2026.3.22+ with browser automation
• Works with any standard HTML form
• Supports input, select, textarea, checkbox, radio
• Can save and reuse form data templates