Problems with embed & iframe form in the website

  • xicalisboa
    Asked on September 8, 2017 at 12:05 PM

    Hi,

    I'm having problems with creating iframe supported forms to embed in my page:

    1- I had first embed: it brought a bug in my page that I took the whole day to figure out it was coming from the form. It would make my page to automatically roll down once opened in the browser. I just removed the form and the problem was solved (I'm sending the url of a copy of the page, still with the form).

    2- I try to fill the form from the page and it does not work properly. In one of the pages the JotForm branding overlays the "Previous/Next" button and we cannot go further. Now I am not even coming so far, because before the form is freezing. I also got problems on the mobile version, where I definetely could not see the button to submit.

    Have you had this problems before? Would you be able to help me? I would prefer if the form is embed in the page I'm using to publish my event. But if continues like I cannot rely of that.

    I would try a pop up window as second option, but I don't seem to have the option to customize the button to fit to my page, right?

    Thank you

    Francisca

     

    PS: the screenshot does no show the problem. It is only there because I could not post the question if not replacing the not accepted video for a picture.

    Jotform Thread 1242996 Screenshot
  • BJoanna
    Replied on September 8, 2017 at 12:31 PM

    I tested your embedded form and I was able to replicate both issues. I saw that you embedded your form with the script code. Most likely there are some script conflicts between your website scripts and JotForm script.  Please re-embed your form with the iFrame code to see if that will resolve your issues. Inside of this guide, you can find how to get the iFrame code of your form: 

    Getting the Form iFrame Code

    Hope this helps to solve the issue.

  • xicalisboa
    Replied on September 8, 2017 at 1:43 PM
    Hi,
    I've already tried to embed with IFrame and just did the last try through
    the special code you create for Wix. Only the freezing problem was solved.
    The form continues rolling the whole page down and the last page to upload
    file (when one chooses to pay by deposit) simply does not show any button
    to complete submission.
    After some days of learning curve until I get to the form the way I wanted,
    I came to the frustrating conclusion JotForm does not work to embed. If I
    don't find a solution on the next days, I am finishing this campaign and
    then back to the ugly but functioning GoogleForm. Until I have time again
    to look for an integrated solution form the webpage.
    Thank you anyway.
    Xica Lisboa
    Sensing Body - Mindful Movement Practices
    Mariannenplatz 21
    10997 Berlin
    https://www.facebook.com/thesensingbody/
    ...
  • Kevin Support Team Lead
    Replied on September 8, 2017 at 2:18 PM

    Apologies for the inconveniences this may have caused to you. 

    I have been inspecting the webpage you shared and I can see the scroll bar appearing on the form; however, after further inspecting the source code, I can see there are currently two iFrame codes, the first one seems to be added by Wix while the other one is the JotForm embed code.

    I tried increasing the the JotForm iFrame height and it did not work as the Wix iFrame has not enough height. 

    Problems with embed & iframe form in the website Image 1 Screenshot 20

    You could increase the JotForm embed  height, the page break buttons and footer will display properly, but the scroll bar will still appear as you would need to increase the Wix iFrame height as well. 

    If you want to give it a try, please get the iFrame code and remove all the code between the JavaScript tags, example: 

          <iframe

            id="JotFormIFrame"

            onDISABLEDload="window.parent.scrollTo(0,0)"

            allowtransparency="true"

            src="https://form.jotformeu.com/123456789"

            frameborder="0"

            style="width:100%;

            height: 8815px;

            border:none;"

            scrolling="yes">

          </iframe>

    This way you will be able to manually set the iFrames height. 

    Please let us know how it goes.