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

    How can I embed a Google Doc *with columns* into a form

    Asked by EricMac on October 20, 2016 at 08:59 AM

    I have a large list I've built in Google Docs. It is built with columns so that a large number of items on the list can be seen at once. When I embed the Doc into my jotform, the columns disappear (it just makes one super long column) and also the size of the box is weird. I'm not sure how to format my Doc properly (as far as sizing and columns) so that it will appear in my Jotform exactly as I have it in Google Docs. I want to be able to update the Doc later and have those changes automatically update on Jotform. Here is my Google Doc. Here is my Jotform.

    Page URL:
    https://form.jotform.com/62925081549159

  • Profile Image
    JotForm Support

    Answered by Charlie on October 20, 2016 at 11:23 AM

    Hi,

    I am not sure how the Google doc is being rendered on a web page using iFrame. Have you tried the following steps here: http://sites.uci.edu/docs/extending-your-blog/embed-google-docs/. It seems it is more related on Google docs rather than in JotForm.

    The "Text" field does allow you to paste or insert HTML embed codes so you can try it there. 

    The sizing of the "Text" field exceeds the actual width of the form which is why you can see it shoots at the right side. In your Form Designer Tool, you can see that the form's width is 690px. While the one set in your iFrame code for the Google doc is 700px. 

     

    Let us know if the methods mentioned in the link worked.

  • Profile Image

    Answered by EricMac on October 20, 2016 at 11:47 AM

    Weird. I had already fixed the form width earlier, somehow it reverted back. Fixed that part again.

    And yes, those are the steps I used to embed the Google Doc. I used the publish to web code and pasted it in a text field. It appears, it just doesn't reflect the same format as what is in the Google Doc itself. We have it set to appear as three columns, however in the jotform, it just appears as one column. Is there any way to fix it so that it appears as three columns on jotform?

  • Profile Image
    JotForm Support

    Answered by Charlie on October 20, 2016 at 01:15 PM

    Unfortunately, you might need to contact Google for this. 

    I made a test website page, a plain HTML page. Here it is: https://shots.jotform.com/charlie/google_doc_embed.html. I have used your embed code there. You can see that on a simple HTML page, the Google doc will still not show the column style on the page. This would suggest that the document itself or the embed code is the problem. If you try to embed the document on other websites, it will probably display the same single column.

    I also copied your document for testing purposes and tried different setup, unfortunately the results are the same. This is most likely a Google doc limitation. 

  • Profile Image

    Answered by EricMac on October 20, 2016 at 01:22 PM

    OK, thank you so much for figuring that out. I didn't think to test it that way.

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 20, 2016 at 03:37 PM

    How about using its preview URL? I think this trick works.

    Example:

    https://docs.google.com/document/d/1neYX-aO_HioRzKFrzQmV6CqTCHgyhKM-d8R1WsCJg1k/preview

    Iframe code:

    <iframe src="https://docs.google.com/document/d/1neYX-aO_HioRzKFrzQmV6CqTCHgyhKM-d8R1WsCJg1k/preview" width="700" height="700" alt=""></iframe>

    Try it and let us know how this goes. Thanks!

  • Profile Image

    Answered by EricMac on October 20, 2016 at 04:42 PM

    Sweet genius! That worked! Thanks EltonCris!