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

    Can't make form field narrow enough

    Asked by Durianwriter on February 03, 2014 at 05:09 PM

    Hi,

    I'm trying to create an opt-in form to place in my 275 px wide side bar. I can change the width of the form, but the enter email box remains the same, jutting out into empty space on the right side. Changing the label width does nothing. How can I make this box narrower so that it fits tidily in my sidebar?

     

    Thanks!

    Page URL:
    www.yearofthedurian.com

    make form form field email label label width create
  • Profile Image
    JotForm Support

    Answered by jonathan on February 03, 2014 at 07:00 PM

    Hi,

    Please try add this CSS code to your existing codes

    #input_4{

    height: 20px !important;
    width: 200px !important;

    }

    You can adust the 200px width number to your preference.

    Related guide -How-to-Inject-Custom-CSS-Codes

    Please inform us if you need further assistance.

    Thanks!

  • Profile Image

    Answered by Durianwriter on February 03, 2014 at 09:36 PM

    Thanks! That seems to have fixed it. Now I can't get the button to change to a different color. Do you have any CSS for that?

  • Profile Image
    JotForm Support

    Answered by jonathan on February 03, 2014 at 10:45 PM

    Hi,

    You can also just try the button style gallery which is found on top when you are designing your form

    Select the submit button, and look for it on the top toolbar

     

     

    if you still prefer CSS, then try this code

     

    .form-submit-button {

    background: #D53E68 !important;

    }

    Its the background color. Just change it to the color you want.

     

    Thanks.

  • Profile Image

    Answered by Durianwriter on February 04, 2014 at 01:04 AM

    THe button style gallery hasn't been working. I've tried various things and I can't get the button to change (even reverted to default theme). Thanks for the CSS.

  • Profile Image

    Answered by Durianwriter on February 04, 2014 at 01:19 AM

    One more thing  - I've copied the color (#cc0a0a) that I want for my background. It looks good when I add this color as a background, but when I preview it it adds a highlighted color box around the form that is a different color. I'm attaching a link to it live on my site, but the color is wrong. http://www.yearofthedurian.com/

  • Profile Image

    Answered by pinoytech on February 04, 2014 at 02:16 AM

    Hi,

    Can you please take a look at the image bellow if this the highlight color you are referring?

    If so, find this in your custom css and remove it in order to fix the issue.

    .form-all {

    background-color: #d84632;

    border: 1px solid #FF0070;

    border-radius: 10px;

    }

    If you need further assistance, feel free to contact us again at anytime.

  • Profile Image

    Answered by pinoytech on February 04, 2014 at 02:29 AM

    Anyways, can you please confirm if this is something you want to achieve in your form?

    If yes, remove your current custom css and replace it with this codes:

    #text_1 {

    font-family: "adelle","droid serif",georgia,serif;

    font-weight: 700;

    font-size: 24px;

    line-height: 1.2em;

    -webkit-font-smoothing: antialiased;

    color: #dff1f3;

    text-align: center;

    }#text_3 {

    color: #dff1f3;

    text-align: center;

    font-family: "adelle","droid serif",georgia,serif;

    line-height: 20px;

    font-size: 18px;

    margin-top: -25px;

    }

    .form-label-left {

    display: none;

    }

    .form-all {

    background: #CC0A0A !important;

    border: 1px solid #FF0070;

    border-radius: 10px;

    }

    .form-line-error {

    background: transparent;

    }

    .form-line-error .form-error-message {

    display: none;

    }

    .form-textbox {

    border-radius: 5px;

    height: 32px;

    width: 245px;

    }

    .form-textbox:focus {

    background-color: #fafaea;

    }

    .form-submit-button {

    border: 1px solid #d5ab3e !important;

    border-radius: 3px!important;

    font-weight: bold!important;

    height: 45px !important;

    width: 180px !important;

    background: #d5ab3e !important;

    font-size: 16px;

    text-shadow: none;

    box-shadow: none;

    color: #fff;

    }

    .form-submit-button:hover {

    border: 1px solid #000 !important;

    border-radius: 3px!important;

    font-weight: bold!important;

    height: 45px !important;

    width: 180px !important;

    background: #000 !important;

    font-size: 16px;

    text-shadow: none;

    box-shadow: none;

    color: #fff;

    }

    .form-button-error {

    color: white;

    text-align: center;

    }

    #input_4 {

    height: 20px !important;

    width: 200px !important;

    }

    .form-submit-button {

    border: 1px solid #09f !important;

    background-color: #09f !important;

    width: 205px !important;

    }

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

  • Profile Image

    Answered by Durianwriter on February 04, 2014 at 04:34 AM

    Yes that fixed it! Thanks so much! You're awesome ;)

  • Profile Image

    Answered by Durianwriter on February 04, 2014 at 05:18 AM

    Very last thing - now I can't change the text color on the submit button. I just the text to be black, #000.

  • Profile Image

    Answered by Durianwriter on February 04, 2014 at 05:40 AM

    I think I got it, some problem with the code so I just deleted it all and started again.