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 to style a Drop Down arrow on a form

    Asked by xowii on October 24, 2012 at 12:12 PM

    This is our form:

    https://dl.dropbox.com/u/12558375/Jotform/form.png

     

    We need to make look nicer the market area please, is very old and ugly that... Is the default CSS

    Need something more like the rest of the form.

     

    This is the form name: 

    https://dl.dropbox.com/u/12558375/Jotform/form2.png

    Page URL:
    http://www.e-mail.cl/newsletter

    custom css css injection dropdown arrow
  • Profile Image
    JotForm Support

    Answered by EduardoMendez on October 24, 2012 at 12:29 PM

    Hi there,

    We would be glad to help!

    However, do you have a sample of the look and feel you are trying to accomplish?  

    Thanks!  We'll wait for your response!

  • Profile Image

    Answered by xowii on October 24, 2012 at 12:32 PM

    Thanks for your answer, we need the same look and feel of the other fields.

    But when you click this field need to show the options like now, understand?

  • Profile Image

    Answered by jeanettebmz on October 24, 2012 at 01:20 PM

    Saludos, veo que hablas español. Puedes explicarte mejor cómo necesitas el formulario? dices que quieres algo que se vea como el resto de los formualrios, cuales son éstos? puedes indicárnoslo?

    También dices que necesitas que al darle clic en un campo, muestre opciones, esto se logra fácilmente con conditional logics.

    Espero tus comentarios

  • Profile Image

    Answered by xowii on October 24, 2012 at 01:21 PM

    Hola, yo ya tengo ese formulario, quiero mantener ese campo con opciones de (si o no) como esta ahora, pero con el estilo de los otros campos del mismo formulario.

    ----

    Need help with CSS in form (Private) Asked by xowii on October 24, 2012

    This is our form:

    https://dl.dropbox.com/u/12558375/Jotform/form.png

     

    We need to make look nicer the market area please, is very old and ugly that... Is the default CSS

    Need something more like the rest of the form.

     

    This is the form name: 

    https://dl.dropbox.com/u/12558375/Jotform/form2.png

    Page URL:
    http://www.e-mail.cl/newsletter 
  • Profile Image

    Answered by jeanettebmz on October 24, 2012 at 03:33 PM

    Hola por favor, introduzca el código del color (puse algo parecido a su formulario ) en Custom CSS

    select, option {
    color: #8DD9C5!important;
    }

  • Profile Image

    Answered by xowii on October 24, 2012 at 03:36 PM

    You only changed the text color i was hopping to see the same box field with a nice css

    and same color than the other fields

  • Profile Image

    Answered by jeanettebmz on October 24, 2012 at 04:12 PM

    That was only a suggestion, in order for you to get the desired style, you would need to add the element id of the dropdown into the CSS current

    Find below the complete code, I have added the right color code at the botom

    #input_37.form-dropdown,.form-textbox, .form-textarea,.form-radio-other-input, .form-captcha input, .form-list,  {
    width: 266px;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px; /* test */
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #fff;
    border: none;
    padding: 11px 11px;
    }input, textarea {
    color: #51bbcf;
    }.form-pagebreak {filter:none;}input::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #949494;
    }.form-header-group, .form-collapse-table, .form-pagebreak{
    background: none;
    color: #c6c6c6}
    input, textarea {
    outline: 0;
    font-size:13px;font-family:Helvetica,sans-serif;}input:focus, textarea:focus{
    outline: none;
    }textarea{
    width:266px;
    max-width:266px;#id_7 {
    padding-top: 20px;
    }input{
    outline: none;
    }
    select,option {
    color: #51bbcf;}

  • Profile Image

    Answered by xowii on October 24, 2012 at 04:15 PM

    This is our form now: ok?

    https://dl.dropbox.com/u/12558375/Jotform/form.png

     

    This is what we want, your help to customize the CSS and make the form to look like this:

    https://dl.dropbox.com/u/12558375/Jotform/new%20form.png

     

    And when you click the field should be like this: 

    https://dl.dropbox.com/u/12558375/Jotform/form2.jpeg

  • Profile Image

    Answered by jeanettebmz on October 24, 2012 at 04:36 PM

    This is your current form ,  and according to your request , all you need is to have the dropdown menu identical to the other fields, correct? 

    This is my test form , on that form , the dropdown menu text and style looks exactly as the other fields. So whenever you embed it, it should show the look the desired effect, as I see your page gets another background.

    Feel free to clone it and let me know if you need further assistance

  • Profile Image

    Answered by xowii on October 24, 2012 at 04:41 PM

    Sorry, but this:

    https://dl.dropbox.com/u/12558375/Jotform/new%20form%202.png

     

    Is not the same than this: (yours)

    https://dl.dropbox.com/u/12558375/Jotform/eee.png

  • Profile Image

    Answered by jeanettebmz on October 24, 2012 at 04:50 PM

    What you see is what I got from your original form E-MAIL.CL 4.0 popup cotizar (newsletter)

    Perhaps, I would need to see the source code of that one form shown on that screenshot

  • Profile Image

    Answered by jeanettebmz on October 24, 2012 at 04:51 PM

    As I understand you want gray letters rather than blue etters

  • Profile Image

    Answered by jeanettebmz on October 24, 2012 at 04:53 PM

    Just let me know where should I inspect the form you are showing (which URL) in order to find out if the form is the same E-MAIL.CL 4.0 popup cotizar (newsletter) or another one into your account.  That seems most likely the confusion here

  • Profile Image

    Answered by xowii on October 24, 2012 at 04:54 PM

    jeanette I dont want to be disrespectful, but can you please call to your manager or someone with more experience on styling forms?

    I really feel that you dont understand, and this SMALL thing is taking me FOREVER

     

    Thanks 

  • Profile Image

    Answered by jeanettebmz on October 24, 2012 at 05:06 PM

    I am just trying to help, and incidentally I'm the support team manager. The next level is Mr. Aytekin, the CEO.

    This doesn't mean I'm the most technically skilled  one, I'm here to help in whatever I can, and take care not only of technical issues , but other customer related ones. I went ahead and took care of your thread as we were understaffed at that moment and did not want this thread to be there for hours.

    So , don't worry,  we have several other supporters with CSS skills, if you think I'm not being of help.

    I was trying to narrow the problem, as in the beggining it was not clear to me what was actually the desired final result.

    You stated you wanted to show the dropdown menu just as the other fields in that one form name (E-MAIL.CL 4.0 popup cotizar (newsletter) ) . So I started from that point.

    Now I can see the look and feel are different .

    That form you are showing us , would be now the point to go on,

    so please let me see if I can assign this to someone else, hopefully it will be taken care of sooner

  • Profile Image

    Answered by xowii on October 24, 2012 at 05:10 PM

    Ok, i really dont know how to do this in CSS

    I just need to make the form look like this: https://dl.dropbox.com/u/12558375/Jotform/new%20form%202.png

    or something very similar.

    If you compare this image with the real form, this is better because the market area is more similar to the other fields than the real form. (this is just an image edited in photoshop)

  • Profile Image

    Answered by jeanettebmz on October 24, 2012 at 05:11 PM

    Ok, now I get you, so you want gray letters with that effect right?  I have already assigned a supporter to this thread. Hopefully he will get in contact with you soon

  • Profile Image

    Answered by xowii on October 24, 2012 at 05:13 PM

    Please check the real form from Google Chrome, then we only want to change the the red market area

    for the image we sent you.

  • Profile Image

    Answered by jeanettebmz on October 24, 2012 at 05:39 PM

    Ok, this is the closest outcome to what you need , I have added a gray background and have changed red color of the warning message that comes when selecting "NO". 

    The form without the background is here

    let me know if you need something else  and will try my best

  • Profile Image

    Answered by xowii on October 25, 2012 at 09:14 AM

    Thanks, but this didnt help us at all... is the same, only change the colors

    If you see our picture wht field is bigger, have more padding like the other fields...

  • Profile Image
    JotForm Support

    Answered by abajan on October 25, 2012 at 11:01 AM

    @xowii

    The form our team leader has provided is very close to what you have requested and I imagine that its CSS would have taken some time to devise. I'm supposed to be one of the more adept at CSS around here and I must tell you that I really can't see how her code could have been improved upon. You should also be aware that no matter what code is injected, the form will never appear identical in all browsers. That's not something peculiar to JotForm. It's just the way browsers are. Sometimes we "luck out" and a form looks almost identical across a wide spectrum of browsers/platform combinations but such occurrences are fairly rare.

    Perhaps one of my colleagues might be able to better satisfy your request and if that be the case, wonderful! As the saying goes, more power to them!

    My apologies if this reply doesn't meet your expectations but I just felt I needed to clarify things a bit.

  • Profile Image

    Answered by xowii on October 25, 2012 at 11:07 AM

    Hello, please check again this image (this is what we need): https://dl.dropbox.com/u/12558375/Jotform/new%20form.png

    - Do you see the field "Cuenta con bases de datos propias?"??

     

    Ok this have more padding like the rest of the fields, and this is the form with the CSS you provide us...

    http://form.jotformpro.com/form/22976360342960

    - Please check the same field from above "Cuenta con bases de datos propias?", is almost the same than the original field (before your improve), only change colors, but what i really want is the padding to be with the look and feel of the rest of the fields inside the same form!

     

    Is this impossible??, Can you do this?

  • Profile Image
    JotForm Support

    Answered by abajan on October 25, 2012 at 11:25 AM

    In which browser are you viewing the forms? Would it be possible for you to take a screenshot of Jeanette's form, save it to Dropbox and post its URL here, as you have done with https://dl.dropbox.com/u/12558375/Jotform/new%20form.png? Because what we are seeing in our browsers isn't necessarily the same image you see in yours.

  • Profile Image
    JotForm Support

    Answered by abajan on October 25, 2012 at 11:28 AM

    Perhaps this artical will better explain the issues we're up against.

  • Profile Image

    Answered by xowii on October 25, 2012 at 11:30 AM

    Hello, this is the form you fixed:

    https://dl.dropbox.com/u/12558375/Jotform/urform.png

    and if you see the field: "Cuenta con bases de datos propias?" is the same than the original form (already live in our site) but with different colors, we need this with more padding...

     

     

    We are checking this in google chrome and safari (latest version)

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on October 25, 2012 at 11:43 AM

    Hi there, 

    It seems My supervisor has already given you a solution.

    http://form.jotformpro.com/form/22976360342960

    Please take a look at the form.  It is not as the image you have provided.

    Perhaps you need to clear your cache or use Shift+refresh in order to get the updated version.

    Here is a screenshot of what the solution looks like:

    As you can see, it is quite different from what you have on the last image sent.

    Here is the form without the background:

    http://form.jotformpro.com/form/22976670053963

    May I also point out that, as I am sure you are aware, it is sometimes difficult to interpret the requests of users when the communication is through writting.  It may be a good suggestion for future threads to please give a description as thorough as possible.  We appreciate this as much as we appreciate your politeness :)

    Let us know if we can further assist you!

  • Profile Image

    Answered by xowii on October 25, 2012 at 11:45 AM

    Your picture is exactly what i need, is perfect! but why i see all wrong then??

  • Profile Image

    Answered by on October 25, 2012 at 11:50 AM

    In Firefox seems to be perfect, where i can grab this fixed CSS?

    Maybe later will be able to remove completely the CACHE and see this perfect.

     

  • Profile Image

    Answered by xowii on October 25, 2012 at 11:50 AM

    Was me the last post

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on October 25, 2012 at 11:53 AM

    We are glad we cleared up the missunderstanding.

    Let us know if you need further assistance!

  • Profile Image

    Answered by xowii on October 25, 2012 at 12:06 PM

    Were i can grab this CSS?????

    Please tell me what i need to inject to fix that field like your picture!

  • Profile Image
    JotForm Support

    Answered by EduardoMendez on October 25, 2012 at 12:18 PM

    This is the CSS of the form with the background color:

    .form-all{ background-color: #949494;}select,option { color: #949494;}.form-textbox, .form-textarea, .form-dropdown, .form-radio-other-input, .form-captcha input, .form-list { width: 266px; border-top-right-radius: 7px; border-top-left-radius: 7px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; /* test */ -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; background-color: #fff; border: none; padding: 11px 11px; }input, textarea { color: #949494;; }.form-pagebreak {filter:none;}input::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #949494; }.form-header-group, .form-collapse-table, .form-pagebreak{ background: none; color: #c6c6c6} input, textarea { outline: 0; font-size:13px;font-family:Helvetica,sans-serif;}input:focus, textarea:focus{ outline: none; }textarea{ width:266px; max-width:266px;#id_7 { padding-top: 20px; }input{ outline: none; }

    And this is the CSS code on the form without the background color:

    select,option { color: #949494;}.form-textbox, .form-textarea, .form-dropdown, .form-radio-other-input, .form-captcha input, .form-list { width: 266px; border-top-right-radius: 7px; border-top-left-radius: 7px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; /* test */ -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; background-color: #fff; border: none; padding: 11px 11px; }input, textarea { color: #949494;; }.form-pagebreak {filter:none;}input::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #949494; }.form-header-group, .form-collapse-table, .form-pagebreak{ background: none; color: #c6c6c6} input, textarea { outline: 0; font-size:13px;font-family:Helvetica,sans-serif;}input:focus, textarea:focus{ outline: none; }textarea{ width:266px; max-width:266px;#id_7 { padding-top: 20px; }input{ outline: none; }

    Give it a try and let us know if you need further help!


  • Profile Image
    JotForm Support

    Answered by idarktech on October 25, 2012 at 12:53 PM

    @xowii

    I think my colleague's form is already perfect! I've just made a little bit adjustment and styling on the dropdown field. Check this form: http://www.jotformpro.com/form/22984473861970?

    Just feel free to clone the form if you like. How to clone an existing form from a URL

    Thanks!

  • Profile Image

    Answered by jeanettebmz on October 25, 2012 at 01:00 PM

    Congrats Idarktech! you refined my form amazingly! 

    @xowii  : We love to help people to get the desired effect  as much as we can,  even though this is not part of  paid subscriptions .  Hopefully this finally satisfies your requirements

     

    Cheers!

  • Profile Image

    Answered by xowii on October 25, 2012 at 01:33 PM

    Thank you, is perfect!!!

  • Profile Image

    Answered by xowii on October 25, 2012 at 02:52 PM

    Now this is the updated form: https://dl.dropbox.com/u/12558375/Jotform/new.png

    Must be like this to work properly...

     

    Only need to have the same font and same font size than the rest of the form, and also the little arrows are to much to the right.

    Just that. and thanks for the good work

  • Profile Image
    JotForm Support

    Answered by Rodjit on October 25, 2012 at 03:43 PM

    Hi,

    The arrows and the fonts you are referring to are working fine on my colleague clone form; http://www.jotformpro.com/form/22984473861970

    If you don't want to clone this form then please share to us your finish form so we can check and give you the right codings to inject so we match your needs.

    Thanks

  • Profile Image

    Answered by xowii on October 25, 2012 at 03:48 PM

    This is the finish form "E-MAIL.CL 4.0 popup cotizar (newsletter)" or http://form.jotformpro.com/form/21785417276966

     

    We need to fix this things on the field "Cuenta con bases de datos propias?":

    1- have the same font and font size

    2- same aligned that rest of the fields (the text start to much to the left compared to the rest)

    3- aligned of the arrows without incrementing the form width

     

    Please do changes over the original forms and we are done. thank you

  • Profile Image
    JotForm Support

    Answered by Deygus on October 25, 2012 at 05:22 PM

    Hi Xowii, I'm not quite sure what more you are trying to achieve. I see in http://form.jotformpro.com/form/21785417276966 it looks like you removed the border and frame background unless that was the previous version and you have not cloned it yet? To update to a copy of the latest version please clone this version: http://www.jotformpro.com/form/22984473861970

     

    1- have the same font and font size

    The font size for the form is already the same, take a look -

     

    .form-all{

            width:318px;

            background:transparent;

            color:#f4f4f4 !important;

            font-family:'Verdana';

            font-size:0px; <<<   0px is a default font size in most browsers when it is not specified

     

    2- same aligned that rest of the fields (the text start to much to the left compared to the rest)

    The fields with text are aligned center-left which is why they are offset inward (tabbed appearence) with the text. Were you wanting it centered then or?

    3- aligned of the arrows without incrementing the form width

    It's unclear as to what you want done with this? There's only one arrow in the form and it looks fine. What more are you trying to do or needing?

     

     

    Also please note that depending on the browser's engine and decoding of the source, a form like this that has been heavily customized will likely appear with slight differences across various browsers.

  • Profile Image

    Answered by xowii on October 25, 2012 at 05:46 PM

    you can check the result in www.e-mail.cl/newsletter clicking the button "cotizar ahora"

    Let me know if you find anything in this final form please.

    Thanks

  • Profile Image
    JotForm Support

    Answered by Deygus on October 25, 2012 at 06:28 PM

    I've taken a look at your form and currently it looks awesome from my end and it appears great in Chrome, FireFox, and IE. Is this something you are happy with?