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 form using CSS

    Asked by kauseway on September 10, 2015 at 11:18 AM

    Their way to get some help with some form styling. I have attached a photo of what I'm looking to get. I want to feels on the same road to be continuously white with a small divider similar to the image I sent.  Also would like to have a little icon in the address section.

    icon for address:

    http://accommodation.net/img/location-icon-blue.png

    Page URL:
    http://form.jotformpro.com/form/52519487652970

    icon textbox icon background
  • Profile Image
    JotForm Support

    Answered by Mike_G on September 10, 2015 at 03:09 PM

    I would like to apologize, however, it seems that the image you said you have attached was not attached properly. You can include a screenshot on your post using this guide: How-to-include-screenshot-image-in-the-support-forum

    Regarding the icon that you would like to have in the address section, is this how you would like it to look like? http://form.jotformpro.com/form/52526186370961?

    We will wait for your response. Thank you. 

     

     

  • Profile Image

    Answered by kauseway on September 10, 2015 at 03:13 PM

    sorry. here is the two conditions. I  want to get rid of most of the margins and padding.  Each row is continiuos with just a grey break line between fields.  thanks!  yes on the icon.  thank you so much

  • Profile Image
    JotForm Support

    Answered by Mike_G on September 10, 2015 at 07:25 PM

    Please check this form: http://form.jotformpro.com/form/52526108785965?

    Please feel free to clone it to your account with the help of this guide: How-to-Clone-an-Existing-Form-from-a-URL

    I hope this helps. Let us know if you need any further assistance. Thank you.

  • Profile Image

    Answered by kauseway on September 10, 2015 at 07:44 PM

    You are awesome. Thanks so much.  Can I asked for a few more minor tweaks.

    1) round the outside form corners like 4 px.

    2) Narrow the padding more. Its around 16 and 20px. Can you have it 4px all around the top, sides and bottom and in between the field rows

    3) remove the see your price button border.

     

    Thanks!

  • Profile Image

    Answered by kauseway on September 10, 2015 at 10:15 PM

    Sorry. The other thing that I was needing is for to be responsive. So all four fields would be underneath each other and I hundred percent with in phone view.  the form gets a little wacky as the width narrows.  I tried to apply the responsive widget but it didnt do anything. The text "Get a quick and easy price" would appear on phone view only.  

  • Profile Image
    JotForm Support

    Answered by Charlie on September 11, 2015 at 05:05 AM

    Hi,

    I cloned my colleague's form and made some edits on it, please check this one: http://form.jotformpro.com/form/52532509200949? 

    Unfortunately, the mobile responsive for this form seems to not work because of some conflicting CSS codes. I'll try to look at it more and see if I can adjust it further.

  • Profile Image

    Answered by kauseway on September 11, 2015 at 12:15 PM

    That looks great! If you can help with the responsiveness that would be awesome.

  • Profile Image
    JotForm Support

    Answered by Charlie on September 15, 2015 at 09:18 AM

    Hi,

    Upon checking your CSS, there seems to be a lot of conflicting code on it. I tried editing it and make it more responsive. See if this one works better: http://form.jotformpro.com/form/52532509200949?.

    You can check the custom CSS code I used and edit it.

    Thanks.