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

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:

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

Outputs¶

Every other field is whatever the form posted, spread across the top level of the output. A form posting name, email and message produces {{task_<ID>_name}}, {{task_<ID>_email}} and {{task_<ID>_message}}.

Real-World Examples¶

Capture an enquiry into the CRM¶

Form Submission
  └─ Match to Client     contact_email from the form
      └─ Workflow Note   log the enquiry

Create the client when nobody matches¶

Form Submission
  └─ Match to Client     contact_email from the form
      └─ If Statement    run is false
          └─ New Client  create the record

Confirm to the person who submitted¶

Form Submission
  └─ Email   send the confirmation to the submitted address

Assign the enquiry fairly¶

Form Submission
  └─ Round Robin   cycle through the sales team
      └─ Email     notify {{task_30001_response}}

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;

1. Add visual loading state to prevent multiple clicks

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" />

These will be captured and available in your workflow.

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