Can individual images in an array of images in an image check box widget be coded to serve as links to other jotform pages?

I've read a thread where this can be achieved with a check box field:

http://www.jotform.com/answers/157600-Can-I-have-a-list-of-images-each-with-a-checkbox-and-external-preview-link

I want users who click on any of the checkbox images in an image checkbox widget to be taken to another image checkbox page where the images are also selectable where they can make a specific choice:

So an image check box image serves as a link.

Thanks

Nzia

I understand that you want to redirect the user to a separate form when an image is selected. Is that correct? As I check your JotForm which is cloned from one of our colleagues form, the links are already present for the checkbox options. 

Though it is possible with inbuilt checkboxes, unfortunately is is not possible with Image checkboxes widget. Alternatively, you may use the checkboxes to place the images and to have the links as well.

It looks like your requirement to gather sub-options or additional options based on the selection. If the additional options are placed in a separate form you'll be receiving the submissions separately. I'm not sure if this is your actual requirement. If you need to get the additional/sub options to be selected for the same submission, it would be a good idea to place the other images set on the same form. These images may be hidden by using conditions and can be shown only when the previous option is selected.

Please see the demo form below by using Image checboxes widget:

https://form.jotform.com/61283036882963

If you need any further assistance, please let us know. We will be happy to help. 

Hi Kiran thanks.

I think you may have misunderstood. Your colleagues jotform is not my form nor indeed is it the form I wanted to code a redirect into. I simply cloned it to look at his coding and worked out that he did what I want to do but with simple check boxes not image checkboxes.

If I understand you you are saying I can achieve something similar to what I want with checkboxes. You are right when you say I want to: "gather sub-options or additional options based on the selection" if you mean I want to gather customer details of elements selected for orders.

But I don't want the "additional options" to be on the same form as in your demo. i want them on a separate form. Is this possible?

Additionally, can images in simple check boxes be coded to look exactly as formatted in the examples I've provided?

Finally if what I require is possible with basic check boxes can you provide an example with screenshot instructions?

Thanks

I think that my colleague meant that you can use regular checkboxes where you can place image and link.

The code for that you can add simply instead of option in regular checkbox:

And here is the code:

Name of label<img alt="Can individual images in an array of images in an image check box widget be coded to serve as links to other jotform pages? Image-1" src="URL of your image" style="width: 41px; height:28px; " align="absmiddle"><a target="_blank" href="Link for that checkbox" > Name of the Link</a>

So instead of each option you will have to paste code like that with link for image and link where you want to forward your customer.

It should be possible to line them up with css. Will something like that work for you, if it is ok option we can check further how to proceed?

We'll wait for your response.

Thank you.

Thanks Nik_C that would work for me if the images can be made to line up as in my sample and the check boxes customised to look like the radial check boxes in the image checkboxes widget.

Look forward to instructions on how, so that I can redo all the forms I've created so far already!!!

Thanks again

Nzia

As mentioned by Nik_C you just need to paste this code in the checkbox options:

Name of label<img alt="Jotform is Great!" src="http://webtoolswiki.com/wp-content/uploads/2014/12/jotform1.png" style="width: 180px; height:180px; " align="absmiddle"><a target="_blank" href="https://www.jotform.com/myforms?" > Visit Jotform Website</a>

You need to edit the blue parts.

In order to have the images lined up you just need to select the option "Spread Columns":

You can test and clone the demo form:  

https://form.jotform.com/61284988332970 

Let us know if we can assist you further.   

Thank you Carina, very clear and helpful. I've had a go at cloning your form and editing it with the content I want as follows:

https://form.myjotform.com/61284689877578

As you will see there are issues and I have some queries in relation to the results:

1. Clearly I need to how to distribute the images horizontally across the page

2. How do you increase the white space between rows

3. Now that I will be using a combination of these check box pages and image check box widget pages, can the check boxes here be coded to have exactly the same look and feel as the image check boxes widget ones?

4. Can the check boxes appear below the image, centered under the image, followed by the title, and the 'Search and Select link one after the other, all below the image and centered?

Thanks

Nzia

Regarding your questions, there are some limitations.

I was able to spread the checkboxes over the page and increase the space between lines. I also was able to center align labels and link and to position the label bottom along with the link, by changing the order of elements inside the code and adding a break (<br/>):

<img alt="swatch!0" src="http://i284.photobucket.com/albums/ll28/insta12/Swatches/5522552_Whte_zpsu1f5l86h.png" style="width:220px;height:240px;" />WHITE<br/><a href="https://form.myjotform.com/61234819807561?" target="_blank"> Search & Select</a>

Unfortunately I could not position the checkbox bottom as you would like, but as I mentioned there are some limitations.

The code I added was:

.form-checkbox-item {

    width : 225px;

    padding : 22px;

    margin-left : 15px;

    margin-right : 15px;

    text-align : center !important;

}

Here is the demo form:

https://form.myjotform.com/61285628120957 

Let us know if we can assist you further.   

Thanks for your prompt response Carina, it's now near perfect.!

I'm thinking though that as these particular images are really links to selectable items and won't be selected themselves, I'm wondering is there a way of kind of 'hiding' the check box by coloring it and its border white?

And is there a way of getting rid of all the margins and padding around the check box area so everything is centered on the page horizontally and there's no white space above, top margin?

Oh yes! and the 'Search & Select' font looks purplish, where do I make it #8a8888?

Thanks again, you're awesome!

Nzia

In order to hide the checkboxes, please try injecting the following CSS code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

.form-checkbox {

    display: none;

}

On regards of the margins and paddings, please try with the following code:

.form-checkbox-item {

    margin-left: 0px;

    margin-right: 0px;

    padding-left: 0px;

    padding-right: 0px

}

Thanks BDAVID, the code you provided got rid of the checkbox thanks.  I still want to change the colour of the link text 'Search & Select' from purple to Grey.

I'd also like to reduce the 'Search & Select' font size, but don't know how to do so without simultaneously reducing the size of the title font - which I'd like to keep the size it is and make it bold.

Also having viewed the form in Designer I can see that though the labels are centered to each other, they are not actually centered below each image - i.e. they are centered to themselves but left aligned to the image.

Thank you

Nzia

I am not really sure that form you are working on right now. I see you have a lot and they are all updated. I presume this is the one you are working: http://www.myjotform.com/form/61286655722562 

Here's my cloned form: https://form.jotform.com/61292235416957. You can clone it to see how I setup mine.

For anchor tags, there are two colors, the active and once it is visited. Could you please let us know what color you like? Would you like it to have in Grey all the way? You can check the attribute details here: http://www.w3schools.com/tags/tag_a.asp 

Things I did:

1. First, I wrapped labels of your image in <p> element. Both the text and the ones in <a>. Then I set the same width for the <p> elements. It should then auto center your labels without any problems.

2. Here's the complete HTML code for my options list: http://pastebin.com/z1Wk2u0f 

3. Now you'll noticed that I added class names on them so that it would be much more easier to style them using CSS.

4. For the size and color of the anchor text, simply use this CSS code:

.link-label {

    font-size : 11px !important;

}

.link-label > a:active, .link-label > a:link, .link-label > a:visited {

    color : #8a8888 !important;

}

Note that it's class selector are based on the class name I added in the <p> element that wrapped by anchor tags.

Let us know if you need more adjustment on it.