How can I link images in a form to separate forms?

  • Profile Image
    StuartG94
    Asked on June 11, 2014 at 08:28 AM

    I want to make a form with 5 images and when you click one of the images, it'll link to another form, for example;

    I want several images of Granite, one picture of one wall, one picture of an L shape, etc. for the different shapes of Granite worktops you can get.

    Then I want it to go to a new page but remain within the box that the 5 images were originally

     

    Is this possible, and how can I do it?

  • Profile Image
    ashwin_d
    Answered on June 11, 2014 at 10:51 AM

    Hello StuartG94,

    I did try to find out if any widgets are available to achieve your requirement but could not find any.

    There are two option available to achieve your requirement:

    1. Open form in popup:

    a. Add a "Text" field in your form to display the 5 images

    b. Create hyperlink to link each images to another form. Please check the screenshot below:

    Please take a look at the following form and see if this meets your requirement. I have just enabled the hyperlink on the first image:  http://form.jotformpro.com/form/41614761288964? Feel free to clone this form for a closer look. The following guide should help you in form cloning:  https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    b. Another option is to take the form's source code route and open "Lightbox" form on click of each image which will open the image in a model window.

    Do get back to us if you want to take the source code route and we will try to help you.

    Thank you!

  • Profile Image
    StuartG94
    Answered on June 11, 2014 at 11:12 AM

    Hello, thanks a lot for your reply, it's similar, but not quite what I'm looking for, here's the website,

    http://tandgwebdesign.co.uk/granitemaster.co.uk/online-quotation.html

    at the top you can see all of the options of Granite you can get, I want to be able to click on one of the images and for a form to pop up in the same place as the image, instead of the image, if you know what I mean?

  • Profile Image
    NeilVicente
    Answered on June 11, 2014 at 02:23 PM

    I am sorry, but your description is a little bit confusing.

    When you say 'pop up' do you mean to pop up as in a lightbox?

    Or do you mean to replace the current form (Online Quotation, as in your example) with a form that corresponds to the image clicked?

  • Profile Image
    StuartG94
    Answered on June 13, 2014 at 07:36 AM

    Or do you mean to replace the current form (Online Quotation, as in your example) with a form that corresponds to the image clicked?

    This one! Sorry my descrption was a bit confusing, but this is exactly what I'm looking for. Can it be done, and how?

  • Profile Image
    EliezerN
    Answered on June 13, 2014 at 12:25 PM

    Thanks for the confirmation.

    I think your request can be accomplished. The workaround that I have in mind is to create a multi-section form. The multiple sections will be divided using Form Collapses. Each section would have different fields corresponding to each picture that will show up until a picture is selected, otherwise the only section that will appear will be the one containing the fields of your Online Quotation form.

    Please let me elaborate a demo form to show you how it wold work.

    I will get back to you in a moment.

  • Profile Image
    EliezerN
    Answered on June 13, 2014 at 04:08 PM

    Hi again StuartG94,

    Sorry for replying too late.

    I created the demo form that I promised, here it is: http://form.jotformpro.com/form/41635444355960

    Please notice that it is a single form and I have devided it on multiple sections using Form Collapses, seven sections to be exact. So, The sections are:

    1 - The Images. This is section is the first one on the form and displays the images. It will be displayed always.

    2 - Online Quotation. This section will appear by default, but will be conditionally hidden once an option/picture is chosen. With this section you will no longer need the form "Online Quotation" that you have in your webpage.

    3 - L Shape Form. This section will appear only if the First image/option is selected.

    4 - U Shape Form. This section will appear if the second image/option is selected.

    5 - Square Shape Form. This will appear if the third image is chosen.

    6 -   One Wall Shape Form. This will appear if the fourth image is chosen

    7 - Gallery Shape Form. This last section will appear if the fifth image is chosen.

    So, please have in mind that they are not separated/external forms, but sections within the same form.

    So, after defining the sections what I did was to create conditions to hide/show each section based on the image selected. I followed this method: How to Hide or Show Multiple Fields at Once Based On a Single Conditional Entry

    If you think this fits your needs, you can clone my form, here is how: How to clone an existing form from a URL

    Inform us if you need further assistance with this query.

    Thanks