How can I add two different logos (side by side, one aligned left and one aligned right) to the top of a form?

  • AACOffice
    Asked on November 28, 2019 at 5:52 PM
  • John Support Team Lead
    Replied on November 28, 2019 at 6:06 PM

    Unfortunately, there is no option to upload multiple logos to the form.

    If you want to have 2 or more images, you may use the Text Field as an alternative and placed it in the Header.

    This field allows you to use HTML/CSS codes so you'll have more options and flexibility in adding multiple logos/images.

    157498231815160576032017 02 18 19 Screenshot 10

    You may also use two Image fields if you like:

    1574982362151605768005 26 2017 149573799 Screenshot 21

    Please try that and let us know how it goes.

  • AACOffice
    Replied on November 29, 2019 at 12:44 PM

    Thanks for your reply! I do not have experience with the use of  HTML/CSS codes so I couldn't try this option. 

    I tried two image fields and this allows me to put both logos on the page but the field itself is quite a bit larger than the logo so it takes a lot of room to have the two images and they still appear quite far apart. 

    https://form.jotform.com/93316671172255

    Are you able to try the HMTL/CSS code option? Would there be a cost? If so, please quote. Thanks :)

  • Victoria_K
    Replied on November 29, 2019 at 1:49 PM

    Hi, 

    I will check for possible CSS codes for you, this is free of charge :) 

    I will let you know once I have some results. 

  • Victoria_K
    Replied on November 29, 2019 at 2:08 PM

    As far as I understand, images should be displayed similar to this:

    1575054451rvawb Screenshot 10

    If this is correct, please try injecting the following CSS to your form:

    .form-all:after {

      background-image: url(https://www.jotform.com/uploads/AACOffice/form_files/CAfLN%20Logo.5de153fb3f38e5.99902527.gif);

      display: inline-block;

      height: 140px;

      position: absolute;

      background-size: 200px 140px;

      background-repeat: no-repeat;

      width: 100%;

      top: -150px;

      right: 0;

      background-position: top right;

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Let us know if you need more help. 

  • AACOffice
    Replied on November 29, 2019 at 2:43 PM

    Thank you Victoria! That worked. I appreciate the solution and the instructions to do it!