- JotForm SupportBDAVIDAnswered on July 08, 2014 at 07:28 PM
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:
<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.
- swindellsAnswered on July 09, 2014 at 03:15 AM
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.As extra cells have been added on the form 'Gallery 1' it has affected Gallery 2 so i'm not able to decrease the height of Gallery 2 page because it cuts off form Gallery1. Is there any way around this?
- jedcadornaAnswered on July 09, 2014 at 08:21 AM
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
- swindellsAnswered on July 09, 2014 at 08:55 AM
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?
- jedcadornaAnswered on July 09, 2014 at 10:46 AM
Unfortunately my colleague Wayne is not online as of this moment.
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.
- swindellsAnswered on July 09, 2014 at 04:55 PM
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.
- JotForm SupportjonathanAnswered on July 09, 2014 at 05:26 PM
I checked the actual source page where the form was embedded here
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.
- swindellsAnswered on July 19, 2014 at 07:05 AM
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?
- JotForm SupportjonathanAnswered on July 19, 2014 at 08:22 AM
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.
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.
- swindellsAnswered on July 19, 2014 at 09:13 AM
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
- JotForm SupportjonathanAnswered on July 19, 2014 at 10:28 AM
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.
- swindellsAnswered on July 19, 2014 at 10:36 AM
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:
Im still not sure how to stop it moving on next page.
- JotForm SupportWelvinAnswered on July 19, 2014 at 01:04 PM
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.
- swindellsAnswered on July 19, 2014 at 02:11 PM
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.
- JotForm Support ManagerJeanetteAnswered on July 19, 2014 at 09:29 PM
Welvin will certainly get back to you whenever he comes online to help you.
- JotForm SupportWelvinAnswered on July 20, 2014 at 11:58 AM
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.
- swindellsAnswered on July 21, 2014 at 09:38 AM
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?
- JotForm SupportWelvinAnswered on July 21, 2014 at 10:32 AM
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?
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.
- swindellsAnswered on July 21, 2014 at 12:35 PM
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!
- JotForm SupportWelvinAnswered on July 21, 2014 at 12:51 PM
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 target="_blank" href="http://www.sophieswindells.co.uk/HTML-FILE-NAME.html" rel="nofollow noopener" >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.
- swindellsAnswered on July 21, 2014 at 01:11 PM
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).
- JotForm SupportWelvinAnswered on July 21, 2014 at 01:49 PM
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.
- swindellsAnswered on July 21, 2014 at 03:09 PM
- swindellsAnswered on July 21, 2014 at 03:11 PM
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.
- JotForm SupportWelvinAnswered on July 21, 2014 at 03:24 PM
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.html and change the link of the Order Form.
- swindellsAnswered on July 21, 2014 at 04:16 PM
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?
- swindellsAnswered on July 21, 2014 at 04:19 PM
That screenshot didnt show what I mean very clearly. Sorry. Here's a better one:
- JotForm SupportdavidAnswered on July 21, 2014 at 05:45 PM
I checked your website and the formatting appears to be fine:
Let us know if you have any other questions and we will be happy to help.
Thank you for using Jotform!
- swindellsAnswered on July 21, 2014 at 05:58 PM
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.When Welvin returns it would be great if he knows how to stop the images being cropped off the side?
- JotForm SupportWelvinAnswered on July 22, 2014 at 01:26 AM
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.
- swindellsAnswered on July 22, 2014 at 03:47 AM
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.
- JotForm SupportjonathanAnswered on July 22, 2014 at 04:51 AM
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.
- swindellsAnswered on July 22, 2014 at 05:50 AM
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.
- swindellsAnswered on July 22, 2014 at 06:04 AM
Hi, Welvin has now sorted out this issue on a different thread. I'm very pleased with it.
Thank you Jot Form support!