How to embed a form in a Vue.js page.

  • Profile Image
    morgenweck
    Asked on July 16, 2019 at 03:51 PM

    Do you happen to have any sample code that shows how to embed into a vue.js page?

  • Profile Image
    Kevin_G
    Answered on July 16, 2019 at 05:24 PM

    Vue.js seems to be just a library, I mean, it's not a web page or site, it's just a library based on JavaScript that you can use to handle the elements on your site, so the short answer is no, you cannot embed a form in a ".js" file as such, but since this is a library it means that you're invoking a resources into an HTML file, you can embed the form using either the iFrame code or JS code in your HTML file (with extension .html or any other extension but a file with HTML code in it's source). 

    This guide will help you with the different embed methods available on Jotform: https://www.jotform.com/help/67-Which-Form-Embed-Code-Should-I-Use


  • Profile Image
    morgenweck
    Answered on July 16, 2019 at 08:43 PM
    For the most part Vue.js is a framework with pages ending with .vue not html. Each page is separated into template, script and style and loaded into an index html page that has an app div.
    The entire application needs to compile. http://canceradmin.com/trainee/application/ check out my trainee application
    Vue is in the same category as React and Angular
    The bottom line is that I need to know the best way to embed the forms into a Vue setup- I have no problems with your instructions for an HTML page but this is a different ballgame.
    Thanks.
    Bill
    William Morgenweck
    Information Technology Manager
    Senior Software Engineer
    Hollings Cancer Center
    NCI Designated Cancer Center
    Medical University of South Carolina
    Cell: 843-822-5929
    Text: 843-822-5929
    Every minute counts when it comes to Cancer
    Live as if you were to die tomorrow. Learn as if you were to live forever.. "
    - Mahatma Gandhi
    ...
  • Profile Image
    Kevin_G
    Answered on July 16, 2019 at 10:18 PM

    Ok, please kindly note that the embed code from a Jotform can be gotten in HTML only, unfortunately, there is no other way to get this in a different code. 

    Now, I found a link that seems to talk about how to insert HTML to a Vue.js page, here is the link: https://alligator.io/vuejs/raw-html-binding/ 

    I hope this helps. 

  • Profile Image
    morgenweck
    Answered on July 17, 2019 at 10:13 AM

    for others who have the same problem this is a solution I came across

    <template>
    <iframe
    id="JotFormIFrame-90142788412154"
    title="Trainee Registration Form"
    onload="window.parent.scrollTo(0,0)"
    allowtransparency="true"
    allowfullscreen="true"
    allow="geolocation; microphone; camera"
    src="https://form.jotform.com/91973157382163"
    frameborder="0"
    style="width: 1px;
    min-width: 100%;
    height:100%;
    border:none;"
    scrolling="yes"
    ></iframe>
    </template>
  • Profile Image
    BJoanna
    Answered on July 17, 2019 at 11:18 AM

    The code you provided is iframe part of the Iframe embed code. 

    Getting the Form iFrame Code

    You can also check the solution one of my colleagues, provided on the following thread - https://www.jotform.com/answers/1573698 

  • Profile Image
    BJoanna
    Answered on July 18, 2019 at 01:36 AM

    Your last post is not shown here on the forum, so I will quote it from the email I received: "Yes but I ripped out the JavaScript code and it stills works great, even in an iPhone.  All I do is cut and past the same code into different Vue pages and then change the src address to match the embedded code.

    Am I losing some functionality without the script?"

    We are glad to hear the issue is resolved. You are not losing any functionality without the script.