I have so far created 2 forms, using your fantastic plugin!!
great, do leave a review when you have a moment to spare.
1. For some reason, the first 4 fields, (that lay side by side in desktop mode), do not convert to responsive fields, (one below the other), when viewed in mobiles (see here: 1st image Another form with similar layout, displays responsivelly however.
it adapts to the width of the screen, the more real estate available, the more columns are displayed. Full collapse of columns will happen below 481px screens.
2. Where would I go to change the ‘date format’ displayed in first 2 fields so that users can input according to: dd/mm/yyyy ? Also, after changing the format, I’d like if possible to display my placeholder text instead!
this is determined by your browser, not the plugin. If your browser locale is set to en_US it will display date fields format in mm/dd/yyyy.
place holder text is something that is controlled by the CF7 plugin, not the Smart grid extension so best to check the cf7 documentation for that.
3. When form is viewed in Safari, and the ‘date field’ is clicked, this weird date format appears, (that was not there previous days when testing the form). See here: 2nd screenshot on weird date display
your screenshot link does not work, can you resend it?
As a general rule, all the fields (with the exception of the dynamic dropdown and benchmark fields) are set by cf7 plugin or another extension. The way these fields behave in various browsers is either as a result of the cf7 plugin field element structure or the browser itself and generally not related to this plugin.
4. Is there a way that the date fields display calendar upon click in all browsers instead of having to click on arrow that appears on right of field (when viewed in Chrome for example)?
your screenshot link doesn’t work either.
As of html5 date-fields display calendars by default. Each browser has implemented its own calendar display and therefore this disparity you’re talking about. One way around this issue if to use the jQuery Datepicker plugin by turning text fields into date fields. This will provide uniformity across browsers. You can also style your calendars with the datepicker.
5. The rows appear too close to each other, unless I input some labels to them, (which I don’t really want). What would be the best markup (?), to fix this? Will there be a ‘spacer’ feature in future updates when in Grid mode?
my general approach to front-end styling is to do a minimum. styling is so subjective from one user to the next. So I am not keen to add more margin to columns as such.
I have made sure that the plugin remains as flexible as possible (you can customise the form layouts individually or collectively using the multiple actions and filters provided (see the FAQs + screenshots on the plugin page to explore all the possibilities). You can even build a plugin extension that will systematically add additional styling.
The goals of this plugin are explained in this thread and as such, it is not to create an environment to compete with form plugins that minimise the technical knowledge of HTML form constructs at the expense of complexifying the cf7 plugin. There are plenty of form plugins that do a fine job of this. CF7 remains a powerful tool due to its simplistic approach to form construct.
I build complex forms for clients for analytical tools and I needed a plugin that could simplify the work of building such forms.
So this plugin eases form creation within the CF7 plugin framework, but as a web-developer, you still need to tweak and adjust the results as per your needs, and that is the downside of retaining this flexibility.
I hope you appreciate the finer points of this approach and hopefully, I have clarified your points.
