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

    Views Submission app formatting issue

    Asked by CTCKA on May 13, 2016 at 09:19 AM

    Hi

    We use JotForm View (http://views.jotform.io/) to display JotForm data on live pages. The formatting on the page has changed recently - possibly today or yesterday - where it now displays what looks like 4 sets of 'blank' data before it then disaplys the data itself - see http://www.ctckingshurst.academy/learning-and-teaching/curriculum/extra-curricular/music-lessons-peripatetic/

    I've tried re-creating the view - on the 'create list view' preview it displays correctly, then after clicking 'Next' from the 'create submission view' page, the preview displays with the blank data at the top (see screenshot - I've scrolled down a bit so you can see the start of where the data does appear).

    Has anything changed with the JotForm Views? Not sure how to fix.

     

    Thanks in advance, Mark

    Page URL:
    http://www.ctckingshurst.academy/learning-and-teaching/curriculum/extr<br/>a-curricular/music-lessons-peripatetic/

    Screenshot
    app submission app views JotForm preview next create
  • Profile Image

    Answered by Huberson on May 13, 2016 at 10:56 AM

    This might be caused by extra code added when you edit the views. You can change the editor mode to 'Source' to check for those empty tables and paragraphs in the source code.

     

    Please, do let us know if that solves the problem or not.

  • Profile Image

    Answered by CTCKA on May 16, 2016 at 03:57 AM

    Thanks Huberson

    I've looked at the source, and apart from lots of duplicate font tags, I can't see any extra code to generate what is being outputted. On the 'Create list view' page, if I click 'Preview', it all looks fine. It's just after you've gone through the 'Create submission view' page, that the blank areas appear. The full html on my 'Create list view page' is:

     

    <p><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #991734;">{$notices}</span></p>

    <p align="center"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #991734;">-------------------------------------------</span></p>

    <p>&nbsp;</p>

    <p><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666; font-size: 1.1em;"><em>{$heading}</em></span></p>

    <table cellpadding="1" cellspacing="1" style="width: 100%;">

    <tbody>

    <tr>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><strong>{$1_teacher_name}: {$1_instrument}</strong></span></td>

    <td width="10%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">&nbsp;</span></td>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><strong>{$2_teacher_name}: {$2_instrument}</strong></span></td>

    </tr>

    <tr>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><em>{$1_daydate}</em></span></td>

    <td width="10%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">&nbsp;</span></td>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><em>{$2_daydate}</em></span></td>

    </tr>

    <tr>

    <td valign="top" width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; font-size: 0.8em; color: #666;">{$1_student_times}</span></td>

    <td width="10%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">&nbsp;</span></td>

    <td valign="top" width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; font-size: 0.8em; color: #666;">{$2_student_times}</span></td>

    </tr>

    </tbody>

    </table>

    <p>&nbsp;</p>

    <table cellpadding="1" cellspacing="1" style="width: 100%;">

    <tbody>

    <tr>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><strong>{$3_teacher_name}: {$3_instrument}</strong></span></td>

    <td width="10%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">&nbsp;</span></td>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><strong>{$4_teacher_name}: {$4_instrument}</strong></span></td>

    </tr>

    <tr>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><em>{$3_daydate}</em></span></td>

    <td width="10%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">&nbsp;</span></td>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><em>{$4_daydate}</em></span></td>

    </tr>

    <tr>

    <td valign="top" width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; font-size: 0.8em; color: #666;">{$3_student_times}</span></td>

    <td width="10%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">&nbsp;</span></td>

    <td valign="top" width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; font-size: 0.8em; color: #666;">{$4_student_times}</span></td>

    </tr>

    </tbody>

    </table>

    <table cellpadding="1" cellspacing="1" style="width: 100%;">

    <tbody>

    <tr>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><strong>{$5_teacher_name}: {$5_instrument}</strong></span></td>

    <td width="10%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">&nbsp;</span></td>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><strong>{$6_teacher_name}: {$6_instrument}</strong></span></td>

    </tr>

    <tr>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><em>{$5_daydate}</em></span></td>

    <td width="10%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">&nbsp;</span></td>

    <td width="45%"><span style="font-family:

     

    <p>&nbsp;</p> 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><em>{$6_daydate}</em></span></td>

    </tr>

    <tr>

    <td valign="top" width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; font-size: 0.8em; color: #666;">{$5_student_times}</span></td>

    <td width="10%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">&nbsp;</span></td>

    <td valign="top" width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; font-size: 0.8em; color: #666;">{$6_student_times}</span></td>

    </tr>

    </tbody>

    </table>

    <p>&nbsp;</p>

    <table cellpadding="1" cellspacing="1" style="width: 100%;">

    <tbody>

    <tr>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><strong>{$7_teacher_name}: {$7_instrument}</strong></span></td>

    <td width="10%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">&nbsp;</span></td>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><strong>{$8_teacher_name}: {$8_instrument}</strong></span></td>

    </tr>

    <tr>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><em>{$7_daydate}</em></span></td>

    <td width="10%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">&nbsp;</span></td>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><em>{$8_daydate}</em></span></td>

    </tr>

    <tr>

    <td valign="top" width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; font-size: 0.8em; color: #666;">{$7_student_times}</span></td>

    <td width="10%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">&nbsp;</span></td>

    <td valign="top" width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; font-size: 0.8em; color: #666;">{$8_student_times}</span></td>

    </tr>

    </tbody>

    </table>

    <p>&nbsp;</p>

    <table cellpadding="1" cellspacing="1" style="width: 100%;">

    <tbody>

    <tr>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><strong>{$9_teacher_name}: {$9_instrument}</strong></span></td>

    <td width="10%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">&nbsp;</span></td>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">&nbsp;</span></td>

    </tr>

    <tr>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;"><em>{$9_daydate}</em></span></td>

    <td width="10%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">&nbsp;</span></td>

    <td width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">&nbsp;</span></td>

    </tr>

    <tr>

    <td valign="top" width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; font-size: 0.8em; color: #666;">{$9_student_times}</span></td>

    <td width="10%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; color: #666;">&nbsp;</span></td>

    <td valign="top" width="45%"><span style="font-family: 'PTSansRegular',Arial,Helvetica,sans-serif; font-size: 0.8em; color: #666;">&nbsp;</span></td>

    </tr>

    </tbody>

    </table>

  • Profile Image
    JotForm Support

    Answered by Nik_C on May 16, 2016 at 06:01 AM

    I noticed that you have a lot of extra cell padding elements in your page, so as soon as I removed all of those everything was fine:

    So please try to remove all those elements in your HTML editor and see how that will work for you. Let us know if you have any additional questions.

    Thank you!

  • Profile Image

    Answered by CTCKA on May 16, 2016 at 07:50 AM

    Hi Nik

    Thanks for your reply, but the extra cell elements are being generated by JotForm, not by me. I just have the embedded JotForm View code on my html page within an iFrame:

    <iframe src='//views.jotform.io/list.php?id=52944779102966' onload='window.parent.scrollTo(0,0)' allowtransparency='true' id='viewFrame' frameborder='0' scrolling='no' style='width:100%;height:0;'> </iframe><script type='text/javascript' src='//views.jotform.io/js/iframehandler.js' ></script>

    It's being added by JotForm View - if you go to http://views.jotform.io/ you can see the spaces in the preview before I add anything to my site.

    Thanks, Mark

  • Profile Image
    JotForm Support

    Answered by Nik_C on May 16, 2016 at 09:27 AM

    My apologies, thank you for more information, Mark.

    I'll do some tests and try to locate the cause of this problem.

    Will get back to you here.

    Thank you!

  • Profile Image

    Answered by CTCKA on May 16, 2016 at 10:04 AM

    Thanks for looking into this Nic.

    Mark

  • Profile Image
    JotForm Support

    Answered by Nik_C on May 16, 2016 at 11:46 AM

    Mark, I'm still unable to replicate this problem, unfortunately.

    You are right this extra space doesn't appear in the source code of the iFrame for submission view, so it is creating it after.

    Can you give me more information of the workflow you do, I'm sorry if I'm repeating, but any information helps. So, when you paste this iFrame code in your website's code, it generates that extra space automatically?

    Thank you!

  • Profile Image

    Answered by CTCKA on May 16, 2016 at 12:11 PM

    No problem

     

    I go to http://views.jotform.io/

    Click add to website, then select the form I'm using. Then on the create list view page I have the code from above (on May 16, 2016 at 03:57 AM). If I click preview at this stage, I don't get any extra spacing, although the data isn't populated, it's the form field names that appear. On the create submission view I just click next. I don't think I use this! Then when I click next again, I get another preview, but this time with all the extra spacing. I do get an error on this page - 'Cannot read property of 'RemoveClass' of undefined at line 104 of http://views.jotform.io/js/views/createList.js?v=1.9.639. When I click next again, I get the iFrame snippet code - this code has not changed since this was first set up. This has been working fine up to last week. Nothing has changed our end. In the snippet, it loads http://views.jotform.io/js/iframehandler.js Has anything changed with this file that you are aware of?

    The view itself, http://views.jotform.io/list.php?id=52944779102966, also have the extra spacing. This page duplicates the view 4 times, with the fourth one populated with data - the other 3 with nothing.

     

    Hope this helps.

     

    Mark

  • Profile Image
    JotForm Support

    Answered by david on May 16, 2016 at 01:36 PM

    As far as I know, this application has not been updated recently.  My colleague responded to your other thread:

    https://www.jotform.com/answers/838505-Views-Submission-app-formatting-issue

    The extra space may be due to empty submissions. 

  • Profile Image

    Answered by CTCKA on May 16, 2016 at 02:36 PM

    Oh thank you so much! I didn't even see that post - I think I may have submitted the question twice and not realised.

    That has worked!

     

    Thanks again, Mark

  • Profile Image
    JotForm Support

    Answered by david on May 16, 2016 at 02:42 PM

    No worries at all, glad to hear that resolved the spacing issue.  If there is anything else we can help with, just let us know.