Form Submit and Styling issues on IOs

Design help Custom code
1

Hello Community,

I have two tricky problems and hope to get help from one of you Webflow brains.

On https://www.balidriver.io I have a form (which I connected with MailChimp) including two Form Fields for a Date & Time Picker.

=> First Date & Time
=> Latest Date & Time

I added a “Date and Time picker” JS Scripts into the page :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>

var Webflow = Webflow || [];
Webflow.push(function () {
	document.getElementsByClassName('date').flatpickr({
  	enableTime: true,
    dateFormat: 'M d Y - H:i K'
  });
});
</script>

The script is fired through the GetElementByGlassName “date” which I added to the related Form Fields Class as class “date”.

Bildschirmfoto 2020-12-23 um 15.06.45
Bildschirmfoto 2020-12-23 um 15.06.452806×1430 604 KB

So far so good. In the Desktop Browser (Chrome / Safari) everything works OK. Datepicker appears and email is transferred to Mailchimp properly. Even though my Styling is overwritten by the WebKit styling. (Thats just a minor thing but if someone has a hack for me to overrule the styling would be great … )

Anyway - the 1st Problem is now:

  • on My iPhone X - iOs the complete styling of the two Fields are destroyed and the JS Integration I mentioned forces the iPhone - own “Date and Time picker”. BUT in a different format as defined within my script. The script defines “Month dd yyyy - hh:mm” the iPhone writes in dd.mm.yyyy, hh:mm .

=> Any solution because of the styling and date?

However the 2nd Problem: if I pick the Date through the iPhones Date Time Picker and submit the form it get blocked before sending. It says “Invalid Value”. Everything in the Form field are set to “plain” so that couldn’t force the issue and for desktop it seems to work.

It has something to do with adding “date” to the fields class, to trigger the Date Picker. If I’m taking it out it´s working on the mobile but obviously not forcing the date & time picker which was the initial goal. So denying to send the form entries is because of the date and time picker- I guess … changing the class to “date” to trigger seems to be the problem but why? and Only on iOS / iPhone?

OR is the iPhone internal Date Picker the problem and its different format of the Date and time, which doesn’t let me submit the form?

UPDATE: I tried it on my iPad Pro iOS and the the internal Date picker throws also the same format "dd.mm.yyyy, hh:mm " and not “Month dd yyyy - hh:mm” but the submission gets through. So I guess its not a Format problem of the Date and Time and also not a Safari problem … its seems to be a problem with the iPhone and the css Styling. Desperate!!!

Any Idea … I know this is probably a tricky one.

best
Oliver

PREVIEW MODE PAGE:
https://preview.webflow.com/preview/balidriver?utm_medium=preview_link&utm_source=designer&utm_content=balidriver&preview=cf4cbb84cb6a8317ee4576f3fa607d58&mode=preview