customize form using CSS

  • Profile Image
    kjfeilhof
    Asked on July 02, 2019 at 10:27 AM

    I have a form which is very critical to launch of our upcoming brand new website. It essentially serves as a product page which feeds to our upload-to-print on demand photo service. I've nailed down every bit of the form's functionality, but my VP/Design team are unhappy with a few visual elements of the form, and I'm feeling completely stuck on how to fix. Attached/below is a PDF which shows the little fixes I need to get made. My problem is I am terrified to ever touch anything related to CSS. Are these fixes something you're able to inject for me? I'm at a bit of a hold up, because I have 3 more forms identical to this one, but w/ different sets of dropdowns applicable to other mediums. I'm not wanting to have to repeat the CSS work, so I would like to get this first one dialed in perfectly from aesthetic side, then clone/revise for other mediums. 

    1562077612Screen Shot 2019-07-02 at 7.26

    Please help! Thank you, so much appreciated. 

  • Profile Image
    Richie_P
    Answered on July 02, 2019 at 11:55 AM

    I have checked your form and can you please share the font and size that you want to use with your text element?

    May we know if your form is embedded to your web page?

    Can you please share to us the web page URL?

    Looking forward for your response.

  • Profile Image
    kjfeilhof
    Answered on July 02, 2019 at 12:03 PM

    Yes for sure! The font is Arial for all. The size is 28pt for the header 'Canvas Prints' then 14 for the text in body. Price can remain sizes as is. 

    The form is embedded on this page: https://shop.hallofframes.com/canvas-prints

    The product pages the form emulates, here is the live example: https://shop.hallofframes.com/bennet-frame

  • Profile Image
    kjfeilhof
    Answered on July 02, 2019 at 12:17 PM

    I really appreciate you looking at the form. The only other thing I am stuck on, that I forgot to mention above; is the call to action bar, where we have the image that says, "Head to our Image Uploader"....could you show me how to format the image I am trying to use in place of the native button? You can still see the edges of the native button around the image file I want to use. 

    1562084250Screen Shot 2019-07-02 at 9.16

  • Profile Image
    Richie_P
    Answered on July 02, 2019 at 01:44 PM

    You may use this custom CSS code:

    For the header,

    #header_1{
    font-size:28pt;
    }

    Guide:https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    For the text element, you would have to edit the source code and edit the font-size.

    Go to your text element and click on the <> icon to open the source code.

    Then edit the font-size

    You may change your submit button style to mach your uploaded button image.

    Please give it a try and let us know if you need further assistance.

  • Profile Image
    kjfeilhof
    Answered on July 02, 2019 at 02:52 PM

    Thanks so much!! I was able to get those to work...mostly. 

    I'm still running into issues w/ my button image not fully replacing the native button. 

    1562093471Screen Shot 2019-07-02 at 11.5

    It is weird because I can still see on the bottom and left, remnants of a native button, but I believe I have it set up properly in back end. 

    1562093527Screen Shot 2019-07-02 at 11.5

    Also, could you please have a look at these remaining padding issues? Would I do these via CSS in the Design screen, or via HTML/CSS in the fields? 

    1562093392Screen Shot 2019-07-02 at 11.3

  • Profile Image
    Richie_P
    Answered on July 02, 2019 at 04:23 PM

    You may add this custom CSS to adjust the padding,

    #id_8{
    margin-top: -19px;
    }

    This would reduce the padding between the paragraph and canvas depth


    #cid_22{
        margin-top: -20px;

    }

    This will reduce the padding between price.

    Regarding your button, it is showing correctly at my end.

    Please give it a try and let us know how it goes.

  • Profile Image
    kjfeilhof
    Answered on July 02, 2019 at 04:29 PM

    Thanks Richie! I'll get on those CSS fixes now! This is making more and more sense as we go! So the #cid_22 and #id8....are those what you are tagging in the form-wide CSS inject sheet, to narrow the tag to only that field? I love this stuff....actually find it fun! 

    Hey...sorry to be a bug on that button....but it is still showing a sliver of something below the button. I can see it even in your screenshot. See the little line below? It's not the end of the world if we can't make that go away. 

    1562099303Screen Shot 2019-07-02 at 1.25

    Thanks a ton!