Changing font style on form fields.

Answered

Comments

3 comments

  • Official comment
    Avatar
    Dante Porter

    Hello Rebecca!

    You can make this change by navigating to the Form Designer and opening the Form Properties window for that field. In the Display section, you are able to change the Label of the form, insert a Default Value, make the field required, make it read only, and change the color, font, and size of the label.

     

    Let me know if you have any other questions regarding this!

  • Avatar
    David Topic

    Hi Dante,

    is it possible to adjust the font color/size/style for the mapped values? In this particular case the Yes/No selection?

    Best,

    David

  • Avatar
    Yorick Reuvekamp

    @David:

     

    It ain't pretty, but there is a way. This is a piece of code I use in forms with radio buttons:

    ```

    var count = 1;
    clickd_jquery(":radio").each( function() {
    var radioButton = clickd_jquery(this);
    var containingDiv = radioButton.closest("div");
    var radioLabel = radioButton.next("span");
    var radioLabelText = radioLabel.text();

    radioButtonNewId = radioButton.attr("name") + "_" + count;
    radioButton.attr("id", radioButtonNewId);
    radioLabel.replaceWith("<label class='maxSize1' for='" + radioButtonNewId + "'>" + radioLabelText + "</label>");

    containingDiv.css({"width": "100%", "height": "100%", "margin-top": "10px", "display": "flex", "flex-direction": "row"});
    radioButton.css({"float": "left", "vertical-align": "top", "width": "20px", "height": "20px", "margin-right": "10px"});
    radioLabel.css({"flex": "1"});

    count++;
    });

    ```

    What this does, is loop through all the radio buttons on the form and change their styling. To make sure that a longer text does not continue on the next line below a radio button, it applies a flex-direction to the container <div>, which basically aligns the radio button and its text next to eachother.

    Also, it replaces the text (which is in a <span> in the code) with a <label> which allows for coupling with the corresponding radio button, so that clicking the text makes the button selected.

    Anyway, to achieve your goal of changing the font style, this would be enough:

    ```

    clickd_jquery(":radio").each( function() {
    var radioButton = clickd_jquery(this);
    var radioLabel = radioButton.next("span");

    radioLabel.css({"css-attribute": "value"});
    });

    ```

    Of course, replace css-attribute and value with whatever's desired :-)

Please sign in to leave a comment.