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

  • EricMac
    Asked on October 20, 2016 at 8: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.

  • Charlie
    Replied 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. 

    How can I embed a Google Doc *with columns* into a form Image 1 Screenshot 20

     

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

  • EricMac
    Replied 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?

  • Charlie
    Replied on October 20, 2016 at 1: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. 

  • EricMac
    Replied on October 20, 2016 at 1:22 PM

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

  • Elton Support Team Lead
    Replied on October 20, 2016 at 3: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="How can I embed a Google Doc *with columns* into a form Image-0"></iframe>

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

  • EricMac
    Replied on October 20, 2016 at 4:42 PM

    Sweet genius! That worked! Thanks EltonCris!