How to style form using CSS

  • Profile Image
    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

  • Profile Image
    Mike_G
    Answered 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
    kauseway
    Answered 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
    Mike_G
    Answered 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
    kauseway
    Answered 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
    kauseway
    Answered 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
    Charlie
    Answered 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
    kauseway
    Answered on September 11, 2015 at 12:15 PM

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

  • Profile Image
    Charlie
    Answered 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.