WOO Form Builder - Advanced Product Forms for WooCommerce

Overview

This page contains practical, copy-paste-ready code examples for common use cases in Woo Form Builder. Each example includes explanation, code snippets, and expected output.

📝

Form Examples

Complete form configurations

🧮

Formula Snippets

Pricing calculations

🎨

Custom Styling

CSS customization

⚡

JavaScript

Interactive behaviors

1. Basic Product Calculator

Calculate price based on width and height dimensions. Perfect for custom prints, banners, or flooring.

JavaScript

function calculatePrice() {
  const width = getFieldValue('width');
  const height = getFieldValue('height');
  const pricePerSqM = 2.5;
  
  if (width && height) {
    const area = width * height;
    return area * pricePerSqM;
  }
  return 0;
}

Use Case: Custom banner printing, vinyl flooring, fabric rolls

Formula: Width × Height × $2.50 per m²

2. Quantity-Based Tiered Pricing

Apply discounts based on quantity ranges. Bulk discounts made simple.

JavaScript

function calculatePrice() {
  const quantity = getFieldValue('quantity');
  const basePrice = 10;
  
  if (quantity >= 100) {
    return quantity * basePrice * 0.7; // 30% discount
  } else if (quantity >= 50) {
    return quantity * basePrice * 0.8; // 20% discount
  } else if (quantity >= 10) {
    return quantity * basePrice * 0.9; // 10% discount
  }
  
  return quantity * basePrice;
}

💡 Pricing Tiers

1-9 units$10.00 each

10-49 units$9.00 each (10% off)

50-99 units$8.00 each (20% off)

100+ units$7.00 each (30% off)

3. Custom HTML Layout

Create a feature comparison table using Custom Code field.

HTML

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px;">
  <div style="text-align: center; padding: 30px; border: 2px solid #e5e7eb; border-radius: 12px;">
    <div style="font-size: 48px; margin-bottom: 15px;">🚀</div>
    <h3 style="font-size: 20px; font-weight: bold; margin-bottom: 10px;">Fast Setup</h3>
    <p style="color: #6b7280;">Get started in minutes</p>
  </div>
  <div style="text-align: center; padding: 30px; border: 2px solid #3b82f6; border-radius: 12px; background: #eff6ff;">
    <div style="font-size: 48px; margin-bottom: 15px;">💎</div>
    <h3 style="font-size: 20px; font-weight: bold; margin-bottom: 10px;">Premium Quality</h3>
    <p style="color: #1e40af;">Professional results</p>
  </div>
  <div style="text-align: center; padding: 30px; border: 2px solid #e5e7eb; border-radius: 12px;">
    <div style="font-size: 48px; margin-bottom: 15px;">🎯</div>
    <h3 style="font-size: 20px; font-weight: bold; margin-bottom: 10px;">Accurate</h3>
    <p style="color: #6b7280;">Precise calculations</p>
  </div>
</div>

Preview:

🚀

Fast Setup

Get started in minutes

💎

Premium Quality

Professional results

🎯

Accurate

Precise calculations

4. Date-Based Pricing

Apply different prices based on selected dates or seasons.

JavaScript

function calculatePrice() {
  const date = getFieldValue('event_date');
  const guests = getFieldValue('guests');
  const basePrice = 50;
  
  if (!date || !guests) return 0;
  
  const eventDate = new Date(date);
  const month = eventDate.getMonth(); // 0-11
  
  // Peak season (June-August): +50%
  if (month >= 5 && month <= 7) {
    return guests * basePrice * 1.5;
  }
  
  // Holiday season (Nov-Dec): +30%
  if (month >= 10) {
    return guests * basePrice * 1.3;
  }
  
  // Regular season
  return guests * basePrice;
}

5. Conditional Add-ons

Show/hide additional options based on customer selections.

JavaScript

function calculatePrice() {
  let total = 0;
  const baseProduct = getFieldValue('product_type');
  
  // Base product price
  if (baseProduct === 'basic') total += 99;
  else if (baseProduct === 'premium') total += 199;
  else if (baseProduct === 'enterprise') total += 499;
  
  // Add-ons (checkboxes)
  const addons = getFieldValue('addons') || [];
  
  if (addons.includes('support')) total += 50;
  if (addons.includes('training')) total += 100;
  if (addons.includes('customization')) total += 200;
  
  return total;
}

6. Custom CSS Styling

Style your form with custom CSS for a unique look.

CSS

.wfb-form-wrapper {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.wfb-field-label {
  color: white;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.wfb-text-field,
.wfb-number-field,
.wfb-textarea-field {
  border: 2px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.95);
  border-radius: 12px;
  padding: 15px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.wfb-text-field:focus,
.wfb-number-field:focus,
.wfb-textarea-field:focus {
  border-color: white;
  background: white;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.3);
  transform: translateY(-2px);
}

.wfb-submit-button {
  background: white;
  color: #667eea;
  padding: 15px 40px;
  border-radius: 12px;
  font-weight: bold;
  font-size: 18px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.wfb-submit-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 25px rgba(0,0,0,0.3);
}

7. Real-time Validation

Add custom JavaScript validation for complex requirements.

JavaScript

// Custom validation function
function validateForm() {
  const email = getFieldValue('email');
  const phone = getFieldValue('phone');
  const age = getFieldValue('age');
  
  // Email validation
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    showError('email', 'Please enter a valid email address');
    return false;
  }
  
  // Phone validation (US format)
  const phoneRegex = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
  if (!phoneRegex.test(phone)) {
    showError('phone', 'Please enter a valid phone number (XXX-XXX-XXXX)');
    return false;
  }
  
  // Age validation
  if (age < 18) {
    showError('age', 'You must be 18 or older to order');
    return false;
  }
  
  return true;
}

// Attach to form submit
jQuery('#wfb-form').on('submit', function(e) {
  if (!validateForm()) {
    e.preventDefault();
    return false;
  }
});

8. Progress Calculation

Calculate and display form completion percentage for multi-step forms.

JavaScript

function updateProgress() {
  // Get all required fields
  const requiredFields = [
    'name',
    'email',
    'phone',
    'address',
    'product_type',
    'quantity'
  ];
  
  let completed = 0;
  
  requiredFields.forEach(fieldId => {
    const value = getFieldValue(fieldId);
    if (value && value.trim() !== '') {
      completed++;
    }
  });
  
  const percentage = Math.round((completed / requiredFields.length) * 100);
  
  // Update progress bar
  jQuery('.wfb-progress-bar').css('width', percentage + '%');
  jQuery('.wfb-progress-text').text(percentage + '% Complete');
  
  return percentage;
}

// Call on field change
jQuery('.wfb-field input, .wfb-field select, .wfb-field textarea').on('change', function() {
  updateProgress();
});

Best Practices

💡 Coding Tips

✓

Test Thoroughly: Always test calculations with edge cases and extreme values

✓

Add Comments: Document your code so others (and future you) understand the logic

✓

Handle Errors: Check for empty values and invalid inputs before calculations

✓

Use Descriptive Names: Name your fields and variables clearly for better maintainability

✓

Optimize Performance: Avoid complex calculations on every keystroke, use debouncing

Security Note

Custom code runs in the customer's browser. Never include sensitive data or API keys in your code. Server-side validation should always be performed for critical operations.