DatePicker and TimePicker not showing for form builders

Hi @nkefor

Thank you for reaching out, and we apologies for the delayed response.

I checked the page where the issue occurred and saw the issue on the datepicker and timepicker inside the popup. Upon investigation, it seems you may need to add a CSS to increase the z-index of the datepicker and timepicker.

You may use this CSS and add it to your Appearance – Additional CSS:
.flatpickr-calendar.open,
.ui-timepicker-wrapper {
z-index: 1999999999 !important;
}

Here’s the output when the CSS is added: https://www.loom.com/share/f050b2a35c4040e7a47c43fe91f43be7

Hope that helps. If your issue is resolved please take a moment to rate and review the plugin.
If you still need help please message us directly at https://wppopupmaker.com/support/

Hi @belimperial

Thank you very much for your response. Adding the CSS solved the issue. The popup works with the date and time picker now. I do have one more issue with the same form. This is no longer related to the Date and Time Picker.

The issue is, when the form gets filled and submitted, the thank you message is not displayed immediately. However, when you click on the popup again, that is when the thank you message is displayed. Please take a look at this as well.

Regards,

Hi @nkefor

Thanks for getting back!

That’s great to hear that the datepicker and timepicker are now working. I made two tests on the popup and was able to see the issue on the popup thank you message. I did not see any errors for Popup Maker in the browser console, but something is overriding the function to display the popup thank you message.

Could you please also add this CSS and use an incognito window to test the popups:
.pum-overlay.pum-active,
.pum-overlay.pum-active .popmake.active {
opacity: 1 !important;
display: block !important
}

Let us know how it goes or if this fixes the issue.

Hi @belimperial

That solved the issue. Thank you very much. It looks like the popup overrode so many CSS styles that i applied on the form. I was able to inspect the form and reapplay some of the styles manually under custom CSS. However, i’m still not able to reapply the style for button hover. It is supposed to show the color #636363 on mouse hover, but its not working. Also, how do i prevent form resubmission? The pop seems to resubmit the form when clicked or page refreshed.

Regards,

Hello @nkefor

Thank you for getting back and we apologize for the delayed response.

I’m glad things are now working on your site. For the hover, kindly add an important rule on the CSS. For example:

button:hover {
  background-color: yellow !important;
}

While for the resubmit issue, kindly enable the AJAX in the settings of WPForms.

I hope that helps. If you still need help please message us directly at https://wppopupmaker.com/support/, but if the issue is resolved, kindly take a moment to rate and review the plugin.

@belimperial – I am having the same issue with the datepicker being displayed behind the popup on this site: https://jaredt3.sg-host.com/reservation/

To get to the datepicker fields, please click “Make Reservation” > Choose Yes Existing Customer > Fill the Info and Proceed to Step 3. There you will find 2 datepicker fields.

Thanks in advance! I tried modifying the CSS provided above but can’t seem to target the datepicker widget directly.