What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Expand images in table cells when they are clicked

    Asked by swindells on November 09, 2013 at 05:49 PM

    Hello, i'm trying to create an order form for my greetings card designs, but I can't find the right template. Have you got any ideas? There needs to be a simple box under each image where a number can be entered. Your help will be most appreciated.

    enlarge image hover over image expands on mouseover tabular layout image gallery grid increase image size image dimensions
  • Profile Image

    Answered by Cesar on November 09, 2013 at 11:04 PM

    Hello, Unfortunately such functionality is not found direclty on the Form Editor. For which I would suggest the option of first adding all your products to your form, then obtaining your form's source code to edit the layout as you would like it.

    By editing the forms to use lightbox you may be able to get the functionality to expand the images,  you would need to append the rel="lightbox[products]" code to the anchor of your image, like so:

    Example:

    <a target="_blank" href="http://www.jotform.com/uploads/guest_32122182006034/form_files/Doggie%20Pile%20SS44.jpg" rel="nofollow" rel="lightbox[products]"><img alt=" " class="form-image " border="0 " src="//www.jotform.com/uploads/guest_32122182006034/form_files/Doggie%20Pile%20SS44.jpg " height="1748 " width="1240 "></a>

    This would in turn allow you to exand the images.

    If you need further assistance, we will let you know. Thank you.

    Related Articles:

    How-to-Download-a-Source-Code-of-your-Form

  • Profile Image
    JotForm Support

    Answered by abajan on November 10, 2013 at 05:28 PM

    @swindells

    Some months ago (see this thread), I discovered that it's actually possible to achieve the functionality you want without having to embed the form's source into a web page, as in this version of your form. (Hover your mouse over each image and it will expand.) The technique used is based on this popup image viewer. However, embedding the form's source into a web page would make it possible to use other methods like this one.

    Just let us know which route you wish to take and we'll see how best we can assist you.


    Thanks

  • Profile Image

    Answered by swindells on November 11, 2013 at 06:39 AM

    Thank you for your responses. I think I would rather do the more simple option, so avoiding embedding the form's source code if possible. I have no idea about any of this stuff so needs to be really simple. @ abajan, the sample you've done of my cards expanding out into larger images is great, can you please talk me through step by step how to do that? Where do I paste the CSS code into the form? I cant see the options button. 

    Also, I have lots of designs to go on the form, about 50, so need columns so the images can be in a grid. Where do I find a columns option? I've looked everywhere.

    Many thanks

     

     

  • Profile Image
    JotForm Support

    Answered by abajan on November 11, 2013 at 09:30 AM

    Hi again,

    Seeing that there are lots of designs to go on the form and you would like them to be displayed in a grid, the solution which doesn't make use of the source code may not be the best method. Let me try something and get back to you.

    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on November 11, 2013 at 08:20 PM

    @swindells

    It turns out that it's not necessary to go the source code route after all. Complete and submit this form, have a look at the auto-response in your inbox and let us know if any changes are required. (The table can be easily expanded to accommodate additional cards. I'll walk you through the process once we're settled on the design of the form.)

    Thanks

  • Profile Image

    Answered by swindells on November 12, 2013 at 03:43 AM

    That looks great! I've completed the form but haven't received any emails, will the email be in my jotform email or gmail account?

    Please can you slowly walk me through how to create a form like that? 

    Thank you

  • Profile Image
    JotForm Support

    Answered by EltonCris on November 12, 2013 at 05:49 AM

    @swindells 

    My colleague will get back to you regarding on the workaround he offered once he reads this.

    Regarding on the email issue, may we request you to please post it on a separate thread so we can assist you better. Sorry but we cannot answer different issues/questions per thread. Thanks for your understanding.

    Regards!

  • Profile Image

    Answered by swindells on November 13, 2013 at 11:58 AM

    Hi Abajan, please can you talk me through how to make a form like the one you showed me? I need to make it soon. Thank you

     

  • Profile Image

    Answered by swindells on November 13, 2013 at 01:05 PM
    Hello, please can you help me make the form now? I'd really appreciate it.
    The sample form you made looks great.
  • Profile Image
    JotForm Support

    Answered by abajan on November 13, 2013 at 02:09 PM

    Hi Sophie,

    My apologies for not replying sooner. I'll definitely have detailed instructions for you shortly.


    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on November 13, 2013 at 03:31 PM

    Sophie,

    In the interest of time, perhaps it would be better if you just insert the additional images in your form. Once that's done, I'll be able to apply the tabular layout in my form and then you could just clone it when I'm done. The reason I'm suggesting this is that it's kind of tricky to explain how to do this correctly to someone unfamiliar with CSS and HTML tables. The more I think about it, the more I realize how easily the text boxes in the table cells could get become incorrectly positioned, due to the differing orientation (landscape vs portrait) of the images. I could always explain it properly later when you wish to insert more images.

    Just a thought.

  • Profile Image

    Answered by swindells on November 17, 2013 at 01:38 PM
    Hello
    I've added the additional images to the form and some check boxes. Please
    can you apply the layout to the form. I will need to be able to add and
    update the images though so it would be good if you could explain how after.
    Is it possible to add up the total number of cards ordered so the customer
    will be able to see at the end?
    Also, it would be good if the christmas designs could be in a separate
    section somehow, so maybe a space between them and the other designs or a
    button that people can press to take them to a separate page, is that
    possible?
    Many thanks for you help on this one.
  • Profile Image

    Answered by swindells on November 17, 2013 at 01:39 PM

    Hello

    I've added the additional images to the form and some check boxes. Please can you apply the layout to the form. I will need to be able to add and update the images though so it would be good if you could explain how after.
    Is it possible to add up the total number of cards ordered so the customer will be able to see at the end? 
    Also, it would be good if the christmas designs could be in a separate section somehow, so maybe a space between them and the other designs or a button that people can press to take them to a separate page, is that possible?
    Many thanks for you help on this one.
  • Profile Image
    JotForm Support

    Answered by abajan on November 17, 2013 at 06:07 PM

    Hi Sophie,

    Thanks for supplying the additional images. I'll get to work on inserting the non-Christmas ones into my form's current table and placing the Christmas images in a separate table on a second page of the form. And yes, after we've completed this phase I'll explain how to go about adding other images.

    Now, while the Purchase Order tool can be set to display the total cost of items selected by the user, it cannot show how many items were selected. The PayPal tool does show the quantity but only after the user submits the form. At any rate, by their very nature (to my knowledge), all of the payment tools require pricing the products. Our developers are working on integrating calculating functionality into fields not associated with any of the payment tools (you may have noticed "Calculate Field" listed among the properties of some fields) but it's not "fully baked" as yet. So, for the time being, if you just want to display the total quantity of cards ordered, without displaying any prices and total cost, the full source of the form would have to be placed in a web page outside of the JotForm domain because custom scripts can't be used in the form builder and such a script (I can easily code that for you) would be required. Anyway, this is actually a somewhat separate issue to the topic of this thread. So, if you need to discuss it further, please open a new thread and post the query there. You may however post the link to that thread here. (We like to keep separate topics in their own threads for a number of valid reasons.)


    Ciao for now.

  • Profile Image
    JotForm Support

    Answered by abajan on November 17, 2013 at 07:21 PM

    Sophie,

    I just realized that it's only the thumbnails of the new images that have been supplied. I need the original sized images to work with. That's how it was with the first six images. Let me explain further. Go to your form's URL, right-click the Treehouse card SS35 image and then download it. You'll see that while it appears to be just 142px wide by 195px tall, it's actually 1311px × 1854px but was set to be displayed at the smaller size via the form builder's Height and Width buttons. These can be seen in the image below (to the right of the Image Link button)


    Conversely, if you download the Bunny Jet Set SS48 image, you'll see that the dimensions of the downloaded image are pretty much the same as that being displayed onscreen.

    In case you're wondering why I can't just use those smaller images and have them expand when the mouse is hovered over them, the short answer is that they simply won't look right because they will be blurry.


    Thanks

  • Profile Image

    Answered by swindells on November 18, 2013 at 05:49 AM

    Hi Abajan

    I've now uploaded the original sized images. I think the problem was I used a form template to start with and that automatically resized the images for me. There was only space for 6 images on the sample form so after that I wasn't sure how to add more.

    I have now followed your advice and inserted the large images then resized them using the height and width buttons. I hope i've done it correctly. Are they the correct size?

  • Profile Image
    JotForm Support

    Answered by abajan on November 18, 2013 at 07:25 AM

    Hi Sophie,

    Yes, they are all the correct size now. Thanks for that.

    So, here's the plan:

    The form will be split into two pages, each having a gallery (table) of card images. The first gallery will display the non-Christmas cards, while the second will show the Christmas ones.

    Instead of text boxes labeled "Enter Quantity", there will be drop downs labeled "Select Quantity". Each drop down will have selections of 6, 12, 18 and 24. The default (closed) and opened states of the drop downs will be like those below:


    (Check boxes won't be appropriate because those would allow multiple quantity selections for each card.)

    The aggregate quantity of cards ordered will be displayed on page 2 of the form.

    As previously mentioned, displaying the total quantity ordered requires the use of a script and as such, the form's full source will have to be placed in a web page. That will be the next phase after you clone my finished form. But we'll deal with that later.

    For now, I'll see how quickly I can get the form built for you.


    Thanks

  • Profile Image

    Answered by swindells on November 18, 2013 at 05:35 PM

    Hi Abajan

    That all sounds great, I really like the drop down quantities instead of check boxes, that works much better.

    Looking forward to seeing the form. Many thanks!

  • Profile Image
    JotForm Support

    Answered by abajan on November 20, 2013 at 07:27 AM

    Hi Sophie,

    Please have a look at this updated demo. Do some test submissions and check your email's inbox after each one. Afterwards, let me know if everything looks and works okay.


    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on November 20, 2013 at 08:18 AM

    Actually, I just discovered that some adjustments need to be made! My apologies.

    I'll be back.

  • Profile Image
    JotForm Support

    Answered by abajan on November 20, 2013 at 11:55 AM

    Okay, sorry about the delay. Please test the demo at your earliest convenience and let me know of any required changes.


    Thanks

  • Profile Image

    Answered by swindells on November 20, 2013 at 04:58 PM

    Hello, the demo looks brilliant! I tested it and it works well. There are some small changes to be made though if thats okay.

    Is it possible to have the name and address form on the first page? Then a link button that says 'Click here for christmas cards' that takes people to page 2? If thats difficult maybe its better to put the christmas cards and the form on the first page and have just one page for the form. I just don't want people to miss the form.

    I like the way you've enabled it to calculate the total number of cards. It only needs to say 'Total number of cards and give the number, I think showing the total number of 6, 12 and 24 packs is unnecessary. Please can there be a small piece of writing next to the total figure that says minimum trade order 42 cards?

    Will I be able to edit the writing in the sub header? There's a few small changes I want to make with that. 

    Otherwise, all good, thank you.

  • Profile Image
    JotForm Support

    Answered by abajan on November 20, 2013 at 06:27 PM

    Hello Sophie,

    Glad you like how things have turned out so far.

    The name and address form can be moved to the first page but if the only reason for having that done would be to ensure that those fields aren't overlooked when submitting the form, that's already been taken care of. I have set those fields to "Required" and as such, if a submission is attempted with any of them not completed, the submission will be stopped and notices will appear on the form indicating which fields need attention. Try submitting the form without completing those fields and you'll see what I mean.

    As requested, I'll remove all the elements displaying the totals but the one displaying the total number of cards and also include the minimum order text.

    Yes, you'll able to edit the sub header as desired.

    I'll work on the changes and get back to you.


    Ciao for now

  • Profile Image
    JotForm Support

    Answered by abajan on November 22, 2013 at 12:00 PM

    Hi Sophie,

    Please test this latest demo and let me know of any further changes to be made.


    Thanks

  • Profile Image

    Answered by swindells on November 22, 2013 at 02:22 PM

    Hello, that looks good. I like the changes you've made with the 'total cards' especially.

    I've been thinking about the layout and if possible i'd like to change it so that all the designs are one one page with the form at the bottom. The christmas ones can be under the others with a small space between them and the others and a header 'Christmas cards'. I think it makes sense to have it all on one page. I hope thats not too much work for you to change. 

    Many thanks

     

     

  • Profile Image
    JotForm Support

    Answered by abajan on November 22, 2013 at 07:08 PM

    Hi Sophie,

    It shouldn't be too much work but bear in mind that while each gallery has been designed to hold up to 60 images (20 rows having 3 images), the first gallery currently contains just 12 rows and the second, just 3. This means that when both galleries are full and placed on the same page, that page will have a total of 40 rows of images, each 290 pixels in height plus the vertical space occupied by the form. This will result in a page that's over 12,000 pixels tall. It's also possible to add rows to the galleries if there are more than 60 cards per category, not to mention the possibility of additional galleries in the future to accommodate other categories of cards.

    With the above information in mind, do you still wish me to do the redesign? It's your call and I'll await your reply before changing anything.


    Thanks

  • Profile Image

    Answered by swindells on November 23, 2013 at 05:49 AM

    Hello, 

    I see what you mean about the gallery sizes. It's great that you've designed the galleries so that I can add lots more images. I am constantly expanding my range so that will be really useful. Will I be able to easily add the images myself? Will I be able to change the order of the images? Ideally in the near future i'd like to have separate galleries for different occasions 'valentines' 'birthday' etc but for now will stick to this as its easier.

    I have changed my mind and after your advice will stick with having the separate christmas gallery. I would prefer to have the form at the bottom of the first page though as most of the year people are not ordering christmas cards so they won't want to go to gallery 2. Therefore having it on the first would be better.

    One small change, can the button on the christmas page just say 'back' rather than 'back to generic cards'. 

    Can the sub header on the first page say 'Cards for all occasions' instead of 'Generic cards'. You said i'd be able to edit that text myself so I may be able to do that.

    many thanks

  • Profile Image
    JotForm Support

    Answered by abajan on November 23, 2013 at 10:10 AM

    Hi Sophie,

    To anwser your questions in order:

    Will I be able to easily add the images myself?
    Yes, that's my main goal with this project.

    Will I be able to change the order of the images?
    Unfortunately, this won't be easily doable with the current setup. Doable? Yes but not easily doable because it would require fairly significant editing of the your web page's source code each time images are moved. The problem isn't in moving the images themselves but having their drop down selectors move with them. Those drop downs aren't where they appear to be. If you view the source of the demo, you'll see that they are actually below the tables (galleries). This block of CSS positions them correctly and it would need to be carefully edited after each rearrangement of images. Sounds simple enough but should it ever be edited incorrectly, you'd have instances of users thinking they're selecting certain cards when they're actually selecting completely different ones! Down the road I might be able to come up with a solution to easily move the drop downs and images together but I'm not making any promises.

    Can the button on the christmas page just say 'back' rather than 'back to generic cards'?
    Yes, that can be done very easily, either in the form builder (editor) or in the web page where the form will be embedded

    Can the sub header on the first page say 'Cards for all occasions' instead of 'Generic cards'?
    Another easily accomplished task, either in the form builder or in the web page. ('Cards for all occasions' certainly sounds better than 'Generic cards'.)

    Having the form at the bottom of the first page would be fine. Actually, having it appear at the bottom of every page would be ideal but if I'm unable to accomplish that, we'll have to settle for having it on just the first.

    Anyway, I'll see what I can cook up over the weekend and get back to you ASAP.


    Ciao for now

  • Profile Image
    JotForm Support

    Answered by abajan on November 23, 2013 at 10:40 AM

    Just to update you. I've found a solution to have the form displayed on every page.

  • Profile Image
    JotForm Support

    Answered by abajan on November 23, 2013 at 08:59 PM

    Sophie,

    Please test this demo and let me know of any further required changes.


    Cheers

  • Profile Image

    Answered by swindells on November 24, 2013 at 04:39 AM

    Hello,

    i've just tested the demo and there are a couple of problems. It is not possible to view the christmas cards without filling in the form and then when i did fill in the form on the first page with my address it didn't like it and showed up red so wouldn't let me submit. Is there a solution to this?

    Thank you

     

  • Profile Image
    JotForm Support

    Answered by abajan on November 24, 2013 at 04:58 AM

    Hi Sophie,

    The first issue looks solvable but I don't know why the form would reject your address. Exactly what did you enter in each box of the address field? (I've set this thread to private. So, only our support team will be able to see it.)

    Looking forward to your reply.


    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on November 24, 2013 at 05:30 AM

    The browser (including the version) and operating system may also be helpful in resolving the address rejection issue. (For example, Chrome 22 on Windows.)

  • Profile Image

    Answered by swindells on November 24, 2013 at 07:20 AM

    Hi, i've just done another couple of tests with the demo you sent and the address seems to be fine this time, maybe I didn't enter it correctly before. Once i've entered the address correctly on the first gallery I am able to view the christmas cards in the second gallery but people need to be able to view both galleries and choose to fill in the form on gallery one or two if possible.

    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on November 24, 2013 at 09:17 AM

    Yes, you're quite right that users should be able to freely view all of the galleries and complete their details whenever they wish. Presently, forms with page breaks don't allow users to advance to subsequent pages before completing all required fields on the currently displayed page. However, in this form's case, it makes more sense to not have that restriction because the details would be visible on every page. I think I'm pretty close to a solution on this but don't break out the champagne just yet!

  • Profile Image
    JotForm Support

    Answered by abajan on November 24, 2013 at 02:04 PM

    Sophie,

    Please test this latest demo. I still need to run more browser tests on it but let me know if it's okay.


    Thanks

  • Profile Image

    Answered by swindells on November 24, 2013 at 02:46 PM

    Hello Abajan (Is your name Abajan or Wayne? That's what it says on the demo form)

    It works really well! I'm very happy with it, thank you.

    Am I allowed to break out the champagne now?!

    I'm keen to move on to the next step and clone the form when you are.

    Many thanks!

     

     

     

     

  • Profile Image
    JotForm Support

    Answered by jonathan on November 24, 2013 at 05:03 PM

    Hi Sophie,

    On behalf of our colleague Wayne (aka Abajan), you're quite welcome. =). We are happy to know your satisfaction on what had been achieved so far.

    Wayne is not online at the moment, but he will surely update you once he is.

    To satisfy your curiosity for the meantime, his proper name is Wayne but as you can see in here, his username is Abajan (I'll leave to him to give you the details what his handle name means =) in case you're also curious to know about that )

    --

    I will notify also Wayne on your latest message just to be sure he get it.

     

    Thanks.

  • Profile Image
    JotForm Support

    Answered by abajan on November 25, 2013 at 08:45 AM

    Hi Sophie,

    Now that it's been confirmed that everything is setup correctly, we can proceed to the final phase: Getting this to work on your end, with any additional images you wish to insert into both galleries.

    The champagne is on ice and, barring any unforeseen circumstances, will be uncorked sometime later today (Barbados time) when I provide the details on how to go about this. I'll try to keep it simple but of course, if anything is unclear we'll be happy to guide you.

    My name is indeed Wayne. (There's a clue in this reply as to where the "abajan" thing came from. ;)

    I'll be back.

  • Profile Image

    Answered by swindells on November 25, 2013 at 10:02 AM

    Hi Wayne 

    Aha I see, you're from Barbados! That explains where 'abajan' came from (Bajan) and the time difference. Must be a lot warmer where you are! :-)

    I look forward to the final phase, it'd be great to get it working my end as soon as possible.

    Many thanks

    Sophie

  • Profile Image
    JotForm Support

    Answered by abajan on November 26, 2013 at 10:43 AM

    Hi Sophie,

    Just letting you know that I haven't forgotten you. I just want to make the instructions as easy to understand as possible.

    Thanks


    Wayne

  • Profile Image

    Answered by swindells on November 26, 2013 at 10:44 AM

    Hello, please can you help me with the final phase? I'm eager to get it up there on my site.

    Thank you :)

  • Profile Image

    Answered by swindells on November 26, 2013 at 10:45 AM

    Hi Wayne, that's weird, we just sent each other messages at the same time!

    Okay thank you, i'll wait to hear your instructions.

  • Profile Image
    JotForm Support

    Answered by abajan on November 26, 2013 at 10:51 AM

    Yes, that is weird. It's just like the other day when I meant to call someone from my phone and ended up calling someone else who happened to be simultaneously calling me. I told her, "Sorry Susan, I didn't mean to ring you." and she replied "But it was I who was calling you!" lol

    Anyway, I'll be back.

  • Profile Image
    JotForm Support

    Answered by abajan on November 27, 2013 at 10:21 PM

    Hi again Sophie,

    The first order of business is to decide where online to store the greeting card images for the galleries. In my demo, all of the images are stored in a folder at the same website as the demo. This is the best way because the page doesn't have far to go to fetch the images, resulting in them appearing on the page more quickly than if they were stored at another domain. However, it would be simpler for you to upload the images to your JotForm account since you are already familiar with this method. (The load speed difference shouldn't be that noticeable anyway.)

    For each new image to be added to the galleries, please do the following:

    1. If the image is not on your computer but on the internet, download it. (If you wish to keep the original large image for some other purpose, make a copy of it and perform the operations below on the copy instead of the original.)

    2. Rename the image according to the title it will have in the gallery (including the serial number you give it, for easy reference when there are many galleries with many images). For instance, in my form, Bunnyjet.jpg was renamed bunny_jet_ss48.jpg (before it was converted from JPG to PNG format and optimized at TinyPNG. More about that below.). Notice that the name is all lowercase with underscores separating the words. In the case of titles containing ampersands (&) substitute the word "and", as I did with Birds & Berries SS42, so that it became birds_and_berries_ss42.jpg. Also, there should not be any punctuation marks in the filename except for the dot immediately preceding the extension (.jpg)

    3. Resize the image using Pic Resize as follows:

    a. Either drag the image's icon to the area indicated and click "Continue", or locate the image via the "Browse" button,

    then double-click the file and click Continue
     


    b. After the preview loads, scroll down to Step 2 and select Custom Size...
     


    c.
    If the image is in the landscape format (like "Dancing Tools SS43"), enter 440 in the Width textbox and leave the Height box empty, as shown below:


    Conversely, if the image has a portrait orientation (like "Doggie Pile SS44"), enter 440 in the Height textbox and leave the Width one empty

    d. For each image, divide the value that's automatically calculated by Pic Resize by 2.2 and take note of the result. Using the above screenshot as an example, the auto-calculated value is 330 and 330 divided by 2.2 is 150.

    e. Skip Step 3 and go directly to Step 4. Leave the image format at the default (PNG) and click I'm Done, Resize My Picture!


    f.
    When the next page loads, click Save to Disk
     


    4. Locate the file which was downloaded in the last step above and remove "rsz_" from the beginning of its name. For example, if you were to resize an image named angry_birds_ss101.jpg and download it, the new file would be named rsz_angry_birds_ss101.png. You would change it to just angry_birds_ss101.png

    5. When it comes to web pages containing images, the smaller the file size of each image (not to be confused with its dimensions), the faster it will appear when the page is loading. The best online tool (of which I'm aware) to reduce the file sizes of PNGs while maintaining their quality (to the naked eye) is TinyPNG. So, go there and do the following:

    a. Drag up to 20 of the resized images into the area labelled Drop your .png files here!
     



    b.
    After the optimization has been completed, click each download link in turn to download the files:

    6. Have a look at the source of my demo and you'll see lines having code like

    src="images/form-33206268770960/doggie_pile_ss44tp.png",

    each contained within an img (image) tag. The part after the last slash (doggie_pile_ss44tp.png) is the filename of the image to which the web page points. Notice that it has "tp" in it. After downloading the optimized images, I added the that identifier to each image's filename to differentiate it from the non-optimized version of the image. It's just a safeguard to be certain that the src (source) attribute in each image tag is pointing to the correct (TinyPNGed) version of the image. In other words, if the non-optimized version of an image instead of its optimized (TinyPNGed) version were to be mistakenly uploaded to the folder from which the web page would retrieve the images, due to the absence of "tp" in its filename, that image won't be shown on the page. You should do the same to your optimized images.

    7. At this stage, all of the extra images you wish to include in the galleries should be in one folder on your computer and each image's filename should include "tp", as explained above. If the folder has several other PNG images not connected with this project, it would be a good idea to move the gallery images to a separate folder, to be used exclusively for optimized images for the greeting cards form. (Incidentally, here's what to do if you don't see extensions at the end of the file names)

    8. Open a new browser tab or window and load any of your forms in the form builder or create a new form (It doesn't matter which procedure is used. You'll see why shortly)

    9. In the Form Tools menu click Image:


    10.
    When the Image Wizard pops up, select Upload Image File and click Next
     



    11.
    Click Choose File and navigate to the folder that contains the optimized images for the galleries

    12. Double-click the first file and then click Upload File. Alternatively, click the file, click Open and then click Upload File. (The image will automatically appear on the form but there's no need to keep it there because the only purpose of this exercise is to store the images in your account. However, don't delete it from the form just yet.)

    13. For each subsequent image, repeat Steps 9 to 12

    14. Now that you've uploaded the new images for the galleries, look at them on the form. This is how each of them will look when the mouse is hovered over their thumbnails in the galleries. Do they all look okay? Are any of them missing? If everything is fine, click any of the newly inserted images and then click the Image Source button and copy the URL displayed in the box:


    15.
    Open Windows Notepad and paste the URL which would have been copied in the previous step into the blank document

    16. Delete the images from the form and save it but don't close it

    17. Right-click this link and when the menu pops up, click Copy link address

    (That's what it states in Chrome but in Firefox it's Copy Link Location. Other browsers may state something else but the result is the same.)

    18. In the browser tab containing the saved form in the form builder, right-click any empty region of the form and in the contextual menu, click New Form
     



    19.
    Select Import Form > From a web page
     


    20.
    Click the URL box, paste the URL which was copied to your computer's clipboard in Step 17 and click Continue

    21. A clone of my form should now appear in your form builder. If you wish to change the heading text of either of the galleries, just click it and edit the text as desired

    22. Remove the form's injected CSS. (You can always access it at this link. Plus, I have a copy of it.)

    23. Besides the galleries now looking all messed up (CSS is really important!), you'll notice that the selectors (drop downs) for the images have now moved below their respective galleries. Moreover, their labels are now visible.

    The images are inserted into the galleries by row, not column. In other words, the first row of the "Cards for All Occasions" gallery contains (from left to right) the first three images of that gallery: "Doggie Pile SS44", "Cat Stack SS45" and "Dog Lady SS46" respectively. In like manner, images 4, 5 and 6 ("Birds & Berries SS42", "Treehouse SS35" and "Dancing Tools SS43" respectively) appear on the second row and so on.

    24. As mentioned in the previous step, the image selectors now appear beneath their relevant galleries. Now that the labels of the selectors are visible, you can see that the first 6 selectors for the first gallery are labelled respectively:

    "Doggie Pile SS44"
    "Cat Stack SS45"
    "Dog Lady SS46"
    "Birds & Berries SS42"
    "Treehouse SS35"
    "Dancing Tools SS43"

    Currently, Gallery 1 ("Cards for All Occasions") contains 35 images and 35th image is "Love Birds SS39". If you view the demo, you'll see a blank cell next to the one containing that image. That's where the 36th image will appear:


    In the form builder, scroll down to the selector labelled Gallery 1 Card 36


    and decide which of the newly uploaded images you wish to appear in the blank cell and change the label of the selector from "Gallery 1 Card 36" to the title of that image (in the same format as the other labels i.e., with title capitalization and no underscores)

    25. At this point it may be helpful to grab a pencil and sheet of paper and draw a sketch of where you want the remainder of the new images for that gallery to appear. Once you have decided where they should go, label the cells on the paper

    37, 38, 39 in the first row
    (which would actually be the 13th row of the entire gallery)

    40, 41, 42 in the second row and so on.

    As previously mentioned in one of my earlier replies, each gallery can hold up to 60 images (cards). So, there's room for 25 additional cards for all occasions and 53 additional Christmas cards.

    26. Click the Gallery 1 Card 37 drop down's label and change its text to the title of the card you wish to be displayed in the cell under that containing the "Just Married SS38" card. (Refer to the sheet of paper)

    27. Continue referring to the sheet of paper and editing the labels for Gallery 1 until all of the labels for the newly uploaded "Cards for All Occasions" images have been updated. (Take care not to skip any labels.)

    28. Use the above steps as a guide to fill in the new Christmas card labels in Gallery 2

    29. Select all of this code and copy it to your computer clipboard

    30. Open a new instance of Notepad, paste the code there and save the file as gallery1.txt

    If the gallery1.txt file is carefully examined, you'll see that it is code for a table which has 20 rows (the tr elements), each containing 3 cells (the td elements). The code between each set of td (table data) tags is what is displayed in each cell of the gallery when viewed in the browser. Take note that whereas the cells in each row appear from left to right in the browser, the code to display them is written in a top-down fashion. This is to avoid long horizontal lines of code. Each cell contains the title of an image (wrapped in paragraph tags) along with two img (image) tags. In each line of the code containing img tags, you'll notice that the URL in the first img tag is identical to that in the second. In other words, the src attribute in both img tags are pointing to the same image. However, the width and height attributes in the first tag cause the image to be displayed at a smaller size than its actual dimensions.

    The following screenshot shows the left portion of lines 156 to 183 of the code in your gallery1.txt file:

    You can also go here and scroll down to see the lines to which I'm referring, highlighted. Widen the view if necessary:


    In reference to the first screenshot, the upper half of the code is what is displayed in the browser as the 12th row (currently, the last row) of the first gallery. Notice that whereas the first and second td elements each contain code to display the title and image, the third td element contains no title and no URL. As such, it is displayed as a blank cell (currently, the last cell) in the gallery. That's where the code to display the 36th image and its title should go.

    The bottom half of the screenshot shows the code for the 13th row of the gallery but even if that row were to be filled with data, it won't be shown in the browser because it's commented out. The screenshot shows only the opening comment tag but the closing tag can be seen on the penultimate line of your gallery1.txt file, after the last (20th) closing tr (table row) tag:

    How To Have The New Greeting Cards Displayed In The Galleries

    In your gallery1.txt file, notice how the URL in each of the 70 non-empty img tags begins with "https://www.jotform.com/uploads/abajan/form_files/" followed by the filename of the image. That first part of the URL is the path to the images. It has my username because the files are in my JotForm account. However, since the extra images to be added to the galleries are in your account, the URL path to those will be different.

    31. In Step 15 above, you would have pasted a URL into a blank document in Notepad. Switch to that Notepad window and remove the filename (the part after the last slash) from the URL

    32. Copy what is left to your clipboard and paste it between the double-quotes in each of the 50 empty src attributes in the gallery1.txt file. In other words, wherever you see src="", paste between the quotes that which is on your clipboard. (Three screenshots back, the second and third arrows show where it should be inserted.)

    33. Refer to the sheet of paper on which the positions of the new greeting card images were noted and insert the title for each of them between the empty paragraph tags, highlighted here (scroll down the page). There are 25 empty paragraph tags in the gallery1.txt file but you may have less than 25 titles to insert. Just begin at line 166 and fill in as many paragraphs as they are new titles, taking care not to skip any of the tags. Use the currently inserted titles as a guide

    34. Insert the filenames of the images after the URL paths which were inserted in Step 32. The full URL should not contain any spaces, meaning that there should be no space between its last slash and the filename, and the filename itself should not have any spaces. Remember the format of the filename should be as follows:

    a. All of its letters should be in lowercase

    b. If the card's title contains multiple words, they should be separated with underscores

    c. The word "and" should be substituted for each ampersand (&)

    d. It should contain no punctuation except for the dot before the extension (.png)

    e. "tp" should be appended to the name, just before the dot which precedes the extension

    As an example, the filename of a card whose title is "Rainbows, Raindrops & Lollipops SS57" should be "rainbows_raindrops_and_lollipops_SS57tp.png". Use the currently inserted URLs as a guide.

    With the titles in place, it's less likely that the images will be inserted in the wrong order. Just begin at line 167 and then go to line 173, 177, 181 and so on (scroll down this page to see the highlighted lines). Remember that there should be two (2) instances of each URL per line.

    35. In each line containing img tags, the first one has width attribute and a height attribute. Here's where you will need to refer to the results of the calculations done in section d of Step 3. For each landscape oriented image enter 200 as the value of the width and for each portrait oriented image enter the same (200) as the value of the height. For each landscape image, enter the value you calculated for the height of the particular image and do the same for the width of each portrait image

    36. Since nothing between the comment tags will be displayed, the opening one needs to be moved to the end of the last row containing the new images. Have a look at where the opening comment tag is currently located. It's positioned immediately after the closing tr tag on line 169 (highlighted here) because that was last row containing images before you would have inserted the new ones

    37. Save the file

    38. Copy this code to your clipboard

    39. Open a new instance of Notepad, paste the code there and save the file as gallery2.txt

    40. Use the procedures described in Steps 30 to 36 for guidance on how to insert the Christmas card images

    41. Close the Notepad file containing the image URL but don't save it because it won't be needed again

    42. Select all of this code and copy it to your clipboard. (You'll recognize it as the form's injected CSS which was deleted in Step 22)

    43. Open a new instance of Notepad, paste the code there and save the file as "Greeting Card Form Injected CSS.txt"

    44. In that file, search for the comment which states:

    /* Gallery 1 */
    /* remove relevant ID (and its comma) as card is added */

    and remove as many IDs and their commas as new images which were added, beginning at #id_142,. In other words, if you added 10 images to Gallery 1 ("Cards for All Occasions"), remove

    #id_142, #id_143,
    #id_144, #id_145,
    #id_146, #id_147,
    #id_148, #id_149,
    #id_150, #id_151,

    45. Follow the same procedure for Gallery 2 ("Christmas Cards"), where the comment states:

    /* Gallery 2 */
    /* remove relevant ID (and its comma) as card is added */

    46. Save the file and copy all of its contents to your clipboard

    47. Paste it into the form's injected CSS box and close the preferences

    48. Switch to the gallery1.txt file in Notepad, select all of its contents and copy it to the clipboard

    49. In the form builder, click the "Cards for All Occasions" gallery and then the HTML button in the form builder's toolbar:


    50. Hit [Ctrl+V] to overwrite (paste over) the contents and click OK

    51. Switch to the gallery1.txt file and do likewise with the "Christmas Cards" gallery

    52. Save the form

    Now, as mentioned in earlier replies, the form's full source needs to be embedded into a web page along with a script, in order for the said script (seen near the bottom of the demo's source) to "work its magic", so to speak.

    53. In the form builder, click the Preview button


    and then click Open in a new tab
     

    54. When the browser tab opens, view the page's source, select all of it and copy it to your clipboard

    55. Open a new Notepad file and paste the code there

    56. You will see the end tags of the form and body on the second last line of the document. Position the insertion point (cursor) between the tags and hit [Enter] twice to insert a blank line between the two tags

    57. Copy this code and insert it into the blank line

    58. Save the file as greeting-card-order-form.txt

    59. Close Notepad, locate the same file on the computer and change its extension from txt to html. A notice will likely appear stating that if the filename extension is changed, the file may become unusable and asking if you're sure you want to change it. Click "Yes"

    60. Upload the file to your website

    That's pretty much it. If you need clarification on anything in this unusually long reply, I'll be happy to oblige.

    My apologies for taking so long to get back to you.


    Wayne

  • Profile Image

    Answered by swindells on November 29, 2013 at 01:07 PM

    Hi Wayne

    Thank you for the details explanation.

    i'm a bit overwhelmed by it and can't get my head round it yet. I've never worked with any kind of coding before and it seems like such a long process just to add an image. I'm not sure if thats going to work for me but also not sure if there's an alternative. It would be so great if Jot Form had a template product order form with pictures. Will have a go and see how I get on. 

    Many thanks.

  • Profile Image

    Answered by EliezerN on November 29, 2013 at 03:14 PM

    Thanks for contacting us.

    Please give it a try and if you have any question or you get confused/stuck in any point, don't hesitate to contact us and we will  do our best to help you or we can contact our colleague Wayne so that he can clarify if something is not clear enough.

    Thanks

  • Profile Image

    Answered by swindells on December 02, 2013 at 04:00 PM

    Okay, i've finally worked my way through the list and fingers crossed i've done it okay. Had problems with the sizing of images. You suggested sizing them at 440 height or width and then dividing that by 2.2 later on. The first try I did, ended up with a square image rather than a rectangle so I changed the 440 figure to 312 and then when that was divided by 2.2 it came to 142. Was that correct? I've added an image and it almost looks okay, but when the mouse hovers over it its not as big as the other images.

    I've finished with an html file called greeting-card-order-form as you suggested but I can't get it to upload to my iweb site. Do you know how to upload an html file to iweb site? I've tried using the snippet option. I will change to a wordpress site soon but for now need it on iweb.

    Many thanks


  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on December 02, 2013 at 06:45 PM

    I think there is an HTML snippet at iWeb were you can add the code our brilliant tech support representative Abajan have suggested to you

  • Profile Image

    Answered by swindells on December 02, 2013 at 07:10 PM

    Hey Wayne

    I've worked out how to embed it in the iweb site now but something has gone wrong. It's missing the main contact form and the link to the christmas cards is not working please can you tell me what's happened. Here's a link to it on my site: http://www.sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form.html

    Thank you

    Sophie

  • Profile Image
    JotForm Support

    Answered by abajan on December 02, 2013 at 07:51 PM

    Hi Sophie,

    These issues are affecting the form at its own JotForm URL (http://www.jotformeu.com/form/33354994783368) as well as the one embedded in your iWeb page. So, we first need to determine what's wrong with the setup in the form builder. I'll need to clone your clone back into my account to see if I can find out what's causing these issues. Hopefully, the process won't take long but I can't guarantee that that will be the case.

    I'm really sorry that my last post had to be so long. I'm pretty sure it's the longest post I have ever made on this forum! Sixty steps is an awful lot and I could well understand how confusing it must have been to read through all that because even though I'm its author, it looks kinda confusing to me too!

    Anyway, I'll try my best to see if I can figure out what's going on with your form.


    Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on December 02, 2013 at 08:46 PM

    Just to update you, I have discovered what was causing the form not to advance to the second page when the Christmas Cards button was clicked and why the user details section of the form was not being displayed. Somehow two extra empty image fields were added to the form. Once I removed them from my clone of your form, the aforementioned issues were resolved.

    Now, I'll correct the size of the hover state of the new image you added ("Not Mushrooms SS49").

    I'll be back shortly.

  • Profile Image
    JotForm Support

    Answered by abajan on December 02, 2013 at 09:16 PM

    Actually, in order to correct the size of the image that pops up, I would need the original, so that I can reduce it to 312px wide by 440px high. You'll need to upload the full sized original image to your account or some place where I can access it. If I were simply to expand the current available image to 312px by 440px, it would be blurry.

    In the meantime, please do the following:

    1. Cut your form's injected CSS to your computer's clipboard

    2. Delete the two empty image fields mentioned in my last reply

    3. Paste the CSS from the clipboard back into the form

    4. Save the form

  • Profile Image
    JotForm Support

    Answered by abajan on December 02, 2013 at 09:34 PM

    Just so there's no confusion, the user details section is visible on the first page only when the form is embedded in your iWeb page along with my custom script. There's also a very small but important change which needs to be made to the form code once it's embedded in your site. (There are two tags which have to be inserted.) I only just realized that it wasn't mentioned in my long reply. Anyway, more about that later.

  • Profile Image
    JotForm Support

    Answered by abajan on December 02, 2013 at 09:59 PM

    By the way, here's what the empty image fields which need to be deleted look like:

  • Profile Image

    Answered by swindells on December 03, 2013 at 05:34 AM

    Hi Wayne

    I've done as you suggested and deleted the empty fields. I've also added a full size original image (Not Mushroom SS49) to my account.

    Please could you tell me once again the correct sizing of the images just to be sure. Where did the 312px figure come from? 

    I can't see the user details section on the first page. Are you saying that only appears when its embedded online?

    By the way, even though your post last time was extra super long and I found it confusing at first, i've got to say it was well written and had lots of detail, so thank you, I appreciate it  :)

     

     

     

     

  • Profile Image
    JotForm Support

    Answered by abajan on December 03, 2013 at 07:21 AM

    Hi Sophie,

    I'll explain how to size the images a little later but first go to this page and download the image displayed there. (Right-click it and when the menu pops up click Save image as..., as shown below)

    After it has been downloaded to your computer, go to the folder where it's located and change the image's name from 69c.png to not_mushroom_ss49tp.png

    Delete the not_mushroom_ss49tp.png image which is currently in your JotForm account and then replace it with the new one you just downloaded and renamed. It should now appear at the correct size when the mouse is hovered over its thumbnail.

    I'll be back.

  • Profile Image

    Answered by swindells on December 03, 2013 at 09:35 AM

    Okay, i've done what you said except the mushroom image is not the correct size when hovered over. I just uploaded the new image to my image files in jotform account. Was I supposed to change it in the html? 

  • Profile Image
    JotForm Support

    Answered by abajan on December 03, 2013 at 12:10 PM

    Hi again Sophie,

    From what I can tell when I visited your form's page (not the page with the embedded form but the form's own URL: http://www.jotformeu.com/form/33354994783368), the mushroom card was being shown at the correct size when its thumbnail was hovered over with the mouse:


    The form embedded in your iWeb page is not automatically updated when changes are made in the form builder. That's the main disadvantage with using the full source of a form (see Which Form Embed Code Should I Use?) but due to the script that needs to be included in your iWeb page and the need to edit the form source (by adding the two tags to which I earlier referred), it's the only available option in this case.

    Now, we're back to the same situation of the form not advancing to the next page when the "Christmas Cards" button is clicked. That's due to the image field (indicated in the screenshot) not being deleted. To get the form working properly again you'll need to repeat the process I provided a few posts back i.e. cutting the injected CSS to your clipboard, deleting the image field and then pasting the CSS back into the form. To avoid this hassle, either ensure that the image fields are deleted from the form after they have served their purpose (uploading the greeting card images to your account) or use a separate form to upload the images. As mentioned in Step 12 of my long reply, the only purpose of those image fields is to get the images into your JotForm account.


    How to Resize the Images

    In a nutshell, there are two types of images which will appear in your form's galleries:

    1. Landscape

    2. Portait

    Landscape images are those which are wider than they are tall. Examples of landscape images currently in Gallery 1 are Mice Party SS06Bottles SS32 and Wanderlust Boat SS37.

    Portrait images are taller than they are wide. Examples of portrait images already in Gallery 1 are Cupcakes SS02Baby Tree SS41 and Autumn Leaves SS34.

    So, let's assume that "Mice Party SS06" (a landscape image) was not in Gallery 1 as yet and you just had the original extra large image. Let's also assume that it has already been renamed to mice_party_ss06.jpg. Here's how you would resize it:

    1. (Option a) If the folder containing the image is open and you can see the image's icon, drag the icon to the area in the following screenshot where it states "Click 'Browse' and choose a picture file OR drag a picture file here."

    OR

    1. (Option b) If the icon is not visible, click the Browse button, search for the file and when you find it, double-click it.

    2. Regardless of which upload method was chosen, click the big yellow Continue... button and wait for the image to be uploaded


    3. After the preview loads, scroll down to Step 2 and select Custom Size...


    4. Since mice_party_ss06.jpg is a landscape image, you would enter 440 in the Width box and leave the Height box blank, just like the sample image in the following screenshot:


    After entering 440 for the Width, if you click away from the boxes you'll see that the Height value gets inserted automatically by the Pic Resize software. Divide the height value displayed by 2.2 and note the result because in the Gallery 1 code that value needs to be entered as the height for the thumbnail of Mice Party SS06. There's no need to note the width because all landscape images in the galleries will be displayed at 200 pixels (px) in width (440 divided by 2.2). (Conversely, all portrait oriented images will be displayed at 200px in height. So, for those you would enter 440 in the Height box and leave the Width blank. This time Pic Resize will automatically calculate the Width and you will need to note that value.)

    5. Skip Step 3 and go directly to Step 4

    6. Set the Image Format to PNG (In the long reply I erroneously stated that PNG is the default. It's actually JPG that is the default. So, you will need to select PNG)

    7. Click I'm Done, Resize My Picture!


    8. When the next page loads, click Save to Disk:


    9. Locate the file on your computer and remove "rsz_" from the beginning of its name.

    That's pretty much it as far as resizing goes. If you need further clarification, please let me know.


    Cheers

  • Profile Image

    Answered by swindells on December 03, 2013 at 05:24 PM

    Hi Wayne

    Thank you for the detailed explanation of how to resize images properly, that really helped. 

    I've made the changes with the form and the mushroom design is now the correct size which is good.

    The problem now is the user details section has disappeared. I embedded the new form online and it didn't appear.

    Also there seems to be some issues with the card count, its not stating the total numbers.

    Here's the embedded form: http://www.sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form.html

    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on December 04, 2013 at 08:56 AM

    Hi Sophie,

    Besides the issues you mentioned, the form embedded in your iWeb page is not displaying the hover state of the cards in the third column of the galleries correctly. For instance, the third image of Gallery 1 ("Dog Lady SS46") isn't showing the lady! The right side of all images in that column is cropped. From my research on iWeb, I believe this can be easily resolved by manually resizing the HTML widget which contains the form. In the iWeb editor you should see eight little boxes (size handles) along the perimeter of the widget. Click the middle one on the right edge and drag it about an inch to the right (see 3:46 of this official iWeb video) and save the change. Adjust the resizing as necessary.

    There's another issue I spotted: There's no selector (drop down) for the new card ("Not Mushroom SS49"). That's because the relevant selector's ID and its comma (#id_142,) was not removed from the CSS rule which hides it. Remember, each time a new card is added to one of the galleries, its ID must be removed from the said rule. (See Step 44 in my long reply.) Here's what to do:

    1. Load the form in the form builder and remove all of its injected CSS

    2. Open your Greeting Card Form Injected CSS.txt file in Notepad, search for the comments that state

    /* Gallery 1 */
    /* remove relevant ID (and its comma) as card is added */

    and remove #id_142, from the line immediately below the second comment

    3. Save the file and copy all of its contents to your clipboard

    4. Paste what's on the clipboard into the form's injected CSS section

    5. Close the preferences and save the form


    Embedding the Form in Your iWeb Page

    1. Since you're using iWeb, instead of clicking the Preview button (as described in Step 53 of my long reply), it would be better to get the code from the Embed Form Wizard. Copy the code from the box highlighted in Step 4 of this guide to your clipboard and paste it into Notepad (Step 55 of long reply). This code will not have any closing body and html tags. So, skip Step 56 of my long reply and just insert the script below the code you just pasted into Notepad. (From what I can tell, that script isn't currently in your iWeb page. That's why the card count total isn't working.)

    2. Search for this block of code in the Notepad file and add this code to the end of line 12, so that the code now looks like this. As the comment states, those tags make the user details appear on all pages of the form. These are the tags, to which I was referring a few replies back, that are important

    3. Copy all of the code from Notepad to your clipboard

    4. Remove all of the form code that's currently in your iWeb page and then paste the code that's on your clipboard in its place

    5. Save the web page


    The above procedures should correct all of the aforementioned issues. Please keep us updated on your progress.


    Thanks

  • Profile Image

    Answered by swindells on December 04, 2013 at 11:44 AM

    Hi Wayne

    It worked! :-) Very happy. 

    I made all the changes you suggested. I had to increase the width of the page as well as the widget in iweb and now you can see all of the image.

    Here's a link to the embedded order form:

    http://www.sophieswindells.co.uk/Sophie_Swindells/Sophie_Swindells__Trade_Order_Form.html

    I've just done a test submission and it worked great. The only thing is I seem to get 2 emails through for the same submission, one says its from you, which must have stayed since the demos. 

    I'm going to practice adding another new image soon with your brilliant instructions.

    Thank you so much

    Sophie

     

  • Profile Image

    Answered by swindells on December 04, 2013 at 01:04 PM

    Hi again

    I've got some people to test the form and they had a couple of suggestions.

    Is it possible for the person who's made the order to receive a confirmation email with the details of their order?

    There is a long list of countries on the user details section of the form, as most of my customers are from the UK at the moment is it possible to change that so it appears higher up the drop down menu?

    Final question, there is a lot of blank space under the 'christmas gallery' of the form, is that supposed to be there? I thought maybe its space so that further cells can be added later on.

    Many thanks

    Sophie

     

     

  • Profile Image
    JotForm Support

    Answered by abajan on December 04, 2013 at 04:47 PM

    Hi Sophie,

    We're certainly happy to hear that things are working out well so far. I took the liberty of going into your account and adjusting the email alerts (notification and autoresponder) so that each person who submits the form would get an autoresponse containing the details of their order. If you run a test submission and enter sophieswindells@gmail.com  in the email field, you will receive two notifications at that address because

    1. That's the address which is currently in the Recipient E-mail field of the form's notification

    2. The autoresponder will be sent to whatever email is entered in the email field

    However, if a regular user were to enter their email address and submit the form, they would get just the autoresponse (and you would get the notification of that submission).

    Please see the Form Emails section of our user guide for more information on how to set up email alerts, especially the following:

    Setting Up Email Notifications

    Creating a Form Autoresponder

    Notification/Autoresponder Email Details

    Regarding the long list of countries in the postal address field, I have also adjusted that, as follows:

    1. The injected CSS was cut to my clipboard, so that the address field could be seen in the form builder

    2. I clicked the address field and then the Country button in the form builder toolbar, selected United Kingdom and clicked OK
     


    3. The CSS was pasted back into the Injected CSS section of the form preferences

    Users will now see "United Kingdom" by default, instead of having to search the country menu for it.

    If you need clarification on anything about the email settings or the country selector, please open a separate thread on each topic and we'll help you as best as we can.

    As to the extra space under the Christmas Cards Gallery, that's likely due to the amount of images in Gallery 1. I'm now wondering if it might not be better revert to getting the form's source from its URL instead of from the Embed Form Wizard. That's the method I used with my demo which has no such space under the Chrismas Cards Gallery. However, I just tried the Embed Form Wizard method in my local copy of the demo and the space still didn't appear. I think it has to do with the fact that iWeb uses an iFrames to display widget contents. Currently, the only way I can think of to resolve this issue would be to place as many cards in the Christmas gallery as necessary to fill in the space. Of course, if that gallery then has more rows than Gallery 1, a space will appear under Gallery 1. Oh brother! :(

    Anyway, if we can come up with a better workaround we'l let you know.


    Cheers

  • Profile Image

    Answered by swindells on December 05, 2013 at 06:57 AM

    Thank you for adjusting the email alerts and country default, thats great!

    After reading what you say about the space under gallery 2, I think its best to leave it as it is for now and as I add more images it will get smaller. I am also changing my website to wordpress in the next month so maybe it will be better than iweb.

    I have got people to test the order form with an ipad, and there is a problem with ordering with a touch screen, as you hover over the image and it gets larger, it also gets stuck so you can't then see the boxes below to order it and you can't press it again for it to go away, the only way to make it go is to press another design. Is there any way around this? It would be good if you could click on it to make it go away. 

    Thanks

     

     

     

  • Profile Image
    JotForm Founder

    Answered by aytekin on December 05, 2013 at 09:00 AM

    One possible solution might be to not expand on iPad (safari) unfortunately, that's not possible with only CSS. You might want to copy the full form source code to your web site and then hire a javascript developer to implement preventing expanding on safari. 

  • Profile Image

    Answered by swindells on December 05, 2013 at 11:25 AM

    Hello, I still want the images to expand, so you can see the detail, but then when you click again with a mouse or press with a finger they would get smaller again. Is this only possible with Javascript?

  • Profile Image
    JotForm Support

    Answered by EltonCris on December 05, 2013 at 12:56 PM

    @swindells

    Yes, that should be possible with Javascript, or you can use media queries specifically for iPad that won't expand these images when you press or hover the image using iPad device Please refer to this site for the iPad media queries http://stephen.io/mediaqueries/. If you need further assistance, let us know.

    My colleague who provides you with this brilliant workaround will surely get back to you with this anytime he reads your new reply.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by abajan on December 05, 2013 at 05:41 PM

    Sophie,

    I just might have a solution for this.

    I'll keep you posted.


    Cheers

  • Profile Image
    JotForm Support

    Answered by abajan on December 06, 2013 at 12:00 PM

    Sophie,

    Please ask the folk with iPads to test this latest version of my demo. The images expand and contract not only when the mouse enters and leaves them but also when they are clicked.

    Do let us know what they think.


    Thanks

  • Profile Image

    Answered by swindells on December 06, 2013 at 12:53 PM

    Hi Wayne

    They have tested it out and it works :-) when the image is tapped with a finger it expands, and then it can be tapped again to contract. 

    I've had some feedback and the hover over and expand method is confusing people. Is there any way to change it so that its click and expand? This would then work well for ipads and all other computers.

    Sorry to ask you this at this stage but its only when the form is up and running and people try it out that these issues come about.

    Thank you

  • Profile Image
    JotForm Support

    Answered by ardy0689 on December 06, 2013 at 01:28 PM

    Hello swindells. I have tested the latest version of my colleague Wayne, when someone taps the image on an iPad it expands. Do you want to apply the click only and expand even on computers? Is that what you are trying to achieve to have a uniformed method on computers and mobiles using click only and no more hovers? Please let us know if this is the case. Thanks

  • Profile Image
    JotForm Support

    Answered by ardy0689 on December 06, 2013 at 01:45 PM

    In addition to my post, if you want the click and expand only without hovers all you need is to remove these lines at the very bottom of the source code.

    $$('.image').invoke('on', 'mouseenter', function () {
            this.addClassName('bring-forward');
            this.down().next().addClassName('show-image');
        });

        $$('.image').invoke('on', 'mouseleave', function () {
            this.removeClassName('bring-forward');
            this.down().next().removeClassName('show-image');
     });

    This should remove the hovers but leaving the click only methods.

    Regards

  • Profile Image

    Answered by swindells on December 06, 2013 at 01:51 PM

    Hi, yes that's right, i'd like a uniform method on computers and mobiles and click and expand would work well for both. I will try your method of removing those lines from the source code now and see how I get on. Thank you.

  • Profile Image
    JotForm Support

    Answered by ardy0689 on December 06, 2013 at 02:43 PM

    You are welcome, please let us know if you have troubles removing the lines so that we can assist you with it. Thank you.

  • Profile Image

    Answered by swindells on December 07, 2013 at 04:37 AM

    Hi, i've looked through the source code a few times now and can't see those lines anywhere.

    Is there any way you could look at the source code and see what's going on? Thanks.

  • Profile Image
    JotForm Support

    Answered by abajan on December 07, 2013 at 06:44 AM

    Hi Sophie,

    Those lines exist in my latest demo only and not in your code. Besides the script in your code, the injected CSS and code for the galleries also need to be edited.

    To save you the hassle, sometime later today I'll provide a link to the updated code that needs to replace that which is currently in your web page's HTML widget.

    I'll be back.

  • Profile Image
    JotForm Support

    Answered by abajan on December 07, 2013 at 10:29 AM

    Hi again Sophie,

    Please do the following:

    1. Remove all the code which is currently in your iWeb HTML widget

    2. Copy the code which is in the box here to your clipboard

    3. Paste it into the HTML widget from which the old code was removed

    4. Save your iWeb page

    Since you didn't mention that users were confused by the larger images vanishing when the mouse was removed (only when it entered) the images, I thought it best to retain the following portion of the script:

        $$('.image').invoke('on', 'mouseleave', function () {
           this.removeClassName('bring-forward');
           this.down().next().removeClassName('show-image');
        });

    This part of the script can be roughly translated to

    For each image, when the mouse leaves it, hide it.

    Do let us know if the form works as desired after making the change.


    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on December 07, 2013 at 02:57 PM

    Sophie,

    With the updated solution, you may have noticed that some of the rules in the injected CSS have been replaced and that an attribute (class="zoomed-in") has been added to the second instance of each img element of the gallery files. As such, you'll need to replace the code in the following files:

    Greeting Card Form Injected CSS.txt

    Gallery1.txt

    Gallery2.txt

    (They each link to what their code should be updated to.)

    For your current greeting cards, the code I provided in my last reply can be pasted into your iWeb HTML snippet as is. It's when extra cards are to be added to the galleries that you'll need to use the code in the above three text files and edit them as described in my long reply.

    As always, to make it all work, within the HTML snippet the script should follow the form code. The code given in my last reply contains the updated script.

    If any of this is confusing, please let me know.


    Cheers

  • Profile Image

    Answered by swindells on December 08, 2013 at 01:00 PM

    Hi Wayne

    The new coding works really well, i'm so pleased! The feedback from the ipad users is it works a treat :-)

    It is much better on my computer to. and is much more user friendly as the images are not opening when you don't want them too, there's more control. 

    Thank you so much, you're an amazing tech support rep! 

    I've saved the new coding for the galleries and CSS and when I add a new image will replace the code with the new one. I don't have to change it right away do I? 

    Many thanks

    Sophie

  • Profile Image
    JotForm Support

    Answered by abajan on December 08, 2013 at 09:49 PM

    Thanks for your compliments, Sophie.

    Regarding changing the code, there's no need to change anything right now. It's only when extra cards have to be added that the IDs of the selectors (drop downs) for those cards would need to be removed from the rule which hides them, as explained in Steps 44 and 45 of my long reply. That would be in the Greeting Card Form Injected CSS.txt file.

    The contents of the Gallery1.txt and Gallery2.txt files would also need to be updated as cards are added to the respective galleries.

    By the way, would you rather that the cursor become a pointer (hand) when the mouse is hovered over the images, like in this demo? The effect won't be seen on iPads but it would indicate to PC users that the images are clickable. I forgot to include that functionality in the last demo. 

  • Profile Image

    Answered by swindells on December 18, 2013 at 05:07 AM

    Hi Wayne

    Would it be fairly straightforward to change the cursor to a hand? I think it would make it more obvious to users that you could click on them.

     

     

     

     

  • Profile Image
    JotForm Support

    Answered by abajan on December 18, 2013 at 06:32 AM

    Hi Sophie,

    It would require two small changes: One in the Greeting Card Form Injected CSS.txt file and the other in the script that's inserted after the form code in the iWeb HTML snippet.

    The following rule needs to be added to your Greeting Card Form Injected CSS.txt file:

    .pointing-cursor {
    cursor: pointer;
    }

    and the following line needs to be added to the script:

    $$('.image > img').invoke('addClassName', 'pointing-cursor');

    To simplify things just replace all of the contents of your "Greeting Card Form Injected CSS.txt" file with this. Then, replace all of the script with this.

    As always, if any of this is confusing, I'd be happy to clarify it for you.

    Cheers
  • Profile Image

    Answered by swindells on December 18, 2013 at 07:05 AM

    Hi, I tried it and somethings gone very wrong. The form looks all messed up again. i replaced the CSS coding with the new one as suggested then deleted what was in the HTML snippet and replaces it with the forms source code followed by the new script which you just sent. The form now looks a mess. The CSS coding seems to have gone wrong and you can see both the large and small images. Please help. Thank you.

  • Profile Image
    JotForm Support

    Answered by abajan on December 18, 2013 at 07:12 AM
  • Profile Image

    Answered by swindells on December 18, 2013 at 07:25 AM
    Yes, but I haven't updated the page to the web as it looked such a mess.
    Should I upload it to the web so you can see it?
    ...
  • Profile Image

    Answered by swindells on December 18, 2013 at 07:25 AM

    Yes, but I haven't updated the page to the web as it looked such a mess. Should I upload it to the web so you can see it?

  • Profile Image
    JotForm Support

    Answered by abajan on December 18, 2013 at 08:49 AM

    No, don't do that. I think it would be better to copy all of the code that's in the HTML snippet, paste it into to a plaintext (.txt) file and save the file to Dropbox. Alternatively, after copying the code to your clipboard, save it to Kl1p.com as follows:

    There's no need to sign up for an account. Just click the arrow in Step 1
     

    and when the next page appears, un-check Wrap Lines and leave the Language as Plain Text
     



    paste the code that's on your clipboard into the work area and save it

     

    copy [Ctrl+C] the URL in the browser address bar to your clipboard and paste it in your reply here.

    Don't worry Sophie, we'll get this resolved :) 

  • Profile Image

    Answered by swindells on December 18, 2013 at 09:00 AM

    Hi, here's the URL:

    http://kl1p.com/Dc1w

    Hope i've done that correctly.

  • Profile Image
    JotForm Support

    Answered by abajan on December 18, 2013 at 09:54 AM

    Yes, you've done it correctly and I see what you mean. I'm just trying to figure out what went wrong.

    I'll let you know when I find out.

  • Profile Image
    JotForm Support

    Answered by abajan on December 18, 2013 at 10:37 AM

    Hi again Sophie,

    I've spotted the cause of the problem. There were actually a couple issues with your code. Firstly, the opening span tag before the second instance of each image in the galleries was missing the following attribute:

    class="zoomed-in"

    Secondly, due to the absence of this code (to which I referred a few posts back), the user details were not being displayed below the first gallery.

    I've made the requisite corrections. Just copy the code found here and paste it into your iWeb HTML snippet and save the change.

    Be sure to let us know if you experience any further issues with the form.


    Thanks

  • Profile Image

    Answered by swindells on December 18, 2013 at 01:17 PM

    That's great, it's sorted out, thank you!

    The cursor is changing to a hand properly, it's brilliant.

     

  • Profile Image

    Answered by swindells on January 06, 2014 at 03:50 PM

    Hi Wayne, 

    I'm attempting to delete an image from the form and replace with a new one. I replaced the (not mushroom) coding in gallery 1 and then put that code into the html box on the jotform. The problem is the new image is not showing up, its uploaded to the jotform builder but when it appeared it was hidden behind other stuff on the form at the bottom and I wasn't able to click on it, get the URL and then delete. Any ideas how to fix this problem? Can you access my jotform builder and see what I mean? 

    Many thanks.

  • Profile Image
    JotForm Support

    Answered by abajan on January 06, 2014 at 06:55 PM

    Hi Sophie,

    Happy New Year! :)

    Okay, in order to access the new image in the form builder you'll need to delete all of the injected CSS. Once it's removed, the image fields containing the "Bee in Love SS49" card will be revealed in the form builder.

    Anyway, to save you some steps, after deleting the CSS just do the following:

    1. Delete both image fields containing the Bee in Love SS49 image

    2. Delete the contents of your Gallery1.txt file and replace it with this

    3. Scroll down until you find the dropdown labelled Not Mushroom SS49 and change it to Bee in Love SS49

    4. Copy the contents of your Greeting Card Form Injected CSS.txt file to your clipboard and paste it into the Inject CSS box

    5. Save the form

    6. Remove the form code (not the custom script, just the form code) from your iWeb HTML snippet

    7. Paste the new form code in its place

    8. In my reply on December 4, see Step 2 in the section headed Embedding the Form in Your iWeb Page and follow the directions

    9. Save your web page

    That should fix things but if anything goes wrong or if you need clarification on anything, just let us know.


    Cheers

  • Profile Image
    JotForm Support

    Answered by abajan on January 06, 2014 at 07:02 PM

    It happens every time. I carefully check what I write before posting and immediately after posting it I spot an error or omission! AARGH! lol

    After replacing the code in the Gallery 1.txt file, that same code needs to be copied to the form builder. Otherwise there will be no gallery to view on the first page!

  • Profile Image
    JotForm Support

    Answered by abajan on January 07, 2014 at 06:43 AM

    Sophie,

    Upon examining the most recent clone of your form in my form builder, I discovered that the page break and heading for the Christmas cards are in the wrong order. Moreover, both elements are very far from where they ought to be. They should be below the selectors for Gallery 1 but instead they are above them. I'm clueless as to how their positions got switched or how they ended up in their present location. To avoid further confusion, would it be okay if I went into your form and made the requisite changes?

    On another matter, this thread has become too long and it will no longer email notifications of new replies after it hits 100 posts. As such, I have created a new thread. Seeing that this thread is private, that one should be too. However, if it were to be made private before you posted in it, you won't be able to access it. Therefore, only after you make your first reply there will we make it private.

  • Profile Image

    Answered by seanmccthy on September 10, 2014 at 04:52 PM

    @abajan your customer service skills are very inspiring. You went beyond "above and beyond" for this customer and that is just awesome. Keep it up!

  • Profile Image
    JotForm Support

    Answered by abajan on September 11, 2014 at 07:38 AM

    Thanks seanmccthy :)

    Cheers