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 add the word Close next to the X, in the title bar, for the c

    Asked by mikevila on July 08, 2012 at 12:47 PM

    How can I add the word Close next to the X, in the title bar, for the computer challenged customers please?



    This is a re-post of a comment on How to Stylize Feedback/Lightbox Title?

  • Profile Image

    Answered by jeanettebmz on July 08, 2012 at 02:50 PM

    You would need to  insert these codes in your webpage's source preferably above </body>

    <style type="text/css">
    div div div table tbody tr td {
        text-align: right;        
        }
    </style>

    You can see the guide to add more styles to the fonts


    Then , on your lightbox code, add the word "Close", as shown below:

     

    So the code should look like this:

    <script src="//jotform.co/min/g=feedback2" type="text/javascript">
    new JotformFeedback({
    formId:'21316182084851',
    base:'http://jotform.co/',
    windowTitle:'close',
    background:'#FFA500',
    fontColor:'#FFFFFF',
    type:false,
    height:500,
    width:700
    });
    </script>
    <a class="lightbox-21316182084851" style="cursor:pointer;color:blue;text-decoration:underline;">CONTACT US</a>

     

    Best regards

    Jeanette

  • Profile Image

    Answered by pinoytech on July 08, 2012 at 04:36 PM

    Hi,

    Can you please take a look at here if this is what you want to achieved in your lighbox. If yes, let me know so I can provide you further details.

    Thank you!

  • Profile Image

    Answered by mikevila on July 08, 2012 at 05:43 PM

    Thank you both for responding, and YES pinoytech that's exactly what I want to create.

    And jeanettebmz, by looking at your code I'm curious if this is also going to make complete form title go to the right as well? I need the form title to the left, and 'Close' to the right like the picture that pinoytech uploaded.

  • Profile Image

    Answered by jeanettebmz on July 08, 2012 at 06:02 PM

    The code is an example of one of my test forms, but yes, if you add text-align property into the CSS code and  set it to the right, it should go to the right.

    Then all you need to do is change the windows title.

    Let's wait for my colleague Pinoytech, to see if he can share his code with you

    Cheers!



  • Profile Image

    Answered by pinoytech on July 09, 2012 at 10:25 AM

    Hi,

    Sorry for the late response. Regarding on my reponse above, I just added lots of &nbsp tag to create space from the first text as what you've see here.

    Sample &nbsp;&nbsp;&nbsp;&nbsp; Close

    Hope you find this helpful and if you need further assistance, feel free to contact us again anytime.

    Thank you!

  • Profile Image

    Answered by mikevila on July 09, 2012 at 01:34 PM

    Yes, pinoytech, it worked! The code is long, but it works. You would think there would be an easier way, I had to enter: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Close'

    Thanks again, both of you :-)


  • Profile Image

    Answered by pinoytech on July 09, 2012 at 01:40 PM

    Good to hear that! If you need further assistance, feel free to contact us again anytime.

    Thank you for using JotForm!

  • Profile Image
    JotForm Support

    Answered by NeilVicente on July 09, 2012 at 04:12 PM

    @mikevila

    Alternatively, you may insert this css code to the page where the form is embedded to add the word "CLOSE" below the X button:

    <style type="text/css">
    div div div table tbody tr td + td:after
    {
     content: "CLOSE";
    }
    div div div table tbody tr td + td
    {
    font-size: 10px;
    color: #fff !important;
    text-shadow: black 0.1em 0.1em 0.2em;
    font-weight:bold;
    }
    </style>

    Note:

    To have it displayed above the X button, simply change "after" with "before".