How can I get some help styling my form with custom CSS code?

  • Profile Image
    pcgmarketing
    Asked on November 22, 2017 at 01:52 PM

    Hi guys,

    I am working on the second lead form for my landing page designs and noticed a few issues that need to be fixed before launch next week:

    The button is not 100% the same width as the text entry boxes

    The height/margins between boxes should be as short as possible (i.e., closer to the height between the submit button and the message/long entry text box).

    The Message/long entry text box placeholder text is not the same text style/color & the text styles are not giving the same margins as the fields above (email/name).

    Lastly, the confirmation messages on both my forms are no longer transparent/I can't figure out how to format/style those further. Is there a way to easily do this/add transparency to the background for the confirmation messages? Also, can I shorten the height on it so that there isn't a large gap between the message and the bottom of the embedded form areas?

    Thanks! Screenshots attached.

  • Profile Image
    Kevin_G
    Answered on November 22, 2017 at 02:56 PM

    Please try injecting the following CSS code: 

    #input_3, #input_6, #input_7{

    width: 98.5%;

    }



    textarea#input_7 {

        padding-top: 15px !important;

        color:#333 !important;

    }


    li:not(#id_2) {

        margin-top: 0px !important;

        padding-top: 0px !important;

        margin-bottom: 0px !important;

        padding-bottom: 0px !important;

    }

    This one will specifically help you with the thank you page, you can change the height and background color: 

    .thankyou {


        height: 600px!important;

    background-color: transparent !important;

    }


    .thankyou #stage {


        height: 550px!important;

    background-color: transparent !important;


    This guide will help you injecting the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    I hope  this helps. 

  • Profile Image
    Welvin
    Answered on November 22, 2017 at 04:24 PM

    I've fixed it for you. Please check now.

    I've added some CSS to change the placeholder text color:

    https://css-tricks.com/almanac/selectors/p/placeholder/


  • Profile Image
    pcgmarketing
    Answered on November 27, 2017 at 01:15 PM

    Thank you,

    The placeholder color is looking good and the top form is just about perfect. The last things we're trying to get perfect before we launch is the bottom forms having the placeholder and input text match the top form. Also the Submit button on the bottom form is not matching the text box/input fields above. Here is a quick screenshot:

    1511806506ss112717.jpg

    Thanks again!

  • Profile Image
    Welvin
    Answered on November 27, 2017 at 02:11 PM

    I've fixed that. You can adjust the padding by changing the values in the following line:

    input, textarea {

        width : 100% !important;

        box-sizing: border-box;

        padding-left: 15px !important;

    }

    I've also changed your CSS for the height of the fields. The textarea is a bit taller now. You can adjust its size in its properties, see screenshot:

  • Profile Image
    pcgmarketing
    Answered on November 27, 2017 at 02:27 PM

    Perfect looks great! Thank you very much for all your help!