How can I change the colour, size and type of the title hyperlink for a form to be displayed as a lightbox?

  • Bonner
    Asked on January 12, 2016 at 7:06 AM

    This is the relevant code as supplied by jotform:

                windowTitle: 'Contact Steve Bonner',
                background: '#FFA500',
                fontColor: '#FFFFFF',
                type: 'false',
                height: 500,
                width: 700,
                openOnLoad: false

    I've included a snapshot (very bottom of panel on the left) - as you can see, the text is Times rather than Verdana, black when it should be white, and the active colour is yellow. I've crawled all over the 'edit' facility and can't find anywhere, or anything that helps with changing this - because it isn't IN the form if it can be changed it's far from obvious (to me anyway) Would be grateful for any help - much obliged.

    Jotform Thread 742302 Screenshot
  • Charlie
    Replied on January 12, 2016 at 11:50 AM

    Could you please share us the website link to where the form is embedded?

    If you are using a lightbox embed code, you can easily add a inline CSS styling on the <a> element.

    Here's a sample lightbox embed code:

        <script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript">

          var JFL_60114272402945 = new JotformFeedback({

            formId: '60114272402945',

            base: 'https://form.jotform.com/',

            windowTitle: 'Contact Steve Bonner',

            background: '#FFA500',

            fontColor: '#FFFFFF',

            type: 'false',

            height: 500,

            width: 700,

            openOnLoad: false

          });

        </script>

          <a class="btn lightbox-60114272402945" style="margin-top: 16px">

            Clone of Contact Steve Bonner

          </a>

     

    You can edit or add further styling on the <a> element. Here's an example:

    <a class="btn lightbox-60114272402945" style="margin-top: 16px; color: white; font-family: 'Verdana', 'Geneva', sans-serif;">

            Clone of Contact Steve Bonner

          </a>

    Noticed that the text highlighted on yellow has the styling for the font color of "white" and a font-family of "Verdana". 

    You can add further styling on it using custom inline CSS codes.

    Do let us know if you need further assistance on this.