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 to place different images on header boxes

    Asked by Kers101 on November 14, 2014 at 10:50 PM

    http://www.jotform.com/?formID=43144948593263

    Now I want to use three different graphics  for each of the 3 header boxes in the form. Instead, the one image I import  goes into every box.  Could not find any options to change this but  I tried using CSS {display:none;} with no luck

    header css header images
  • Profile Image

    Answered by Ben on November 15, 2014 at 04:49 AM

    Hi,

    I see that you have added this code to show the image in the header

    .form-header-group {
        background-image: url("http://www.jotform.com/uploads/Kers101/form_files/gordbuscard2.jpg");
    }

    Now it is applied to all since that is set by the class rule above (the .form-header-group). Whenever you see a string of text following the dot that is class and that means that it will be applied to multiple fields.

    Now what you need is the ID of the field. They are always prefixed by #.

    Header 1:

     

    #cid_1 > .form-header-group {
        background-image: url("http://www.jotform.com/uploads/Kers101/form_files/gordbuscard2.jpg");
    }

    Header 2:

     

    #cid_7 > .form-header-group {
        background-image: url("http://www.jotform.com/uploads/Kers101/form_files/gordbuscard2.jpg");
    }

    Header 3:

     

    #cid_31 > .form-header-group {
        background-image: url("http://www.jotform.com/uploads/Kers101/form_files/gordbuscard2.jpg");
    }

    Header 4:

    #cid_39 > .form-header-group {
        background-image: url("http://www.jotform.com/uploads/Kers101/form_files/gordbuscard2.jpg");
    }

    Since you have already applied style to the form-header-group fields, I have just given it a more direction by saying style .form-header-group that is of child of header with ID cid_39 (for example).

    This way you can style each of them differently, but you would need to change the photo that you have by changing the URL path to the image (I have made it bold).

    I believe that you know how to inject the CSS code above, but will add a link for it here just in case Inject Custom CSS Codes.

    Do let us know if you have any further questions.

    Best Regards,
    Ben

  • Profile Image

    Answered by Kers101 on November 15, 2014 at 10:19 AM

    Your program doesn't seem to recognize the gordbuscard4.jpg after I changed the name of it. Keeps loading the old file. Also there no way to delete files from JF that I don't want.  Entered the CSS changes for the first header nothing happened though.

    http://www.jotform.com/?formID=43144948593263

  • Profile Image

    Answered by Kers101 on November 15, 2014 at 11:00 AM

    I got it now thanks  I can import the images and they appear in the header boxes differently. Things are moving along now.....

  • Profile Image

    Answered by Kers101 on November 15, 2014 at 12:33 PM

    I thought I had it but this is confusing

    I've uploaded three header files:

    gordbuscard3.jpg

    gordbuscard4.jpg

    gordbuscard5.jpg.

    I guess the CSS is OK for these

    The only one that showing is gordbuscard5.jpg on all three panels...

    Please check fo rme...thanks

    http://www.jotform.com/?formID=43144948593263

     

  • Profile Image

    Answered by Kers101 on November 15, 2014 at 04:44 PM

    In the CSS there is something wrong with two images because the url is black instead of blue like the other two.  I don't where the error is.

  • Profile Image

    Answered by Kers101 on November 15, 2014 at 08:14 PM

    http://www.jotform.com/?formID=43144948593263#design

    Persistence has paid off.  I was able employ 4 header images successfully. I realized it's important to use the correct available ID's

     

  • Profile Image
    JotForm Support

    Answered by jonathan on November 15, 2014 at 10:34 PM

    Hi,

    We apologize for the delays.

    I checked your jotform http://www.jotform.ca/form/43144948593263 and I can see now that the individual header images were applied according to your requirements.

     

     

    Contact us again anytime for any assistance you need.

    Thanks.

     

  • Profile Image

    Answered by Kers101 on November 16, 2014 at 09:56 AM

    Thanks for looking at the page images ...As time goes by I may want to update these images.  If I  keep the updates with the same name  how do I refresh the images on my form?

  • Profile Image
    JotForm Support

    Answered by BDAVID on November 16, 2014 at 12:16 PM

    In that if it is the same image URL, it will be automatically updated in our end, if not, you will need to remove it, and paste the new one.

  • Profile Image

    Answered by Kers101 on November 16, 2014 at 12:42 PM

    All the 4 images  were created the same size.  It would be nice to have them all display like the top one.   The second one down is too high. Would they be the same if I printed the copy on the second image myself?  I haven't changed the path to the images and still don't see any update.  Do you mean paste it in the form itself?

     

    http://www.jotform.com/?formID=43144948593263#design

  • Profile Image

    Answered by Kers101 on November 16, 2014 at 12:51 PM

    I used this to establish he height of the graphics. Seems to work OK

    .form-header {
        color : #ffffff;
        height:40px;
    }

  • Profile Image
    JotForm Support

    Answered by Welvin on November 16, 2014 at 03:03 PM

    Yes, your custom CSS codes worked. 

    Would they be the same if I printed the copy on the second image myself?

    -I think you would need to change it manually. 

     

    I haven't changed the path to the images and still don't see any update.  Do you mean paste it in the form itself?

    -I think what David meant is to change the image URL in the form if you have a different image URL with a different size.

    Let us know if you need any further assistance.

    Thank you!