Using Forminator as for booking request form

Hi
I am using Forminator for a restaurant's booking system. See https://santorininoosa.com.au/book-here/
For the Date Field, settings for the date can be "All Dates", "Days of the Week or Restrict a Date. I would like to be able to restrict dates for when the restaurant is booked out AND ALSO use the Days of the Week option. Can this be done or do I need to request an update to the plugin?

Also when the user clicks on the Date Field a calendar pops up but the Month and Year field do no display. Is this a bug or am I doing something wrong?

  • Adam Czajczyk

    Hi Geoff Trebilco

    I hope you're fine today!

    The month and year should be showing up in the drop-down field, defaulting to current ones. These selections should be empty when the calendar pops up. I took a look at your booking page and there's some error in the console showing up in relation to Forminator so that suggests that this is an issue specific to the site and most likely related either to some specific configuration setting or, more probably, a conflict with the theme or some other plugin.

    It would be best to run a conflict test on site: switch it to the Twenty Seventeen or Twenty Nineteen theme and disable all the plugin except Forminator, then check if this makes the month and year show up. If so, then start enabling plugins back one by one (and the theme at the end), each time checking the calendar, until the issue occurs again. The last enabled plugin (or theme) would be the most likely culprit and we could take it from there.

    As for the date picker settings. Currently it's "either this or that" and there's no "out of the box" way to block certain dates while still using "days of the week" option. However, there's an API in Forminator that can be used to "extend" it so I could consult that with our developers to see if it could be used to achieve this.

    That being said, taking the "nature" of your questions into account, may I move it to the Support forum (so it became a support ticket and we could assist you further) form the Members forum (which is mostly for Members only discussions)?

    Best regards,
    Adam

  • Geoff Trebilco

    I received this reply on the Studiopress Community forum:
    There's a combination of things affecting the drop downs, all CSS settings.

    First, the height in this plugin CSS is to small to be effective with this theme:

    .forminator-calendar--default .ui-datepicker-header .ui-datepicker-title select {
    height: 26px;
    }
    Next, the padding and font size for form elements in this theme are too big for this plugin:

    input, select, textarea {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0;
    box-shadow: none;
    color: #000;
    font-size: 20px;
    font-size: 2rem;
    font-weight: 200;
    padding: 20px;
    width: 100%;
    }
    You need to make the font size smaller and reduce the padding. Right now, the padding fills in the entire field so the drop down text is hidden.

    I changed fontsize to 1.8rem and padding to 2px but am unable to change the height in custom css - it keeps reverting back to 26px;
    So problem is part solved but not completely.

    • Predrag Dubajic

      Hi Geoff,

      Can you try going to Appearance > Customize mode in your WP admin, expand the Additional CSS field and add this code there:

      #ui-datepicker-div.forminator-calendar--default .ui-datepicker-header .ui-datepicker-title select,
      #ui-datepicker-div.forminator-calendar--default .ui-datepicker-header .ui-datepicker-next,
      #ui-datepicker-div.forminator-calendar--default .ui-datepicker-header .ui-datepicker-prev {
          height: 40px;
      }
      
      #ui-datepicker-div.forminator-calendar--default .ui-datepicker-header .ui-datepicker-next:before,
      #ui-datepicker-div.forminator-calendar--default .ui-datepicker-header .ui-datepicker-prev:before {
          line-height: 40px;
      }
      
      .ui-datepicker-title input, .ui-datepicker-title select, .ui-datepicker-title textarea {
        font-size: 1.8rem;
        padding: 2px;
      }

      Save the changes and that should apply both height and font size so the picker will look like this:

      Best regards,
      Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.