Form Submission Trigger¶

Overview¶

The Form Submission trigger captures data when visitors submit forms on your website. This creates a seamless connection between your website and your automation workflows, enabling instant follow-ups, lead nurturing, and data processing.

When to use this trigger:

• Capture contact form submissions
• Process lead generation forms
• Handle registration forms
• Manage support ticket submissions
• Collect survey responses
• Process quote requests

Quick Start¶

1. Create a new workflow
2. Add a Form Submission trigger as the first task
3. Copy the embed code provided
4. Add the embed code to your website
5. Configure form field mappings
6. Save and enable the workflow
7. Test by submitting your form

[SCREENSHOT NEEDED: Form Submission trigger task panel showing embed code and configuration]

Setting Up Your Form¶

Step 1: Add the Embed Code¶

After creating your Form Submission trigger, you'll receive an embed code. This code must be added to your website.

Embed Code Example:

<script src="https://api.basecloudglobal.com/v2/clientzone/forms/abc123.js"></script>

Where to add it: - WordPress: Use a plugin like "Insert Headers and Footers" or add to your theme's footer.php - HTML Website: Add before the closing </body> tag - React/Vue/Angular: Import in your main component or index file - Shopify: Add to theme's theme.liquid file

Step 2: Mark Your Forms¶

The embed code monitors your website for form submissions. To connect a form to your workflow, add a data attribute to your form:

<form data-basecloud-form="contact">
  <input type="text" name="name" placeholder="Your Name">
  <input type="email" name="email" placeholder="Your Email">
  <textarea name="message" placeholder="Your Message"></textarea>
  <button type="submit">Submit</button>
</form>

Key Points: - Add data-basecloud-form="identifier" to your <form> tag - The identifier helps you track which form was submitted - Use descriptive identifiers like "contact", "quote", "registration"

Step 3: Configure Field Mappings¶

Map your form fields to BaseCloud data fields so you can use them in subsequent tasks.

Example Mapping:

[SCREENSHOT NEEDED: Field mapping interface showing form fields and BaseCloud field dropdowns]

Form Integration Methods¶

Method 1: Standard HTML Forms¶

Works with any standard HTML form on your website.

<form data-basecloud-form="newsletter" action="#" method="POST">
  <input type="email" name="email" required>
  <button type="submit">Subscribe</button>
</form>

The embed code automatically intercepts the submission and sends data to your workflow.

Method 2: AJAX/JavaScript Forms¶

For forms that submit via AJAX, you can manually trigger the workflow:

// After your AJAX submission succeeds
BaseCloud.submitForm('newsletter', {
  email: formData.email,
  name: formData.name
});

Method 3: Form Builder Integration¶

If you use form builders (Gravity Forms, Contact Form 7, Elementor), you can: 1. Use their webhook/action hooks to send data to BaseCloud 2. Or use the standard embed code if they generate standard forms

Output Fields¶

When a form is submitted, the Form Submission trigger outputs the form data:

Accessing Form Data:

In subsequent tasks, reference form fields using flattened notation:

Hi {{task_55123_name}},

Thank you for contacting us. We received your message:

"{{task_55123_message}}"

We'll respond to {{task_55123_email}} within 24 hours.

Real-World Examples¶

Example 1: Contact Form with Instant Response¶

Form Fields: Name, Email, Phone, Message

Workflow: 1. Form Submission Trigger - Capture contact form 2. Match to Client - Find existing contact record 3. Email - Send auto-reply to customer 4. Email - Notify sales team

Example 2: Lead Generation with CRM Integration¶

Form Fields: Name, Email, Company, Industry, Interest

Workflow: 1. Form Submission Trigger - Capture lead form 2. Match to Client - Find/update contact 3. Edit Client - Add tags and custom fields 4. If Task - Check industry value - "Technology": Assign to tech sales rep - "Healthcare": Assign to healthcare rep 5. Email - Send personalized follow-up

Example 3: Quote Request with Calculation¶

Form Fields: Name, Email, Service Type, Quantity

Workflow: 1. Form Submission Trigger - Capture quote request 2. Code Task - Calculate pricing based on service and quantity 3. Variable Task - Store calculated values 4. Email - Send quote to customer 5. Match to Client - Log quote request

Example 4: Event Registration¶

Form Fields: Name, Email, Phone, Dietary Requirements

Workflow: 1. Form Submission Trigger - Capture registration 2. Match to Client - Find existing attendee record 3. Edit Client - Add "Event 2024" tag 4. Google Sheets - Add row to attendee list 5. Email - Send confirmation with event details 6. Delay - Wait until 1 day before event 7. Email - Send event reminder

Example 5: Support Ticket Creation¶

Form Fields: Name, Email, Issue Category, Description, Priority

Workflow: 1. Form Submission Trigger - Capture support form 2. Match to Client - Find existing contact 3. MySQL Query - Create support ticket record 4. If Task - Check priority - High: Notify support immediately - Normal: Add to queue 5. Email - Send ticket confirmation

Form Success Handling¶

Default Behavior¶

By default, after a successful submission: - The form shows a success message: "Thank you! Your form has been submitted." - The form can be submitted again (not disabled)

Custom Success Messages¶

You can customize the success message in the Form Submission trigger settings:

Thank you for contacting us! We'll get back to you within 24 hours.

Redirect After Submission¶

To redirect users to a thank-you page, configure the redirect URL:

https://yourwebsite.com/thank-you

On-Page Confirmation¶

To show a custom element on success without redirect:

// Add this to your website
BaseCloud.onFormSuccess = function(formId, response) {
  if(formId === 'contact') {
    document.getElementById('success-message').style.display = 'block';
    document.getElementById('contact-form').style.display = 'none';
  }
};

Testing Your Form¶

Test Submission¶

1. Fill out your form on your website
2. Submit the form
3. Check the workflow execution history
4. Verify all form fields were captured correctly
5. Test subsequent tasks (emails, CRM updates, etc.)

Common Test Scenarios¶

• Empty Fields: Test with some fields left blank
• Special Characters: Test with quotes, apostrophes, line breaks
• Long Text: Test with lengthy messages
• Email Format: Test with various email formats
• Phone Numbers: Test different phone formats

Best Practices¶

✅ Do's¶

• Validate on client-side: Use HTML5 validation (required, type="email") before submission
• Show loading states: Indicate when the form is being processed
• Provide clear feedback: Show success or error messages
• Use descriptive field names: Name fields clearly (e.g., customer_email not just e)
• Test thoroughly: Submit test forms before going live
• Add honeypot fields: Include hidden fields to catch spam bots
• Consider data privacy: Add GDPR/privacy compliance notices

❌ Don'ts¶

• Don't submit sensitive data without SSL: Always use HTTPS
• Don't skip error handling: Handle network failures gracefully
• Don't forget to disable submit button: Prevent double submissions
• Don't collect unnecessary data: Only ask for what you need
• Don't forget mobile testing: Test forms on mobile devices

Troubleshooting¶

Form Submissions Not Triggering Workflow¶

Possible Causes: - Embed code not added to website - data-basecloud-form attribute missing - JavaScript errors on page - Workflow is disabled - Ad blockers blocking the script

Solutions: 1. Verify embed code is in your website HTML 2. Check browser console for JavaScript errors 3. Ensure data-basecloud-form attribute is present 4. Confirm workflow toggle is ON 5. Test with ad blocker disabled

Some Form Fields Not Captured¶

Possible Causes: - Field name attribute missing - Field name doesn't match mapping - Field is disabled

Solutions: 1. Ensure all inputs have name attributes 2. Check field mapping configuration 3. Verify fields are enabled when form is submitted

Form Submits But No Data Appears¶

Possible Causes: - Form submits before BaseCloud script loads - Race condition with page redirects

Solutions: 1. Ensure embed code is in <head> or early in <body> 2. Add small delay before redirect:

form.addEventListener('submit', function(e) {
  e.preventDefault();
  // Submit to BaseCloud
  setTimeout(() => {
    // Then redirect or show success
  }, 500);
});

Duplicate Submissions¶

Possible Causes: - User clicking submit multiple times - Form not being disabled after submission

Solutions: 1. Disable submit button on first click:

button.disabled = true;

Advanced Features¶

Multi-Step Forms¶

For multi-step forms, you can: 1. Submit partial data at each step using BaseCloud.submitForm() 2. Or submit all data at the final step with all fields included

File Uploads¶

To handle file uploads: 1. Use File task after Form Submission 2. Send file URL in form submission 3. Process file in subsequent task

Conditional Form Fields¶

If your form shows/hides fields based on user selections: - Only submitted fields will be captured - Use If tasks to handle optional fields - Check if field exists before using it

CAPTCHA Integration¶

To add CAPTCHA verification: 1. Add reCAPTCHA to your form 2. Include CAPTCHA token in form submission 3. Use Code task to verify token 4. Use If task to stop workflow if verification fails

Frequently Asked Questions¶

Can I use this with WordPress forms?¶

Yes! Add the embed code to your WordPress site, then add data-basecloud-form="identifier" to your form element. Most form builders allow adding custom attributes.

Does this work with AJAX forms?¶

Yes, the embed code handles both standard and AJAX form submissions. For custom AJAX implementations, use the BaseCloud.submitForm() JavaScript function.

Can I have multiple forms on one page?¶

Absolutely! Use different data-basecloud-form identifiers for each form. You can either: - Create separate workflows for each form - Use one workflow with an If task to check task_55123_form_id

What happens if the form is submitted while offline?¶

The submission will fail. You should implement your own retry logic or queue system if offline support is critical.

Can I prevent spam submissions?¶

Yes, use these techniques: - Add honeypot fields (hidden fields that bots fill out) - Add CAPTCHA verification - Rate limit by IP address using Code task - Validate email format using formatter tasks

How do I handle checkbox or radio button groups?¶

Checkboxes and radio buttons work like any other field: - Radio buttons: Value of selected option - Single checkbox: "on" if checked, not included if unchecked - Checkbox group: Separate fields for each checkbox

Can I pre-fill form fields?¶

Yes, use standard HTML to pre-fill forms:

<input type="text" name="name" value="<?php echo $user_name; ?>">

Is there a limit on form field count?¶

No hard limit, but keep forms concise for better user experience. If you need many fields, consider a multi-step form.

Can I track which marketing campaign led to the submission?¶

Yes! Add hidden fields to your form:

<input type="hidden" name="utm_source" value="google">
<input type="hidden" name="utm_campaign" value="spring2024">

Next Steps: - Inbound Email - Trigger workflows from incoming emails - Webhook In Trigger - Trigger workflows from external systems - Match to Client Task - Find/update contact records