Forum Discussion

EmberKrumwied's avatar
EmberKrumwied
Qrew Captain
3 months ago

New Form Button display settings

I am working on creating a new form, using the new form options, to update a legacy form. No major issues, other than a bit of wonkyness regarding field spacing. The only real issue is the displaying of formula url fields displaying as a button. I have 4 buttons (2 are hidden via dynamic form rules) and the only difference between them (other than what they do) is I selected a display color.

2 of the buttons display with white font and perhaps a white boarder, and the other 2 display with black font and a black boarder. For the life of me I can't figure out where the setting is that determines if the font and boarder should be white or black. The formula url on all buttons have no formatting included in the formula.

Anyone know what might be going on? I'd like for all buttons to display with my chosen back color and with white font and a white boarder.

Thanks

  • I don't think you can control that. I think that the font colour depends on the colour of the button. For example you can imagine if you had a yellow button then you would not want to see white letters because they would not be readable. Conversely if you had a very dark red button then black letters would be hard to see. So they have some built-in logic under the covers to have the font colour be contrasting with the button color. I can't really explain why one button has a black border and one does not.

     

    The alternative is to invest the time to make your own rich text formula buttons and then you can control everything but there's more set up involved with that so may not be worth the effort.

     

    Here is an example of the code that you would use for a rich text formula button.  

     

    var text ButtonColor = "blue"; //use hex code but most color names work

    var text WordsColor = "white"; //typically this will be white or black 

    var text URL = [your URL field here];

    var text Words = "Break"; // use a formula 

    // Begin button style
    var text bgcolor = $ButtonColor;
    var text txtcolor = $WordsColor;
    var text style = "style=\"text-decoration: none; text-align: center; background:" & $bgcolor & "; "

    &  " width: 50px; " // width is optional otherwise will be as wide as the words

    &  " border-radius: 5px; padding: 6px 10px; color: " & $txtcolor & "; display: inline-block; font: normal 700 24px/1 \"Calibri\", sans-serif; text-shadow: none;";
    // End button style    
      
     "<a " & $style & " href=" & $URL & ">" & $Words & "</a>"

     

  • I don't think you can control that. I think that the font colour depends on the colour of the button. For example you can imagine if you had a yellow button then you would not want to see white letters because they would not be readable. Conversely if you had a very dark red button then black letters would be hard to see. So they have some built-in logic under the covers to have the font colour be contrasting with the button color. I can't really explain why one button has a black border and one does not.

     

    The alternative is to invest the time to make your own rich text formula buttons and then you can control everything but there's more set up involved with that so may not be worth the effort.

     

    Here is an example of the code that you would use for a rich text formula button.  

     

    var text ButtonColor = "blue"; //use hex code but most color names work

    var text WordsColor = "white"; //typically this will be white or black 

    var text URL = [your URL field here];

    var text Words = "Break"; // use a formula 

    // Begin button style
    var text bgcolor = $ButtonColor;
    var text txtcolor = $WordsColor;
    var text style = "style=\"text-decoration: none; text-align: center; background:" & $bgcolor & "; "

    &  " width: 50px; " // width is optional otherwise will be as wide as the words

    &  " border-radius: 5px; padding: 6px 10px; color: " & $txtcolor & "; display: inline-block; font: normal 700 24px/1 \"Calibri\", sans-serif; text-shadow: none;";
    // End button style    
      
     "<a " & $style & " href=" & $URL & ">" & $Words & "</a>"

     

    • EmberKrumwied's avatar
      EmberKrumwied
      Qrew Captain

      Thanks Mark. I will bookmark this for future reference, but for this application, I just chose a different color and like you suggested, the font displayed in white.