Visual form improvements

  • Profile Image
    Scanlon_Katie
    Asked on August 12, 2020 at 06:03 AM

    Hello, 


    I've used the Default Theme for my form and I'd like some help with the following:

    1) Removing the default faint drop shadow this theme has around the border of the form.

    2) I'd also like to add a faint black border around it instead. I've looked into all options + CSS but this doesn't seem to work. 

    3) How do I reduce the margin size of the page? I can see the option for the form but not the page. 

    4) Lastly, is there a way to alter the size of the design in general on Mobile? I'm using the form as a plug-in 


    Thanks for your help,

    Katie. 

  • Profile Image
    Bojan_J
    Answered on August 12, 2020 at 09:22 AM

    Greetings Katie.

    Please try to add the following CSS to solve the first three questions:

    form {
      padding: 0 !important;
    }
    .form-all {
        box-shadow: none !important;
        border: 1px solid black !important;
        margin: 0 !important;
    }

    You can click here to see how to inject the provided code.

    Please let us know how would you like to resize the form so we could properly help you. Also, if you are embedding the form, please provide us with the URL of a page where the form will be so we could fully help.

    Thank you for your cooperation. 

  • Profile Image
    Scanlon_Katie
    Answered on August 12, 2020 at 10:07 AM

    Hey Bojan, 


    Thanks! The border and shadow are sorted now. 


    In regards to the sizing of the form, I'm happy with it is as is on desktop - however on mobile it seems disproportionately large than the rest of content on that page (despite it being embedded in the same sizing / textbox width as the rest of content on that page)


    Katiescanlon.com/contact


    Thanks for your help!


    Katie. 

  • Profile Image
    BJoanna
    Answered on August 12, 2020 at 11:56 AM

    If you want to reduce the size of the field labels on mobile devices, please add the following CSS code to your form:

    @media only screen and (max-device-width: 500px){

    .form-label {

        font-size: 10px;

    }}

    How to Inject Custom CSS Codes