Title: CSS design form fields
Last modified: November 28, 2017

---

# CSS design form fields

 *  Resolved [zamyboi](https://wordpress.org/support/users/zamyboi/)
 * (@zamyboi)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/css-design-form-fields/)
 * 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](http://myfitnesspro.in/wp-content/uploads/2017/11/Screen-Shot-2017-11-26-at-3.34.41-PM.png)
   please have a look.
 * Thanks, Ill really appreciate.
    -  This topic was modified 8 years, 5 months ago by [zamyboi](https://wordpress.org/support/users/zamyboi/).

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

 *  Thread Starter [zamyboi](https://wordpress.org/support/users/zamyboi/)
 * (@zamyboi)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/css-design-form-fields/#post-9728972)
 * 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](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/css-design-form-fields/#post-9729044)
 * Hello [@zamyboi](https://wordpress.org/support/users/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](https://wordpress.org/support/users/zamyboi/)
 * (@zamyboi)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/css-design-form-fields/#post-9745916)
 * 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](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/css-design-form-fields/#post-9745958)
 * 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.

 * ![](https://ps.w.org/calculated-fields-form/assets/icon-256x256.jpg?rev=1734377)
 * [Calculated Fields Form](https://wordpress.org/plugins/calculated-fields-form/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/calculated-fields-form/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/calculated-fields-form/)
 * [Active Topics](https://wordpress.org/support/plugin/calculated-fields-form/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/calculated-fields-form/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/calculated-fields-form/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [codepeople](https://wordpress.org/support/users/codepeople/)
 * Last activity: [8 years, 5 months ago](https://wordpress.org/support/topic/css-design-form-fields/#post-9745958)
 * Status: resolved