CodePeople2

Hello @eparekenhulp

I visited the webpage but it is not loading the form. Probably because the WP Rocket is interfering. Did you inserted the shortcode with the iframe tag and purged the website’s cache?

Best regards.

Hello @eparekenhulp

Thank you so much for using our plugin. The WP Rocket is loading an outdated copy of the form from the cache. Please insert the form shortcode with the iframe attribute set to 1 to ensure the page always loads an updated form copy. Eg.

[CP_CALCULATED_FIELDS id="123" iframe="1"]

In the shortcode replace the Form ID with the correct one.

If you are inserting the form visually through the WordPress editor, you need only to tick the iframe checkbox in its settings:

Best regards.

Hello @blackspear

Thank you so much for using our plugin. It works fine, but you are using the incorrect apostrophe symbol to search. The correct symbol is ’ not '

So, the text to search would be buyer’s

Please watch the following video:

https://resources.developers4web.com/cff/tmp/2025/06/23/video-search_o.mp4

Best regards.

Hello @lchang79

First, if you’ve enabled the “Show Dropdown Year and Month” option in the calendar settings, the selectable date range is controlled by the “Year Range” attribute. By default, this is set to “-10:10”, meaning your year dropdown will span from (current year – 10) up to (current year + 10). You can adjust this interval to whatever you need, for example, “-30:10” or any other range that suits your application.

If you want to disable the datepicker on mobiles, you can simply to enter the style definition below through the “Customize Form Design” attribute in the “Form Settings > Advanced Settings” tab:

@media (max-width:710px){
.ui-datepicker{display:none !important;}
}

Best regards.

Hello @lchang79

Thank you so much for using our plugin.

You can implement your equation as follows (Note that I used the fieldname5 because it is the date/time field on your form):

(function() {
    if ( fieldname5|r == '' ) return '';
    let selectedDate = DATEOBJ(fieldname5);
    
    if ( selectedDate <= DATEOBJ('2009-05-30', 'yyyy-mm-dd') ) return 'U16';
    if ( selectedDate <= DATEOBJ('2010-05-30', 'yyyy-mm-dd') ) return 'U15';
    if ( selectedDate <= DATEOBJ('2011-05-30', 'yyyy-mm-dd') ) return 'U14';
    if ( selectedDate <= DATEOBJ('2012-05-30', 'yyyy-mm-dd') ) return 'U13';
    if ( selectedDate <= DATEOBJ('2013-05-30', 'yyyy-mm-dd') ) return 'U12';

    return 'Not eligible';
})()

Best regards.

Hello @needfeed

If you require a exact position of your boxes, for each box with a number, you must adjust the width and height as well as the font-size, line height, and boxes positions, based on the screen sizes. You cannot modify the other CSS rules and maintain constant the width and height.

Best regards.

Hello @needfeed

If you need these elements to appear in the same spot on every screen size, their placement and dimensions must be driven by the container that holds them. You can’t center them based solely on the position of the number; they’ll always align relative to the parent element’s position and size.

Please provide the URL to the page containing the form.

Best regards.

Hello @needfeed

Thank you so for using our plugin. You can use the CSS rules like align-center and line-height. For example:

<span style="position: absolute; top: 44%; left: 7.5%; font-weight: normal; color: white; font-size: clamp(18px, 3vw, 40px); background: red; display: inline-block; width: 40px; height: 40px; text-align: center; line-height: 40px;" data-cff-field="fieldname8"></span>

Please note I assigned a specific width and height, and entered the same box height as line-height for centering vertically, and text-align: center for centering horizontally.

Best regards.