Topic Tag: Content-submission forms

Problem:

The customer’s form at https://www.domain.com/apply-form/ was experiencing issues with the date picker and conditional logic fields, which were not functioning as expected. The issue was identified as jQuery not loading correctly on the page.

Solution:

Upon investigation, it was found that the Autoptimize plugin was preventing jQuery from loading, which affected the date picker and conditional logic functionalities. The solution steps included:

1- Disabling the Autoptimize Plugin Temporarily: The plugin was disabled, which restored the date picker functionality on the form page.

2- Recommendation for Long-term Fix: The customer was advised to reach out to Autoptimize plugin support to determine why jQuery wasn’t loading on all pages. This would allow them to keep the plugin enabled without impacting jQuery-dependent functionalities.

Problem:

The customer wants to place the label behind the input in the search form to manipulate the label based on the input status using CSS. However, the input is currently placed inside the label, making this manipulation difficult.

Solution:

I confirmed that the customer is using legacy views to create the search form.
I checked internally and found that it is not possible to separate the label from the input using shortcodes in legacy views.
As a workaround, I suggested using JavaScript to manipulate the label based on the checkbox's checked status. Here is an example code snippet:

jQuery(function($){
    $(".class_containing_your_checkbox input[type='checkbox']").change(function(event){
        var checkbox = $(event.target);
        var status = checkbox.prop('checked');
        if (status) checkbox.parent().css('background-color', '#569cc3');
        else checkbox.parent().css('background-color', '');
    });
});

The code above applies CSS rules based on whether the checkbox is selected or not. The customer needs to change the function to target the specific div class containing the checkbox and apply the desired CSS for the labels.

Problem:
Customer would like to change the option on the minutes field to 15-minute increments (0, 15, 30, 45).
Solution:
It is possible to use some jQuery to customize it and change the values of the select field.

Please add the following code to the javascript section of the form:

(function($, window) {
  $.fn.replaceOptions = function(options) {
    var self, $option;
 
    this.empty();
    self = this;
 
    $.each(options, function(index, option) {
      $option = $("<option></option>")
        .attr("value", option.value)
        .text(option.text);
      self.append($option);
    });
  };
})(jQuery, window);
 
var options = [
  {text: "0", value: 1},
  {text: "15", value: 2},
  {text: "30", value: 3},
  {text: "45", value: 4},
];
 
 jQuery("select[name$=\'minute]\']").replaceOptions(options);