How to style form using CSS

  • kauseway
    Asked 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

  • Mike_G JotForm Support
    Replied on September 10, 2015 at 3: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?

    How to style form using CSS Image 1 Screenshot 20

    We will wait for your response. Thank you. 

     

     

  • kauseway
    Replied on September 10, 2015 at 3: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

    How to style form using CSS Image 1 Screenshot 20

  • Mike_G JotForm Support
    Replied on September 10, 2015 at 7: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.

  • kauseway
    Replied on September 10, 2015 at 7: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!

    How to style form using CSS Image 1 Screenshot 20

  • kauseway
    Replied on September 10, 2015 at 10:15 PM

    How to style form using CSS Image 1 Screenshot 20

    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.  

  • Charlie
    Replied on September 11, 2015 at 5: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.

  • kauseway
    Replied on September 11, 2015 at 12:15 PM

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

  • Charlie
    Replied on September 15, 2015 at 9: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.