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

    Help with this form CSS !

    Asked by xowii on November 23, 2011 at 02:02 PM

    Hello,

     

    I need some help styling this form: http://form.jotform.com/form/13263811181

    I am very close of what i need but still need to change the inside shadow and inside text color, i am ataching an image of what i need, please help me.

    THANKS

    Page URL:
    http://form.jotform.com/form/13263811181

    Screenshot
  • Profile Image

    Answered by xowii on November 23, 2011 at 02:18 PM

    I found 2 more problems.

    1.- when i see it on windows this have a orange border when i press a field. how to remove or change that color?

    (I am ataching a picture from windows IE)

     

    2.- The "mensaje" or text area field is very ugly, also the font is different on windows with IE. Can we improve this??

    (I am ataching a picture from windows IE)

  • Profile Image
    JotForm Support

    Answered by idarktech on November 23, 2011 at 02:49 PM

    Hi Xowii,

    To remove the orange border on focus, please inject custom css code below:

     

     

    input:focus{

    outline: none;

    }

     

    To change Textbox Hint Font Style, please use this css code:

     

     

    textarea {

    font-size:13px;

    font-family:Helvetica,sans-serif;

    }

     

    Feel free to contact us if you have further questions. Thank you so much!

  • Profile Image

    Answered by xowii on November 23, 2011 at 02:55 PM

    Hello, i still have the same problem....

    The same orange border, plus a different font and size for the text box on IE and Firefox!.

  • Profile Image
    JotForm Support

    Answered by idarktech on November 23, 2011 at 03:10 PM

    You forgot to add the close tag "}", I have fixed it and it's now working, please check. Thank you so much!

  • Profile Image

    Answered by xowii on November 23, 2011 at 03:15 PM

    Sorry, but is still not working :)

  • Profile Image
    JotForm Support

    Answered by idarktech on November 23, 2011 at 03:23 PM

    Hi, can you log-out to your account first before I could make any changes. It appears that you have overwritten my changes. Thanks.

  • Profile Image

    Answered by on November 23, 2011 at 03:25 PM

    Ok, just loged out!

  • Profile Image
    JotForm Support

    Answered by idarktech on November 23, 2011 at 03:30 PM

    Please check, it should work now. You may also try clearing your browsers cache if it shows differently.

    http://form.jotform.com/form/13263811181 

    And here's the problem:

     

    Let us know if you have further questions. Thank you so much!

  • Profile Image

    Answered by xowii on November 23, 2011 at 03:37 PM

    Hello, now the font on the textbox is rigth, but i test it from IE, Firefox removing the cache, also restarting both apps and still see the orange border. I am not loged in.

    Also the text from the text box, can be 2 or 3 pixels to the right to be the same from the above fields?

    And for ending this, i need also all fields to be at the same size... the text box is different size in other browsers.

     

    THANKS

  • Profile Image

    Answered by xowii on November 23, 2011 at 03:54 PM

    Is there a IE FIX to see the same CSS i see on Chrome or Safari for the box borders??

    On IE i cant see any CSS, all is square with no style...

     

    I hope you can help me with all this things... This is first time i really need Jotform Support since 2 years.

    Thank you very much!!

  • Profile Image

    Answered by xowii on November 23, 2011 at 04:00 PM

    Also, when i write something inside a text box instead of black i need this color on all box only when i write something: 51bbcf

    :)

  • Profile Image

    Answered by xowii on November 23, 2011 at 04:15 PM

    Hello, are you still there?

  • Profile Image
    JotForm Support

    Answered by idarktech on November 23, 2011 at 04:27 PM

    Also the text from the text box, can be 2 or 3 pixels to the right to be the same from the above fields?

    You can align it by adding spaces on the Hint Box. I have aligned it for you, please check.

    And for ending this, i need also all fields to be at the same size... the text box is different size in other browsers.

    I have fixed the sized, but I don't think it will display correctly on some other browsers. It's really hard to get cross browsers compatibility.

    On IE i cant see any CSS, all is square with no style...

    Need to make further research :)

     

    Also, when i write something inside a text box instead of black i need this color on all box only when i write something: 51bbcf

    Added. used input,textarea{color: 51bbcf;}


  • Profile Image

    Answered by xowii on November 23, 2011 at 04:30 PM

    I am still here, now this is what i have so far:

     

     

    1.- I cant make small the text border from my jotform panel.

    2.- There is a white underline under my button image

    3.- I need to adjust a little bit the distance between each text box, can you provide me the code to modify from my jotform panel?? 

  • Profile Image

    Answered by xowii on November 23, 2011 at 04:35 PM

    insert this: input,textarea{color: 51bbcf;} and didnt work...

  • Profile Image
    JotForm Support

    Answered by idarktech on November 23, 2011 at 05:14 PM

    I am using Chrome 14 and it shows perfectly:

     

    IE 9:

     

    Text Color on Textboxes should work now. Let me know if you have further questions.

  • Profile Image
    JotForm Support

    Answered by idarktech on November 23, 2011 at 05:26 PM

    Hello,

     

    1.- I cant make small the text border from my jotform panel.

    I don't get what you mean by this. Can you explain it further? Thanks.

    2.- There is a white underline under my button image

    FIXED. Please check.

    3.- I need to adjust a little bit the distance between each text box, can you provide me the code to modify from my jotform panel?? 

    You don't need a code, just follow follow my screen guide below:

     

    Update: Textbox size is now the same on FF, Chrome and IE. It's now displaying correctly on my part. Please check.

  • Profile Image

    Answered by xowii on November 24, 2011 at 07:56 AM

    Hello, Good Morning.

    We still have some conflicts on the form....

    This is the REAL form, the form need to look like this, same size, same everithing.

     

    Just check it and the problems are still there... for example:

     

    On FIREFOX we still see the orange border, but not just that also now always the inside text is calypso

    And

     

    On Chrome and Safari looks nice..

     

    On Windows still is a orange border on my custom submit button:

     

    Also all the form fields must be size 39, but when i want to make smaller the text area at the bottom or ANY TEXT FIELD is not working... 

     

    Please help!

  • Profile Image

    Answered by xowii on November 24, 2011 at 08:06 AM

    Also my question spacing is already in 0 and need to have it like the REAL picture from above, a little bit closer, i think something like -2 or -3 will work but cant make it from my jotform panel... seems like -2 is 2 for jotform.

  • Profile Image

    Answered by xowii on November 24, 2011 at 08:11 AM

    And forgot to tell you, on IE the orange border is still there when i click the text area to write something!

    Anyways i maded some changes on the form, please keep my last changes.

  • Profile Image

    Answered by xowii on November 24, 2011 at 09:10 AM

    hello?? is someone there?

  • Profile Image
    JotForm Support

    Answered by NeilVicente on November 24, 2011 at 09:17 AM

    Hi,

    This form - http://www.jotform.com/form/13274103119 is what I came up with after trying to mimic the image you have posted.

    The changes I applied are the following:

    - Changed the form's theme from Pastel to Default to remove preset styling (like the orange border on textboxes and the submit button)

    - Adjusted the width of text inputs via CSS (width: 295). Note that when you set the width of text inputs using CSS, changing the size property via the toolbar will not affect its width.

    - Removed the line "color:#51bbcf;" in your CSS code. This is what causes the "Calypso Blue" color for your text boxes.

    - Changed question spacing to 2, then added custom CSS to add more spacing to the submit button( #id_7 {padding-top: 20px;} )

    Feel free to import the cloned form to your account or just apply the changes I described above. Click here for the full CSS code for the newly cloned form.


    Neil

  • Profile Image

    Answered by xowii on November 24, 2011 at 09:33 AM

    Thanks!!!

    Now is working finally... what do you recommend to a CSS site embedd this form like an IFRAME or complete code??

  • Profile Image
    JotForm Support

    Answered by NeilVicente on November 24, 2011 at 09:37 AM

    To retain the form's styling and to avoid conflicts with your site's CSS and JavaScript codes, kindly use iFrame method to embed the form.

    To get your form's iframe codes:

    1.  Go to Setup & Embed tab
    2.  Click Embed Form
    3.  Click iFrame



    4.  Copy the codes provided in the succeeding screen