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

    How do I add an image map?

    Asked by liamformedia on January 30, 2014 at 01:07 PM

    Hi,

    I'm trying to add the following img map onto my form but can't find a way of doing it?

    <img src="//www.jotform.com/uploads/liamformedia/form_files/LowPP-MovieHamper-Woobox2-72_1.jpg" width="810" height="1438" usemap="#Map" border="0" />

    <map name="Map" id="Map">

      <area shape="rect" coords="301,742,537,859" target="_blank" href="http://www.devonhampers.com" rel="nofollow" alt="Devon Hampers" />

    </map>

    Is there a way I can build this is?

    Thanks,

    Liam

    Page URL:
    http://www.jotform.com//?formID=40294921387965

    map image map add an image JotForm uploads name height
  • Profile Image
    JotForm Support

    Answered by ashwin_d on January 30, 2014 at 02:19 PM

    Hello Liam,

    Yes it is possible to achieve your requirement. 

    I have created a demo form to add this map. Please take a look at the following form URL and see if you want to achieve something similar:  http://form.jotformpro.com/form/40295232817959?

    To achieve this, you should add a "Text" field in your form and add the map code in html text box. Please check the screenshot below:

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by liamformedia on February 05, 2014 at 06:41 AM

    Hi,

    Thanks for your reply, although I'm having trouble appying it to my form...

    Becuase I have customer CSS on the form, I can't seem to apply one without loosing the other?

    Is there a way I can keep my current form design but add the image map to the background image?

    Thanks

  • Profile Image
    JotForm Support

    Answered by TitusN on February 05, 2014 at 09:59 AM

    Hello,

    Thank you for the response.

    Why not place the image and its attributes in a div, give the div a class, then style it in the form's -Injected CSS?

    <div class="backgroundImage">

    <img src="//www.jotform.com/uploads/liamformedia/form_files/LowPP-MovieHamper-Woobox2-72_1.jpg" width="810" height="1438" usemap="#Map" border="0" />

    <map name="Map" id="Map">

      <area shape="rect" coords="301,742,537,859" target="_blank" href="http://www.devonhampers.com" rel="nofollow" rel="nofollow" alt="Devon Hampers" />

    </map>

    </div>

    Then on the form's CSS, you could style the div accordingly:

    .backgroundImage {

    my css rules

    }

    Does this help?

     

     

  • Profile Image

    Answered by liamformedia on February 06, 2014 at 04:18 AM

    Hi, I'm not sure if I'm that tech savy to get it right - I've tired to do it here: http://www.jotform.com/?formID=40361705904955

    Could you let me know where I'm going wrong?

    Thanks

  • Profile Image
    JotForm Support

    Answered by TitusN on February 06, 2014 at 05:46 AM

    Thanks for the update.

    I want to establish whether you want the following look: http://jotformpro.com/form/40362296515959

    If it is, please remove all the CSS code you have now and insert the following: 

    .form-section {
    margin-top: 1000px;
    }
    #input_5_0.form-label-left {
    width: 492px !important;
    margin-top: -5px;
    }
    #label_5{
    width: 290px !important;
    }
    }
    .form-submit-button {
    margin-left: 0px !important;margin-top: 0px !important;position: absolute;
    }
    .form-checkbox-item {
    margin-top: 16px;
    margin-bottom: 6px;
    }
    .form-textarea {
    background: #FD7800;
    }
    .form-all {
    background-image: url('https://www.jotform.com/uploads/liamformedia/form_files/LowPP-MovieHamper-Woobox2-72_1.jpg');
    }
    input {
    border: 2px solid #08b8d4!important;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 2px;
    padding: 3px!important;
    }
    .form-textbox {font-size: 15px;}
    .form-required {
    color: #e12078;
    }           

    Please let us know if this helps.

    The hyperlink you had added at the center of the image by mapping the anchor will be a little hard to implement. The best I can reccomend is to use a redirect URL once the form is filled.


    Does this help? Please let us know.

  • Profile Image

    Answered by liamformedia on February 06, 2014 at 05:52 AM

    It looks as if the checkbox has been lost?

    Unfortunitly a re-direct would be suitable in this case. Does this mean I'm back to square one?

    Thanks

  • Profile Image
    JotForm Support

    Answered by TitusN on February 06, 2014 at 05:57 AM

    Sorry about that, I seems to have removed it  in the test form.

    The CSS rules will apply to it too.

    Hmm, lets see what other workarounds would work for the mapped hyperlink.

    I will return.

  • Profile Image
    JotForm Support

    Answered by TitusN on February 06, 2014 at 07:29 AM

    How does this look (hyperlink included)? http://www.jotformpro.com/form/40362678843967

    You may clone it and take a closer look/use the form.

    Or you can implement the changes yourself:

    I simply overlaid the existing image with a duplicate:

    1.I took this image:

    And uploaded it to the form - placing it at the very top of the other fields:

    2. Added the clickable link to the image:

    3. Then styled it to overlay the other image by changing the following attributes (just make the changes on the existing rules to avoid breaking the form styles):

    /*Move the form section a little to the left - change the pixel value to:*/

    .form-section {
    padding-left: 265px;
    }

    /*Move the form sections a llittle towards the top-change the pixel value to:*/

    .form-all {
    padding-top: 724px !important;
    }

    /*Push the other fields a little towards the bottom - add this rule - it does not exist on your form*/

    .form-image {
    margin-bottom: 100px;
    }

    Please let us know if this helped.

  • Profile Image

    Answered by liamformedia on February 06, 2014 at 07:31 AM

    That looks great - thanks for your help.

    Sorry to be picky but would you mind moving the form fields to the left, as in your previous example?

    Many thanks

  • Profile Image
    JotForm Support

    Answered by TitusN on February 06, 2014 at 08:54 AM

    No Problem. :-)

    That's easy enough,

    Just delete this rule:

    .form-section {
    padding-left: 265px;
    }

    And add this one:

    #id_9 {
    padding-left: 302px;
    }

    Does that help?

    Please let us know.

  • Profile Image

    Answered by liamformedia on February 06, 2014 at 09:09 AM

    Thank you, that's great.

    Just a quick query, for some reason the form displays fine on Facebook (which is great) but on the form it doesnt show how it'll finally look, do you know why this is? http://www.jotform.com//?formID=40363404783958

    I'm wondering if it's just my browser (safari)...

  • Profile Image
    JotForm Support

    Answered by TitusN on February 06, 2014 at 09:24 AM

    Thanks for the feedback, and for sticking through this.

    Please share the facebook page URL on a new support request using this link

    We'll look out for it, make sure to reference this support thread: http://www.jotform.com/answers/325757

    Thanks again.