• Resolved zamyboi

    (@zamyboi)


    Hi,
    Thanks for being helpful and responsive all the time πŸ™‚

    I want to custom design few fields.

    Form fields that give a required output should stand out from rest of the fields.

    I should be able to:
    1. change font color of fields/specific text in a field
    2. change font size (for now im only being able to use ‘small/big’ html tags) in fields settings. can I use font-size tag? can normal html tags be used to CSS a specific field? if yes, where?
    3. move calculated output in the next line after field title

    // example:
    Your bmr is:
    2068 kcals per day (in next line, no field box)
    //

    4. showing result with no form input box.

    I have attached a sample over here please have a look.

    Thanks, Ill really appreciate.

    • This topic was modified 8 years, 5 months ago by zamyboi.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter zamyboi

    (@zamyboi)

    Hi,
    Updated:
    Replying to point 1 and 2 above.
    I figured few things out. Field settings are taking all html tags and im able to apply design rules to them πŸ™‚

    So updated queries are here under:
    3. Displaying calculated field output in next line after field title.
    4. showing calculated field output WITHOUT forms default input-box.
    5. applying html/css design rules for content inside calculated fields.

    This is just to make my output stand out from rest of the input fields of form.

    Thanks for your patience.

    Plugin Author codepeople

    (@codepeople)

    Hello @zamyboi,

    The solution in this case would be:

    1. Insert a “HTML Content” field in the form, with a DIV, SPAN or other tag into the its content, with an unique class name or id to be used from the equation, for example: <div class="my-result-here"></div>

    2. Now, if your equation is for example: fieldname1+fieldname2, you should edit it as follows:

    (function(){
    var result = fieldname1+fieldname2;
    jQuery('.my-result-here').html(result);
    return result;
    })()

    as the calculated field would be used as auxiliary, you can tick the checkbox in its properties for hiding this field from the public form.

    3. Finally, you can define the styles to apply with the selector: #fbuilder .my-result-here{}

    Best regards.

    Thread Starter zamyboi

    (@zamyboi)

    Hi,
    Thank you for being so patient and helpful.

    this worked for a simply equation, thanks.

    However, what if my equation is a function, having a set of conditions. How do I make use of this calculation and assign it to var result?

    Please suggest.

    My output equation is:
    (function() {
    if (fieldname24==’Male’ && fieldname23<=19) {
    return 66+(fieldname7*13.7)+(fieldname2*5)-(fieldname6*6.8);
    }
    if (fieldname24==’Male’ && fieldname23>=19) {
    return 66+(fieldname26*13.7)+(fieldname2*5)-(fieldname6*6.8);
    }

    if (fieldname24==’Female’ && fieldname25<=30) {
    return 655+(fieldname7*9.6)+(fieldname2*1.8)-(fieldname6*4.7);
    }
    if (fieldname24==’Female’ && fieldname25>=30) {
    return 655+(fieldname27*9.6)+(fieldname2*1.8)-(fieldname6*4.7);
    }

    })()

    Plugin Author codepeople

    (@codepeople)

    Hello,

    The solution would be similar, simply create a variable and fill it with the result of the mathematical operation, and return it at the end. Please, check a possible solution below, I’ve optimize the conditional statements:

    (function () {
        var result = '';
        if(fieldname24 == 'Male') 
        {
            if(fieldname23 <= 19)
                result = 66+(fieldname7*13.7)+(fieldname2*5)-(fieldname6*6.8);
            else
                result = 66+(fieldname26*13.7)+(fieldname2*5)-(fieldname6*6.8);
        }
        else
        {
            if(fieldname25 <= 30)
                result = 655+(fieldname7*9.6)+(fieldname2*1.8)-(fieldname6*4.7);
            else
                result = 655+(fieldname27*9.6)+(fieldname2*1.8)-(fieldname6*4.7);		
        }
    	
        jQuery('.my-result-here').html(result);
        return result;
    })()

    Best regards.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘CSS design form fields’ is closed to new replies.