Hello @needfeed
Yes, of course that’s possible.
Assuming you have loaded the image into an “HTML Content” field, and the calculated field is the fieldname123, you can include a span tag (or any other tag) in the HTML Content field positioned with CSS in the place you prefer, and use the data-cff-field attribute:
<span data-cff-field="fieldname123"></span>
The plugin will display the fieldname123 value in the tag.
Finally, as the calculated field is used as an auxiliary, you can hide it by ticking a checkbox in its settings.
Best regards.
I loaded image using Media field, is it bad? How should I load it with HTML content field? With a link of ibb URL, etc?
Hello @needfeed
Loading the image with “Media” control is not bad, but you cannot include other tags with it. Using “HTML Content” fields gives you more control over the information to display.
I recorded a video to teach you the process. Please visit the following link:
https://resources.developers4web.com/cff/tmp/2025/03/21/image-label_o.mp4
Best regads.
Thank you for the great video!
I have little problems with easy thing (not easy for me).
In fieldname6 I have the data input, hich has format like this: mm/dd/yyyy
Example: 23/03/2025
I need output like this:
fieldname8 is counted like this: dd number (for example: 23) would be added just like it is if its 22 and lower (from 1 to 22).
if the dd number is bigger than 22, than the numbers of that number should be sumed, for example if 23, it’s bigger than 22, so it should be 2+3=5 and it would be 5. if its 28, then 2+8=10 and so on.
fieldname9 is counted like this: mm number (for example: 11) would be added just like it is: it’s 11 in this case.
I tried with dd in fieldname8, but my function not working:
function() {
var date = fieldname6;
var day = date.substr(0, 2);
day = parseInt(day, 10);
if (day > 22) {
var daySum = 0;
while (day > 0) {
daySum += day % 10;
day = Math.floor(day / 10);
}
return daySum;
} else {
return day;
}
}
Should I add HTML Content field? Because I only using different fieldnames for different numbers in the date: dd/mm/yyyy
Hello @needfeed
The process is simpler by using the plugin operations.
Assuming the date field is the fieldname6, the equation would be:
(function(){
if(fieldname6|r == '') return;
let d = DAY(fieldname6);
return IF(d<=22,d,SUM(String(d).split('')));
})()
Best regards.
-
This reply was modified 1 year, 2 months ago by
CodePeople2.
Hi, thanks you, it works, but I can’t find the proper CFF documentation page with this type of data, can you share a link here?
I can’t find anything related to your formula operations (r and ==) here:
https://cff.dwbooster.com/documentation
https://cff.dwbooster.com/faq
Hello @needfeed
Yes, of course. The Date/Time operations are described in the “Date Time Operations” module:
https://cff.dwbooster.com/documentation#datetime-module
The “IF” operation in the “Logical Operations” module:
https://cff.dwbooster.com/documentation#conditions-module
The use of the modifiers, like “|r”, “|n”, and “|v” is described in the yellow box in the section that describes the structure of the equations:
https://cff.dwbooster.com/documentation#modules
The “SUM” operation is part of the “Mathematical Operations” module:
https://cff.dwbooster.com/documentation#mathematical-module
Best regards.
Hi, thank you. I have created a calculator on image, on dekstop it looks nice, every number has a position, but on mobile it doesn’t fit the right places and right size of output numbers.
Is it possible to do that output numbers would be the same size and position as on dekstop device?
Here is the example of the code:
<div style="position: relative;width: 100%;max-width: 650px;margin: 0 auto">
<img src="https://i.ibb.co/k2FX0Xk5/likimo-matrica-destiny-matrix-skaiciuokle.png" style="width: 100%;height: auto" />
<!-- Fieldname8 -->
<span style="position: absolute;top: 44%;left: 7.5%;font-weight: normal;color: white;font-size: clamp(18px, 3vw, 40px)" data-cff-field="fieldname8"></span>
<!-- Fieldname14 -->
<span style="position: absolute;top: 16%;left: 19%;font-weight: normal;color: black;font-size: clamp(18px, 3vw, 40px)" data-cff-field="fieldname14"></span>
</div>
Hello @needfeed
Could you please provide the link to the page with the form to check the behavior?
Please note that in some situations it is better to use fixed sizes and position (px) instead of percentages, by using CSS @media
For example, if you assign IDs to the different tags, you can enter the style definitions as follows through the “Customize Form Design” attribute in the form settings tab:
@media screen ADN (max-width:640px){
/** YOUR STYLES FOR SMALL SCREENS **/
}
@media screen ADN (min-width:640px){
/** YOUR STYLES FOR MEDIUM SCREENS **/
}
@media screen ADN (min-width:710px){
/** YOUR STYLES FOR LARGE SCREENS **/
}
Best regards.
Oh, all good, I used Clamp and now everything is ok both on desktop and mobile 🙂
One more thing: I watched video about adding fields on CFF, link:
https://www.youtube.com/watch?v=NSac2cAN8RE&t=250s&ab_channel=CodePeopleNetFactor
But I didn’t find any video about adding a table with data, because fields, which I mentioned before, has various spaces between them, and table it’s just data without any spaces between columns and rows.
Is is possible to add table with data on CFF? 🙂
Hello @needfeed
The method is the same as described in the video, you need only to set the paddings to zero. Please watch the following video. Note the way I assigned a class name to the DIV field that contains the other fields to control the padding more easily:
https://resources.developers4web.com/cff/tmp/2025/04/27/video_o.mp4
Best regards.
Thank you, everything worked 🙂
Is it possible to change date input from finding the day and the calender to just writing the date (for example writing date input by hand: 28042025 would be seen like: 28/04/2025) in the text box? 🙂
Hello @needfeed
Thank you so much for using our plugin. You can enter the date manually as well, but with the correct date format:
https://resources.developers4web.com/cff/tmp/2025/04/28/video_o.mp4
Best regards.
Hi, here is the calculator and the output numbers in the photo.
Would it be possible to centre all the numbers in the circle? Currently, if a number has two digits, it is in a different position to a number with one digit.
Photo of the calculator with circles: https://ibb.co/ymr1YHXs
Every number looks like this in code (every percentage is made by hand, but perhaps the numbers would look better if they were positioned in the centre of each circle):
<!-- Fieldname8 -->
<span style="position: absolute;top: 44%;left: 7.5%;font-weight: normal;color: white;font-size: clamp(18px, 3vw, 40px)" data-cff-field="fieldname8"></span>
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.
