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

    Can I add a long description to a radio button field?

    Asked by FRCCOnlineLearning on November 26, 2014 at 06:04 PM

    I need to have a title for the field column in the report I pull, however I want to provide additional detail about the title.

    For example, if my title is Damage Waiver, I want to be able to add the description "I would like to pay an additional $8 per day to waive any damage when the rental is returned." and I would like to have radio buttons of yes and no.

    I know I can do this with text, then a radio button field, however this adds significant white space and I have to repeat the title in the text plus the radio button field. Is there a better/more compact way to do this?

    radio button field radio buttons then and
  • Profile Image
    JotForm Support

    Answered by Charlie on November 26, 2014 at 06:57 PM

    Hi,

    I'm not sure if I understood you correctly, do you want to have something like a TOS-like field?

    We have a couple of widgets that could help you on that.

    1. Terms and Conditions widget 

    2. Short Scrollable widget 

     

    Another one, we can setup a radio button and text field, but it has a white space between them. What we will do is use custom CSS code to style the fields. See screenshot below.

    1. Add Text field and the radio button.

    2. To spread the radio button to one line, under it's properties change the "Spread Columns" to "2".

    3. To remove the white space or adjust the style, navigate to "Form Styles"->Form Designer

    4. Navigate to the CSS tab. Click the Text field and at the right side, you will then see the element displayed, we can not add or style the said element. In may case, I would just like to remove the padding at the bottom.

    5. Next, I'll repeat the steps above and adjust the styling for the radio button, but I'll adjust the padding at the top of it.

    6. It will now look like this. You can probably adjust more, like the position of it.

     

    I hope this helps or at least gives you an idea on how to proceed. Let us know if you need further assistance on this.

    Thank you.

  • Profile Image

    Answered by FRCCOnlineLearning on December 01, 2014 at 11:09 AM

    Thanks! That's good information, unfortunately I need to be able to pull a report, meaning a radio button without a header pulls with a blank column header. If I were building this for myself, no problem, but this will be for other folks to pull data from and I need accurate column information for them.

  • Profile Image
    JotForm Support

    Answered by Charlie on December 01, 2014 at 11:49 AM

    Hi,

    If you are looking for the column header, we can still add it on the field then just hide it on the preview, the field will be hidden but will still be visible on the reports and submissions column.

    Here's what I did.

    1. I added a label with an alignment on top. Mine is quite long because I copied the description. Probably it's more appropriate to just give it a shorter name. 

    2. Inside the Form Designer, navigate to the CSS tab, click the label that we want to hide.

     

    3. In the CSS tab after selecting the label field, add this code:

    {

    display: none;

    }

    4. I then save the changes and made a test submission. Here is the submission samples that I have. Please take note that the header text field is not shown here because in default, headers and text content is hidden in the submissions. 

    5. You will see in the table that the column header shows the one that we input earlier. 

     

    You can clone my sample form here: http://form.jotformpro.com/form/43296683396975.

    I hope this helps. Let us know if you need further assistance on this.

    Thank you.

     

  • Profile Image

    Answered by DamienMB on December 03, 2015 at 09:29 PM

    I'm glad this workaround

    exists but help text (/sublabels/descriptions) should be a default option like other form builders (e.g. Google Forms).

    Having to spend time "faking it" by manually ID'ing and hiding labels in CSS doesn't gel with JotForm's WYSIWYG design.

    Also what about required fields? The red astrix is hidden along with the label:

  • Profile Image
    JotForm Support

    Answered by Charlie on December 04, 2015 at 02:24 AM

    @DamienMB

    Thank you for your insight on this matter, I opened a separate thread for you based on your reply here so that we can better discuss and assist you on this matter. Please refer to this link instead: http://www.jotform.com/answers/717721. We will address it shortly.

    Thank you.

  • Profile Image

    Answered by DamienMB on December 04, 2015 at 02:31 AM

    Ok, however you cut off the start of my post: "I'm glad this workaround"

  • Profile Image
    JotForm Support

    Answered by Charlie on December 04, 2015 at 03:45 AM

    Apologies for that, I was trying to split your question from the statement "but help text". But the word "exists" went with it.