CS-Forms | Invalid date format

[xoa]

After a while, I’m back to CS Forms.
But I’m still struggling to understand why I always get “Invalid date format” with my range datepicker!

These are my settings:

[ruenel]

Hello @xoa,

Thanks for writing in! I copied your Date Picker settings and I could not replicate the issue.

We would be happy to double check your site if we can log in. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[xoa]

@ruenel

I attached the secure note.

[christian]

Hey @xoa,

This looks like a bug in Pro. Please try adding the following code in your Page JS

if (window.flatpickr) {
  // Forces all locales to use the " to " range separator
  window.flatpickr.l10ns.default.rangeSeparator = ' to ';
}

If that doesn’t work, try this:

window.csGlobal.csHooks.filter('cornerstone-form-datepicker-args', function(args) {
  if (args.locale) {
    args.locale.rangeSeparator = ' to ';
  }
  return args;
});

Please let us know if any of that works and we’ll report this to our development team.

Thanks.

[xoa]

@christian

Thank you. I tried both code snippets in my Page JS, but unfortunately none of these work.

[charlie]

Using a different locale then English for the date range is not going to validate properly right now. I will release an update for this later this week. In the meantime I can only suggest you use English as the locale if using the range feature. I can update this thread when I make the update. Have a great day.

[xoa]

I switch to English for now. Please let me know if you have found a fix for this. Thanks.

EDIT:

In the meantime could you also please take a look at

1. Why does it take so long to validate the form? Roughly over 10 seconds and there is no “progress indicator” which tells the user, that it is indeed validating or loading.

2. Why the Lottie it not shown in the success message and the hero image disappears?

Thank you very much.

[christian]

Hey @xoa,

1. Slow Validation / ~10-Second Delay

• Cause: The form is waiting on slow external anti-spam checks (reCAPTCHA/Turnstile) or a slow mail server connection when sending email notifications.
• Solutions:
  • Fix Email Sending: Configure your SMTP plugin to use a mail service like Mailgun, SendGrid, or Postmark rather than relying on free server mail, which often stalls.
  • Check Spam Settings: Ensure your Captcha API keys (Google reCAPTCHA, Turnstile, or hCaptcha) are valid. Misconfigured or invalid keys cause external API calls to time out after several seconds.
  • Streamline Actions: In the Form’s Actions tab, remove any unnecessary webhooks or external integrations that may be hanging during submission.

---

2. No Progress Indicator / Loading Spinner

• Cause: Cornerstone Forms does not show a loading indicator automatically unless you manually insert the element and set up selectors.
• Solutions:
  • Add the Loading Element: In the Cornerstone Builder, add the built-in “Loading Area” element directly inside your Form layout.
  • Configure AJAX Selectors: In the Form element settings, navigate to AJAX Selectors and enter your form container’s class or ID (e.g., .cs-form or #my-form-id). This tells Cornerstone Forms which container to lock and show the loading overlay on during submission.

---

3. Lottie Animation Missing in Success Message

• Cause: Replacing content via AJAX breaks the JavaScript initializer required to play Lottie animations.
• Solutions:
  • Use an Animated GIF or SVG: Replace the Lottie element in the success message with an animated GIF or a CSS-animated icon/SVG. These load purely through standard HTML/CSS and do not rely on JavaScript to re-initialize after AJAX content swaps.
  • Re-trigger via Custom JS: If you must use Lottie, add a small custom script to your site’s custom JS settings that listens for the form submission event and re-initializes Lottie elements on the page after submission completes.

Regretfully, we cannot help with custom codes. If you need help or recommendations on this, you can subscribe to our One service.

---

4. Hero Image Disappearing

• Cause: Cornerstone Forms defaults to replacing the entire page <body> when no specific AJAX target selector is configured, or the selected container includes the hero section.
• Solutions:
  • Set Specific AJAX Selectors: In the Form element settings, specify a precise container selector for just the form (e.g., .my-form-wrapper). This forces Cornerstone Forms to update only the form container upon submission, leaving the rest of the page (including the hero image) untouched.
  • Separate Layout Structure: Ensure your Hero Section and Form are in separate structural wrapper containers in the page builder so that replacing the form area never impacts the hero layout.

[xoa]

Thank you very much for your answer. I’ll go trough every step, one by one and try things out.

[prakash_s]

You are most welcome, @xoa

[xoa]

It’s me once again.

I was able to fix almost everything. The biggest issue was a wrong hierarchy for my form, divs, success message etc.

But I still couldn’t figure out, what is causing the delay when sending the form. It is not related to any of your mentioned causes.

But now the behavior is different. It’s not stuck for 10s, now you can click the submit button a few times, the loading animation is flashing up shortly (email is also sent at that moment btw). And if you wait a bit longer, everything works as it should.

Maybe you can take a look once again and try it by yourself. Thanks a lot!

[charlie]

The Forms 1.0.11 update has a fix for your validation issue when using the Date range and a non English locale. Have a great day.

[xoa]

The fix seems to work. Thanks a lot for that fast update.

[ruenel]

You are most welcome, @xoa.