- This topic has 9 replies, 2 voices, and was last updated 5 years, 6 months ago by
.
quick question: in Contact Form 7 can the date field have a calendar for choosing the day?
thanks!
Hi @natamike,
I hope you are well today and thank you for your question.
You can achieve it as described on the below page.
https://cmoreira.net/blog/date-and-time-picker-field-on-contact-form-7/
Best regards,
Shufflehound teamThanks again for the infinite patience.
I tried the Date and Time Picker that you suggested and it works well, however on the Iphone (and other mobile) the calendar appears too large and you cannot use it.
I looked in the developer forum but it says nothing about it. Do you know a way to solve it?You have to contact the plugin support to resolve it.
As you suggested, I contacted the developer and wait for them reply.
In the meantime I wanted to emphasize that with the Chrome browser the contact form works perfectly and also with a calendar field!
Instead with Safari on Mac and on Ipad / Iphone the date field does not appear at all and also the last two lines (“hour” and “persons”) have the title in bold. This also happens on your public demo on Themeforest. In Chrome the text is the same as the other fields.
Try it yourself.Regarding the missing date filed, please contact the plugin support.
You can resolve the bold text issue by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.wpcf7-form p.SelectBox span { font-weight: 300 !important; }I received a reply from the developer who told me to add this custom css to fix the issue:
.xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th { padding: 0 !important; }I embed it on Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code, but not working yet.
I’m wrong somethings? Do you thing this css code is write right for you theme?Thanks.
The CSS code has nothing to do with the theme.
Please clear the cache If you are using any.
If it is still not working then please contact the developer again.
I solved the calendar problem and now everything is working fine.
There is only one small formatting flaw in the mobile version that I can’t fix, as in the photo I attach.
thanks
In that case, we can remove that line from mobile devices using below custom CSS code.
@media (max-width: 555px){ .sh-divider-content:before, .sh-divider-content:after { display: none; } }
