Custom CSS not working when embedding form on Shopify site

  • Profile Image
    AurelieO
    Asked on January 04, 2018 at 07:53 PM

    Hi, I added custom CSS to personalize my form. When I publish it to my account, it doesn't take into account the CSS I added. It looks different than the form in the builder view:

    1515113395Screen Shot 2018-01-04 at 7.49

    Once published: 

    1515113459Screen Shot 2018-01-04 at 7.50

    And the CSS I added:

    1515113556Screen Shot 2018-01-04 at 7.52

    The background and the button CSS are not taken into account. Can someone please help me figure this out?

    Thanks


  • Profile Image
    Mike_G
    Answered on January 04, 2018 at 10:57 PM

    We would like to apologize for any inconvenience. May we know the link to your website where the form is embedded so we can inspect it, please?

    Also, may we know which embed code did you use to embed your form?

    Have you tried re-embedding the form to see if that would make any difference?

    We will wait for your response.

  • Profile Image
    AurelieO
    Answered on January 05, 2018 at 09:42 AM

    Hi Mike, Thanks for getting back to me!

    I added an !important flag to all the CSS rules and it mostly worked. The only one that doesn't work is the button border for some reason... Do you who why that might be?

    Also, for some reason I cannot figure out how to center the whole form - how would you do that?

    Thanks

  • Profile Image
    Mike_G
    Answered on January 05, 2018 at 10:23 AM

    Based on the screenshot you shared with us above,

    1515164276t09_55_12.png

    I see that there is no border on the submit button of your form.

    Unlike when previewing the form, I see that there is a border on the submit button

    1515165334t10_13_02.png

    I will look into this and get back to you as soon as possible.

    With regards to centering the form:

    Are you trying to center the fields against the form or the form against the page?

  • Profile Image
    AurelieO
    Answered on January 05, 2018 at 10:26 AM

    Yes correct for the button! But if you check my CSS, I added `border: none!important`

    Concerning the centering, I want to center the form against the page. For now it's left aligned but I want it centered. 


    Thanks

  • Profile Image
    Richie_P
    Answered on January 05, 2018 at 11:38 AM

    You can try adding this code to remove the border.

    button#input_2{

    border:none!important;

    }

    Can you provide us with your webpage link so we can check how the form looks in your page?

    to center your form you can add this css code:

    .form-all{

    margin: auto;

    }

    Let us know how it goes.

  • Profile Image
    AurelieO
    Answered on January 05, 2018 at 11:44 AM

    Thanks it worked for the border!

    I already have: 

    .form-all{

    margin: auto;

    }

    and event with !important it doesn't center the form on the page...

    I also tried adding text-align: center

  • Profile Image
    Richie_P
    Answered on January 05, 2018 at 12:58 PM

    You can try

    .form-section{

    margin-left:150px;

    }

    But I'm not sure if it will render well in your website, just adjust the px to your liking.