Insert image in form header

  • ipbr21054
    Asked on January 29, 2019 at 10:12 PM

    Hi,

    Here is the form in question https://form.jotformeu.com/form/72754230984361

    Is it possible & if so please advise on putting an image in the top of my form.
    In my example photo supplied it would be placed below where you see " THE REMOTE DOCTOR"




    Jotform Thread 1716906 Screenshot
  • furkanberber
    Replied on January 30, 2019 at 7:45 AM

    You can do that with custom CSS codes. Click "form designer" after that, select CSS and add the code I put below.

    .form-header:after {

        content: url('Your images url address');

    }

    Please feel free to contact us if you need any further assistance.

  • ipbr21054
    Replied on January 30, 2019 at 9:46 AM

    Thanks,

    I have done that but i see the other contents on the form now move to the left.

    I have supplied 2 screenshots for you.

    Original form where all text & text boxes are central to form.

    The other is a clone of the original form & the new photo added.


    Please can you advise how i use the new photo inserted & the text & text boxes centered like before as per original

  • ipbr21054
    Replied on January 30, 2019 at 9:46 AM

    Insert image in form header Image 10

  • ipbr21054
    Replied on January 30, 2019 at 9:50 AM

    I am unable to show other photo as you site says its spam ?


  • BJoanna
    Replied on January 30, 2019 at 12:16 PM

    I cloned your form and added the CSS code furkanberber provided and as far as I can see the other content was not moved to the left. 

    You can also add an image to your form using the Image field. The Header field also has an image option, that can be positioned on left or right.

    1548868518image Screenshot 10

    Here is my demo form - https://form.jotform.com/90294600314954

    Feel free to test it and clone it

  • ipbr21054
    Replied on January 30, 2019 at 5:19 PM

    Thanks,that was my fault.


    I have now added the correct photo to my 3 forms.

    Two of them work fine but 1 will only show the image when building it & not in preview or on the internet even when i used the same code for all 3 of them 

    This is the form,    https://form.jotformeu.com/form/72754230984361

    See screen shots below


    Insert image in form header Image 10


    Insert image in form header Image 21

  • Kevin Support Team Lead
    Replied on January 30, 2019 at 8:27 PM

    There is a syntax error on your code, you need to remove a piece of code, here it's highlighted: 

    1548897988screenshot 01 Screenshot 10

    I did that on this cloned form of yours and it worked: https://form.jotform.com/90297966816979 

    Thanks. 

  • ipbr21054
    Replied on January 31, 2019 at 6:12 AM

    All done thanks