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 can I customize the look of a lightbox link?

    Asked by EarCare on August 08, 2012 at 12:30 PM

    I was wondering if there was a way to customize the look of a lightbox link, I AM USING Muse so that might be handicapping me

    I like the look of the button when you export a form with a feedback button but I would like to be able to have the button in the page - not at the edges of the browser window.

    Any suggestions?

  • Profile Image
    JotForm Support

    Answered by NeilVicente on August 08, 2012 at 07:53 PM

    To mimic the feedback button's appearance for your lightbox link:

    1.  Get your form's lightbox embed codes

    2.  Delete the style declaration (as highlighted below)

    <a class="lightbox-xxxxxxxxxxx" style="cursor:pointer;color:blue;text-decoration:underline;">

    3.  Replace it with the following codes:

    padding: 7px 15px; font-family: verdana; font-size: 15px; color: rgb(255, 255, 255); background: none repeat scroll 0% 0% rgb(245, 146, 2); z-index: 999; cursor: pointer; text-align: center; text-decoration: none; border-radius: 5px 5px 5px 5px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); right: 35px; text-shadow: none;

    So it becomes:

    <a class="lightbox-xxxxxxxxxxx" style="padding: 7px 15px; font-family: verdana; font-size: 15px; color: rgb(255, 255, 255); background: none repeat scroll 0% 0% rgb(245, 146, 2); z-index: 999; cursor: pointer; text-align: center; text-decoration: none; border-radius: 5px 5px 5px 5px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); right: 35px; text-shadow: none;">

    4.  Embed the finalized codes

    Note that I have modified the look a bit (added rounded corners to the bottom) to make it suitable for a normal, non-sticky button.

    Hope this helps.

  • Profile Image

    Answered by EarCare on August 09, 2012 at 04:09 PM
    Awesome!
    I cant wait to try it
    -Alan