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

    Formatting Table In WYSIWYG Editor

    Asked by ocfoaratings on August 04, 2013 at 06:03 PM

    I've got 5 identical Free Text (HTML) fields in my form. The fields are static text displayed in a 5 column table format. Two of the headers have red asteriks after the text indicating additional info below the table. In the wysiwyg tool the asterik in the far right column appears right next to the text. When I preview the form it's on a new line all by itself. 

    Page URL:
    http://www.jotform.com//?formID=32156578235155

    Screenshot
    JotForm table preview format next
  • Profile Image
    JotForm Support

    Answered by jonathan on August 04, 2013 at 08:00 PM

    Hi,

    This is because you also have applied within the Free Text(HTML) field the styles that each table and td elements are using. Since the styles are within the HTML field, it get overwritten by the form's actualy stylesheets when viewed on a browser.

    Please test this form http://www.jotformpro.com/form/32157670931960 I was able to find the workaround to apply CSS code to add the styling into the table elements in the HTML field. Specifically the white-space:nowrap needed.

     

    I add a class within the Free Text(HTML) field values in your form like this...

     

    then I used the class name to add the right CSS code

     

    .td-kls{white-space:nowrap;}

    Use this guide on injecting CSS code to the form How-to-Inject-Custom-CSS-Codes

    Hope this help. Please inform us if you need further assistance.

    Thanks.

     

     

  • Profile Image

    Answered by ocfoaratings on August 05, 2013 at 01:28 PM

    Jonathan,

    I wish I knew enough about html to understand what I did wrong, specifically how I  applied within the Free Text(HTML) field the styles that each table and td elements are using. I have no idea how I did that. I've been using a wysiwyg html editor to help me create much of this html so I suspect that is the culprit. The bottom line is that your solution worked. Thanks so much for your help.

    Mark

  • Profile Image

    Answered by jefreylandicho on August 05, 2013 at 02:40 PM

    We are glad we were able to assist you. If  you ever need our assistance again, pelase do not hesitate to contact us again.

  • Profile Image

    Answered by ocfoaratings on August 05, 2013 at 03:04 PM

    Jonathan,

    More weirdness. The html field you helped me with is duplicated and displayed on pages 2 - 6. No problem on pages 2 -5 but I cannot get it to display on page 6 (Back Judge ). It shows on the form builder, but when I look at the preview, it's not there. I've tried deleteing it, duplicating one of the other html fields and moving it into place on page 6 but nothing.

    Mark

    The new form is http://www.jotform.com/?formID=32165437410144 titled OCFOA Observation Form 2013 Rev 3 

  • Profile Image
    JotForm Support

    Answered by EltonCris on August 05, 2013 at 05:24 PM

    Hi Mark,

    It wasn't showing initially because that field is tied on a condition. I have deleted the condition so you can view that field on page 6. It should be fine now. Kindly review your conditions as well.

    Thanks!