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

    Where should we add the code that changes the size of the feedback popup on our website page?

    Asked by rbroadfo on July 16, 2015 at 01:12 PM

    Can you please give more instructions where to put this code the webpage's html? I have added to the code already to change the size of the Feedback button. Here's what I tried at http://www.bigsmilescompany.com/rabbit.html:

    <!DOCTYPE html>

    <html>

    <head>

       <style type="text/css">

    .jotform-feedback-link {

         padding: 15px 40px !important;

    font-size: 30px !important;

     }   

       </style>

       </head>

       .jt-content

    {

       min-width: 700px !important;

       width: 700px !important;

       max-width:700px;

    }

     

    .jt-content .js-form-content

    {

        width:100% !important;

    }

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    popup form feedback form feedback popup CSS layout
  • Profile Image

    Answered by Ben on July 16, 2015 at 01:25 PM

    You were correct in adding the CSS:

    .jt-content
    {
       min-width: 700px !important;
       width: 700px !important;
       max-width:700px;
    }
    .jt-content .js-form-content
    {
        width:100% !important;
    }

    at the top of your page, but there are few issues with the way elements are formed.

    Within HTML page you can have 1 head and 1 body and head is always at the top.

    Now, the head element starts with <head> and finishes with </head> and everything in between is the meta keys, js and CSS resources.

    Now CSS, must be within the <style></style> elements.

    If you take a look at the CSS above, what happened is that your head and style elements started good, but instead of having <body> element start, there is now CSS code and another start of the <head> element.

    So the correct code would be:

    <!DOCTYPE html>
    <html>
      <head>

       <style type="text/css">
         .jotform-feedback-link {
           padding: 15px 40px !important;
           font-size: 30px !important;
         }
         .jt-content
         {
           min-width: 700px !important;
           width: 700px !important;
           max-width:700px;
         }
         .jt-content .js-form-content
         {
           width:100% !important;
         }
       </style>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     </head>

    Notice how the content type meta parameter is now within the head element and how the entire CSS code is within the style element.

    Now, since I see that your page has a lot more elements in its head section, what I would suggest is to just add the following code to your page's head:

       <style type="text/css">
         .jt-content
         {
           min-width: 700px !important;
           width: 700px !important;
           max-width:700px;
         }
         .jt-content .js-form-content
         {
           width:100% !important;
         }
       </style>

    That will be enough for you to have the CSS code apply its styles to your popup form.

    If there are any issues with that however, just let us know and we would be happy to check and assist in sorting it all out for you :)

  • Profile Image

    Answered by rbroadfo on July 17, 2015 at 09:13 AM

    Thank you!