What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    adding html to radio button options

    Asked by tomchen on April 21, 2012 at 05:41 AM

    I tried to add html to the radio button options to make some words bold and included space (&nbsp). However, if I added html, my conditions would not work. The selected radio option would not open the designated form under. If i remove the html, it would work, but the text woulnd't look as nice.

    Is there a workaround to this?

    Thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on April 21, 2012 at 05:57 AM

    tomchen,

    The Condition is using the field's label as reference id when executing. Since you included html on the label, it is probably not being reference correctly on the Condition. You might want to check that also.

  • Profile Image

    Answered by tomchen on April 22, 2012 at 11:14 PM

    hi,  i do think it's the html that's not allowing the condition to work. is there any way to add html (to style text) so that i can set the conditions?

    my last resort would be to use Free Text HTML and explain the options above and have the radio buttons below. but i would rather combine the two like i did.

    thanks for your help.

  • Profile Image
    JotForm Support

    Answered by jonathan on April 22, 2012 at 11:23 PM

    Hi tomchen,

    You can also style the option field labels/text using injected CSS. Get the input label ID# and style it in your CSS. I am curious why you do not want to use that.

    Please inform us should you have further inquiry.

    Thanks.

  • Profile Image

    Answered by tomchen on April 22, 2012 at 11:29 PM

    hi jonathan, thanks for the sugguestion. i would do the CSS styling if i only knew the codes. would you kindly provide me the codes to style it?

    make first line bold
    text left align
    radio circle on left by itself (no text under it if text runs to second line).

     

    thanks for your help

  • Profile Image
    JotForm Support

    Answered by jonathan on April 22, 2012 at 11:52 PM

    tomchen,

    Check this thread . You just have to know the label ID# (you can do this by looking at the option properties, the input# is usualy similar to label# . Or you can also right-click outside the form and select view source in the contextual menu.

    Here is our guide on Customize your Form using CSS codes

    Thanks.

  • Profile Image

    Answered by tomchen on April 23, 2012 at 03:13 AM

    could someone help me with the CSS codes? I made a sample of what i want to achieve and did it with html

    http://form.jotform.me/form/21131356465448

    thanks for the help

  • Profile Image
    JotForm Support

    Answered by abajan on April 23, 2012 at 09:00 AM

    Hi again tomchen

    Unfortunately, I believe the only way to not affect the functionality of conditions attached to the field in question while styling it to your specifications, would be to first setup the condition(s) on the unstyled field and then embed the form's full source into a web page and make the style changes there. However, two aspects of the styling can be done in the form builder without affecting the condition(s):

    1. The amount of space between the choices

    2. The text alignment (as explained in the thread How do I keep checkbox text from wrapping back to left margin?.)

    In relation to the second aspect, to better understand the solution that caused Envirogirl to do cartwheels, below is a clone of your own sample form (minus the bolded first lines and line breaks). Clone it and experiment with changing the values in the top, left and width declarations in the last rule of the injected CSS.

    (Click image to view and clone live form)

    Here's the same form whose full source has been embedded into a web page.