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

    Rounding text area corners & changing color of border/outline of text boxes and text area

    Asked by TonerCarAOLcom on July 26, 2014 at 05:07 PM

    What CSS do I need to inject to round the corners of the text area box in form # 4206673780615? What CSS do I need to inject to change the color of the border/outline of all three text boxes and the text area to #006600 in form # 4206673780615?

    Thanks so much for your help

     

    Peter

    text boxes round corner
  • Profile Image
    JotForm Support

    Answered by jonathan on July 26, 2014 at 06:02 PM

    Hi Peter,

    Please refer to this user guide -Customize-your-Form-using-Custom-CSS-Codes

    At the very last part of the user guide, you will see the CSS rule to use for rounded corner

    Example form:

    http://www.jotform.com/form/13634042565?

    Rounding Text & Drop Down Corners

     
    .form-all input,select {
    border: 1px solid #b7bbbd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 4px;
    width: 140px;
    }

     

    Hope this help. Inform us if you need further assistance.

    Thanks!

     

  • Profile Image

    Answered by TonerCarAOLcom on July 26, 2014 at 10:32 PM

    Hi Jonathan,

    Thanks for your prompt reply. I tried copying and injecting your recommended code. The only effect it had was to change the background to black. I did change part of the code to #006600 because I want the text box/text area outline (border) to be 006600 green. That had no effect, either.

    There are four details I need to "fix" on this form and no CSS I inject seems to make any difference. First, I need rounded corners on the text area. Second, I need the outline (border) of all the text boxes/text areas in the form to be 006600 green. Third, when you attempt to put data into the text boxes the outline/border changes to orange. I need it to change to 006600 green. Lastly, the form MUST be transparent. When I attempt change the background color to transparent by inputting 'transparent' into the color drop-down; at about  the "p" , it automatically changes to #0000 black. What do I do?

    If you wish to view the form, the number is 4206673780615

    Thanks for your kind assistance.

     

    Peter

     

     

     

  • Profile Image
    JotForm Support

    Answered by jonathan on July 26, 2014 at 11:51 PM

    Hi Peter,

    Let me create this on a cloned form of your form http://www.jotform.us/form/42066737806157

    I will get back to you quickly when I have the form so you can check

    Thanks.

     

  • Profile Image
    JotForm Support

    Answered by jonathan on July 27, 2014 at 01:23 AM

    Hi Peter,

    Can you please check this form http://www.jotform.me/form/42068805210447  if it matches your requirement. 

    You can clone the form should you want to check what I did.

    Follow this user guide -How-to-Clone-an-Existing-Form-from-a-URL

    These were the CSS codes I used

     

    .form-textarea input,select,textarea {

    border: 1px solid #006600 !important;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    padding:4px;

    }

     

    .form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input {

    border: 1px solid #006600;

    -moz-box-shadow: 0 1px 2px #006600 inset;

    -webkit-box-shadow: 0 1px 2px #006600 inset;

    box-shadow: 0 1px 2px #006600 inset;

    }

     

    .form-line-error input:not(#coupon-input), .form-line-error textarea {

    border: 1px solid #006600;

    -moz-box-shadow: 0 0 3px #006600;

    -webkit-box-shadow: 0 0 3px #006600;

    box-shadow: 0 0 3px #006600;

    }

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

    display: none !important;

    }

     

    .form-line-error {

    background: transparent !important;

    color: #006600 !important;

    }

    or copy from here http://pastie.org/9424018

     

    As for the transparent background I did it by just typing the word #Transparent in the background property of the form style. (see screen below)

     

    Hope this help. Inform us if you need further assistance.

    Thanks!

     

     

     

     

     

     

  • Profile Image

    Answered by TonerCarAOLcom on July 27, 2014 at 02:11 AM

    Jonathan,

    You're fantastic! Everything works! I'll remember how you encoded "transparent" for future purposes. Could I please prevail on you for two (last) small details: (1) how can we change the asterisks back to #006600 green and, (2) how can we change "first name" and "last name" text to #006600 green. If we can make these last two details, the form would be perfect.

    Thanks so much for all your help and thanks for the quick support.

     

    Pete

  • Profile Image
    JotForm Support

    Answered by jonathan on July 27, 2014 at 02:24 AM

    Hi Peter,

    Please check the form again http://www.jotform.me/form/42068805210447

    This is the new CSS codes http://pastie.org/9424077

    For the asterisk, I added this CSS code

    .form-required {

    color: #006600;

    }

    For the textbox names I added the color code in the existing code

    .form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input {

    border: 1px solid #006600;

    -moz-box-shadow: 0 1px 2px #006600 inset;

    -webkit-box-shadow: 0 1px 2px #006600 inset;

    box-shadow: 0 1px 2px #006600 inset;

    color: #006600 !important;

    }

     

    Inform us if you need further assistance.

    Thanks!

     

     

     

     

     

  • Profile Image

    Answered by TonerCarAOLcom on July 27, 2014 at 02:37 AM

    Jonathan,

    We're almost there! The asterisks look great. "First name" & "Last name" are still gray. though. Any suggestions?

    Thanks so much for seeing this through. I will probably have this website uploaded to the Internet tomorrow. Please feel free to visit it and see how your efforts have contributed. The URL is Ink-A-Roo.com The site is very minimalist and details make a big difference because of that. I hope I am not irritating you.

    Thanks again for your help

    Pete

     

     

  • Profile Image
    JotForm Support

    Answered by jonathan on July 27, 2014 at 03:43 AM

    Hi Pete,

    You probably need to clear your browser's cache to see the updates.

    I checked again on my browser and I can see the form http://www.jotform.me/form/42068805210447  text box have the greener text color

     

     

    Please inform us if still not working.

    Thanks.

     

     

  • Profile Image

    Answered by TonerCarAOLcom on July 27, 2014 at 10:07 AM

    Hey Jonathan,

    Thanks for hanging in there. In your example, do you see the text, "First Name", the text "Last Name" and in the e-mail text box, "ex: myname@example.com" are gray? Any way we can change those to #006600 green? I opened a preview of the website with this form imbedded in it in IE and the "ex: myname@example.com" showed #006600 green but not "First Name" and "Last Name". Nothing was green in Chrome. Any suggestions?

    Thanks again for all your help

    Pete 

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on July 27, 2014 at 03:36 PM

    You definitely need to reset your Chrome. I just loaded the form with all in green.

  • Profile Image

    Answered by TonerCarAOLcom on July 27, 2014 at 04:26 PM

    Hi Jeanette,

    Thanks for all your patience. That form looks magnificent! The website should be up and running on the Internet this evening after 9:00 Pacific time. If you are inclined, visit it at www.Ink-A-Roo.com and see what all your "hand holding" has produced.

    Thanks again to all of the JotForm support team

    Peter

     

  • Profile Image
    JotForm Support

    Answered by Kiran on July 27, 2014 at 05:19 PM

    We are glad to see that you made a form customized to fit into your requirements. Sure, we'll definitely have a look at your website once it is up and running.

    Please do not hesitate to get back to us if you need any further assistance. We are happy to assist you. Thank you for using JotForm.