Form not moving to the top of the page when next button is clicked.

Can you provide us the URL of the exact webpage where the form is embedded? Meanwhile, if you are using the iFrame code as an embedded method, I would recommend you to add the following to the code:

?nojump

Example code:

<iframe allowtransparency="true" src="//www.jotform.com/form/00004705753?nojump" frameborder="0" style="width:100%; height:936px; border:none;" scrolling="no">

Hope this helps you, let us know if you need more assistance, we will be glad to help you.

Hi, heres the URL of the embedded problem page:  http://sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form.html 

Where do I insert the 'no jump' code in the script? I am using iweb.  

Thank you

Hello,

I have checked your other thread and with the form embedded using an iframe it doesn't have any issues with scrolling the bar on top of the page whenever next button is clicked. Using the form standalone URL scrolling on top is no issue so probably something is conflicting the embed code if its not yet in an iframe.

This is the link I found in your other thread http://www.sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form_files/widget0_markup.html.

If you haven't embedded the form using an iframe on this URL http://sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form.html can you please give it a try and let us know if using an iframe works or not?

About the extra cells added to your "Gallery 2" the question is moved in this thread http://www.jotform.com/answers/401314

Hi, thank you for your suggestion. I don't think I want to use an iframe as i want to understand why the form has gone weird in this way.

Is there a way to find out how to change the code to make the gallery start at top and not bottom of scrollbar?

Abajan aka Wayne designed this brilliant customised form for me so maybe he will know. Is he there?

many thanks

Hello,

Unfortunately my colleague Wayne is not online as of this moment.

When using an Iframe code it does eliminate conflicts with your other javascript libraries in your webpage. I made some test and removing the javascript codes in your page does make the form works properly and whenever I add the deleted scripts that's were the problem start.

When you use the Iweb embed code it does copy the form source and using a form source does not eliminate the conflicts in your code unlike when you use iframe.

Here is a sample where the script has been removed https://shots.jotform.com/jed/forms/Sophie%20Swindells%20%20Trade%20Order%20Form.htm.

Hello. Thank you for your help but I am a little bit confused. The web sample link you show a link to does not include the form section where people fill in their details. That needs to be on both pages.

Which part of the script is the problem do you know? I have the form source code plus javascript plus an extra line of script which 'makes user details appear on both pages' and I have to add that in at the end. Which part of that has conflicts in the code?

Thank you

Hi,

I checked the actual source page where the form was embedded here

http://sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form_files/widget0_markup.html

and it was scrolling to top properly when Next button is used. Try it also just to confirm that it was working on your end.

It seems that there is indeed a script conflict that is preventing the scroll to top when the web page was embedded in your iweb.

Can you please try re-embedding the form in your iweb using only this embed code http://pastie.org/9372576

Please try and see if it makes any difference.

Inform us if issue is not resolved.

Thanks!

Hi, I tried re-embedding using that code but it was totally blank: http://www.sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form.html

The code was only a few lines long. I don't understand. Is there any thing else I can try? The form didn't used to have this problem, its since adding extra images to gallery 1 that the problem has occured in gallery too. Is Abajan/Wayne there do you know? 

many thanks

Hi,

I think something must have change in the URL where the form was originally embedded.

This URL was available when we last checked. But it is now returning 404 error which means the web page does not exist anymore.

Please re-embed the form http://www.jotformeu.com/form/33354994783368  to the web page 

using its iframe embed code. 

Follow this user guide -Getting-the-Form-iFrame-Code

Please update us if the result after you have done this so that we can check further.

Thanks.

Hi, i've tried embedding the iframe but it's all gone a bit weird. The images no longer get larger when clicked on and the form in gallery 1 has disappeared. Here's the URL: http://www.sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form.html

Thank you

Hi,

I truly apologize for the confusion.

It was incorrect to use the iframe embed code of the form on this page   as I sugggested previously because you were actually using the form's source code originally.

The custom form was originally done by our colleague Abajan as you mentioned on this thread

To correct this, please embed instead using the form's source code with the additional scripts on this web page.

After doing this test the web page. Check if the form is functioning as intended.

If this is corrected, I think the not moving to top on Next page will also be fixed.

Please update us if issue still remains so that we can check further.

Thanks.

Hi Jonathan,

I usually use the form's source code and add a custom script to it. Isn't that what you're suggesting? Have I misunderstood, is there a different script I need to add?

Here is the custom script I usually add:

file:///Users/sophieswindells/Documents/Online%20Order%20Form/Code/script.htm

Im still not sure how to stop it moving on next page.

Many thanks

Hi,

I'll help you to fix it. Please let me know the final webpage that contains the form with all the scripts that was added to the form source codes. There should be a way to scroll the form to top when the next button is click.

Thanks

Hi Welvin,

I've reverted to the script and code as it was before trying the iframes. I've embedded it back in iweb. Here's the URL: http://www.sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form.html

There are two problems, one is the scrolling problem on second page.

The second problem is that when the images are clicked on in the right hand column of both pages, half the image is cut off. I have tried resizing the iweb page but this has not helped.

Your help is really appreciated.

Welvin will certainly get back to you whenever he comes online to help you.

Cheers!

Hello,

This is the HTML block where the form is placed: http://www.sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form_files/widget0_markup.html. When the Next button is clicked, you will noticed that the form goes back to top. 

I don't think we can fix this into the iWeb section. So, instead of embedding the form to the iWeb HTML block, I would suggest saving the Form Source Codes with all the added Scripts as an HTML file and upload it to your FTP Server. Use the direct link of the HTML file and link it to your webpage, then make it to open in a new window. 

I'll check the zoom images.

Thanks

Hello, i'm not sure I understand this. How do I upload files to FTP server? I uploaded the whole of the iweb site to FTP hostpapa but i'm not sure how to upload an HTML file by itself to FTP. Not sure where to begin with this. Is there really no way it can be done with HTML snippet? 

Would Abajan/ Wayne know do you think as he made the form. 

Also, any thoughts on the zoom images?

Thank you

Same process, I think. Are you using an FTP Client such as FileZilla? Or, you have uploaded the iWeb website directly to the FTP Manager in your Hostpapa Control Panel?

The steps:

1. Get your form source codes here with all the scripts added to it here http://pastiebin.com/53cd1fb6be51b

2. Open your Notepad or any text editor you have

3. Paste the Source codes there and save it as an HTML file. For example: 

4. Open your FTP Client or access your File Manager

5. Upload the saved HTML file to the root directory or to any directory you want.

6. Get the direct link of the HTML file. For example, if you have uploaded the HTML file to the root directory: http://www.sophieswindells.co.uk/my-form.html

7. Add this link to your website. Set it to open in a new window. For example: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_link_target

Unfortunately, I'm not sure if we can do this inside the iWeb HTML Snippet. I search for a possible solution, but I can't find any. I'm so sorry.

I have already contacted Wayne about this matter. He's helping me about the Zoom Images, and the most possible way to fix that is to assign another class or ID to the left or right zoom images so we can apply another CSS codes for the alignment. Unfortunately, this is a long process for us. Wayne is currently thinking of an easiest way.

Thanks

Hi Welvin, Thank you for the step by step. I saved it as HTML then uploaded it to root directory in hostpapa file manager but am now stuck. How do I get direct link and how do I add the file to my website? Where exactly do i do that? Also, I can't see any option to open in new window. 

Sorry that I need it spelled out. I've looked online for help but can't seem to work it out even though its probably really obvious!

Thank you!

What is the HTML file name? If you have uploaded it to the root directory, then the direct link should be like this:

http://www.sophieswindells.co.uk/HTML-FILE-NAME.html (replace HTML-FILE-NAME to the actual file name).

------------------

How do I add the file to my website? - and open it on a new window:

-Add another HTML block or Snippet to your iWeb website page then, paste the following codes:

<a href="http://www.sophieswindells.co.uk/HTML-FILE-NAME.html" target="_blank">Order Now!</a> 

Again, replace HTML-FILE-NAME to the actual file name. Also change "Order Now!" to any text you want.

Let us know if you need further assistance.

Thanks

Hi, I tried that and something is not right. Here's the URL: http://sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form.html

I uploaded the HTML to file manager public html. Then I put the code you wrote with the ammended file name and pasted that into iweb snippet on order form page (I deleted the previous code).

Thank you

We're close there :). You just need to correct the link. Can you please take a screenshot of how the file has been uploaded to your Hostpapa File Manager? You may have uploaded the HTML file on a sub-directory. You should upload that to the same directory where the iWeb files are uploaded.

Thanks

Hi, here's a screenshot. After your last post I deleted the file from the root directory and put it under 'sophie swindells' where the iweb files are. Its still no working though. The files called 'sophieswindells_scriptnew. 

Cheers! 

This is the correct link: http://sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells_scriptnew.htm. Correct File Name is: Sophie_Swindells_scriptnew.htm

However, you seem to have pasted the source codes into an MS Word document. That is not correct. Use Text Editors, download Sublime text: http://www.sublimetext.com/. Save it again per instructions, as an HTML file. Upload it to the same directory.

Edit the page: http://sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form.htmland change the link of the Order Form.

Thanks

That worked! Thank you. I didn't know about Sublime, that made all the difference. Is it possible to make it so that when people click on Order Form it takes straight there rather than having to click on another link? 

Here's a screenshot, the alignment has been messed up a bit, i'm not sure why. The quantity boxes have slipped down. Any ideas on this? Was it the conversion from MS Word to Sublime do you think?

That screenshot didnt show what I mean very clearly. Sorry. Here's a better one:

Hi,

I checked your website and the formatting appears to be fine:

It appears you are using Chrome as your web browser.  I tested in Chrome also and could not reproduce the formatting.  As my colleague stated, using the iFrame embed code rather than the javascript code may help to correct this.

http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

Let us know if you have any other questions and we will be happy to help.

Thank you for using Jotform!

Hi, I tried it in a different browser and formatting is still out. The quantity buttons have slipped down. I've uploaded this form via FTP so not sure I can use iframe code, tried that earlier on in this thread and it didn't work. 

Many thanks!

For The Quantity Boxes:

Please don't copy and paste the codes from the MS Word document.  Surely, some of the codes are stripped out. I have the copy of the codes, you should have look here instead: http://pastiebin.com/53cd1fb6be51b.

Again, save these source codes into the HTML file and re-upload it to your Hostpapa File Manager. Make sure to upload it to the same location or directory.

Example output (no quantity boxes formatting issues): https://shots.jotform.com/welvin/pages/Sophie_Swindells_scriptnew.html

----------------------------------------

For the ZOOM Images:

Please proceed on this thread: https://www.jotform.com/answers/406556. Use this thread for the issues with regards to the Zoom Images. Do not mix it up here for us to avoid some confusions. I am already into the process of changing the locations of the zoom images. As previously stated, this is a long process since we need to change some of the elements for us to inject the custom CSS codes.

Thanks

Hello, i've been copying and pasting using MS Word as a notepad for a long time so that would have messed up the code. I didn't realise.

I tried to open the link you attached in pastiebin, but it says the link is forbidden. Please can you resend the code script if you have it.

I then tried copying the forms script again and adding pastie javascript to the bottom using sublime but it hasn't worked. 

Thank you

Hi,

You can also copy the full script from this link https://shots.jotform.com/jonathan/files/script-406556.txt  if the pastebin link provided by our colleague Welvin is not available.

Inform us if still not able to get the scripts.

Thanks.

Hi, I tried the script you suggested Jonathon but now the form lost it's form section and quite a lot of quantity buttons as well as the whole of the second page. There was some javascript added on at the bottom of the script. Abajan sent me it so I add it on every time from this link: http://pastie.org/pastes/8513668/text

I'll revert back to old one for now but if you have any other ideas of how to get code cleaned up that would be amazing. Many thanks.

Hi, Welvin has now sorted out this issue on a different thread. I'm very pleased with it.

Thank you Jot Form support!