How can I design this form. Help with CSS

  • Profile Image
    melodicsounds
    Asked on May 03, 2017 at 09:53 PM

    Hi in my form: https://form.jotform.co/71228265851862 I need help with CSS to recreate the form and give a border so it looks like this:

    And also can you help me with the CSS or inject the right text so the "Limited Time Offer" and the rest of the text looks like this? When I add text to my form it looks with big spaces between it.

  • Profile Image
    RyanC
    Answered on May 03, 2017 at 10:28 PM

    .supernova .form-all, .form-all {

        background-color : #ffffff;

        border : 5px solid #7BFC3E;

        

    }

     

    Just add this in the custom CSS.

  • Profile Image
    Chriistian
    Answered on May 03, 2017 at 11:31 PM

    If you want to have a border around your form that has the exact color as what you are seeing on the image you have attached, please inject this custom CSS on your form:

    .supernova .form-all, .form-all {

        border : 5px solid #53C22A;

        border-radius : 10px;

    }

    Result:

    Here's the guide on How to Inject Custom CSS Codes.

    Let us know if you need further assistance.
    Regards.

  • Profile Image
    melodicsounds
    Answered on May 04, 2017 at 12:58 PM

    Thanks it worked fine but when I embed my form to my website it has a white background still outside the border. See Picture.. how to take off this background outside border?

     

  • Profile Image
    John_Benson
    Answered on May 04, 2017 at 01:54 PM

    Hello, can you please provide the website URL so we can check it further? 

    Try adding this custom CSS code:

    .supernova .form-all, .form-all { 

        background : transparent !important; 

    We'll wait for your response. Thank you.

  • Profile Image
    melodicsounds
    Answered on May 04, 2017 at 03:25 PM

    It didn't worked! Remember I need white inside the border and just to eliminate the white outside the border.

  • Profile Image
    melodicsounds
    Answered on May 04, 2017 at 03:28 PM

    Also can you help me add a shadow to the form please.

  • Profile Image
    John_Benson
    Answered on May 04, 2017 at 03:29 PM

    Yes, we can help you. First, can you please share the website URL where you embedded the form so we can investigate it further?

    We'll wait for your response. Thank you.

  • Profile Image
    melodicsounds
    Answered on May 04, 2017 at 05:45 PM

    https://www.conqrpreview.com/landing-standard

  • Profile Image
    John_Benson
    Answered on May 04, 2017 at 06:10 PM

    Thank you for providing the website URL.

    Please remove the custom CSS code that I have given to you earlier: 

    .supernova .form-all, .form-all {
    background : transparent !important;

    And replace it with this custom CSS code: (How-to-Inject-Custom-CSS-Codes)

    .supernova { 

    background-color: transparent !important; 

    .supernova .form-all, .form-all { 

    background: #ffffff !important 

    Here's the result: 

    Please contact us again if you need assistance. Thank you.

     

  • Profile Image
    John_Benson
    Answered on May 04, 2017 at 06:17 PM

    Here's the custom CSS code if you want to add a shadow to the form:

    .supernova .form-all, .form-all { 

        box-shadow: 2px 2px 2px #000000 !important; 

    Result:

    Hope that helps. Thank you.

  • Profile Image
    melodicsounds
    Answered on May 04, 2017 at 06:48 PM

    Thank you buddy!