Please can you help me clean up my .CSS?

  • Profile Image
    Mrkay
    Asked on August 08, 2017 at 10:18 AM

    Hi there,

    Could you please take a look at my .CSS for my form and also the .CSS for the Email Correctness Widget?

    I'm attempting to make my form look like this:

     

     

    But it is currently looking like this:

     

     

    The main issues I am facing are the following:

    Full Name & Email fields space between them is too wide.

    I can't get the Email auto correctness widget field to have the same background as Full name field

    I think the Email auto correctness text sits lower than the field text for Full Name

    I'd like to disable both labels (above the fields) for the fields

    I'd like the submit button to be next to (Full Name, Email & Submit) if possible. I know this might not be possible whilst viewing on mobile.

    I'd like the bottom section of the form to be white like in the example I have show whilst the top setion (Header) is in the grey as is now.

    We never share your details icon is floating around as is the text.

     

    Please could you help?

     

    Thanks

  • Profile Image
    Chriistian
    Answered on August 08, 2017 at 11:51 AM

    I am currently checking your form. I will be back as soon as I am done with the CSS for your form.

  • Profile Image
    Mrkay
    Answered on August 08, 2017 at 11:52 AM

    Thanks @Chriistian

  • Profile Image
    Chriistian
    Answered on August 08, 2017 at 12:10 PM

    Please do the following for each of your concern.

     

    Full Name & Email fields space between them is too wide.

    I think the Email auto correctness text sits lower than the field text for Full Name

    I'd like the submit button to be next to (Full Name, Email & Submit) if possible. I know this might not be possible whilst viewing on mobile.

    - please inject the following CSS to your form.

    .form-line-column.form-col-1,

    .form-line-column.form-col-2,

    .form-line-column.form-col-3 {

    padding-left: 5px;

        padding-right: 5px;

        width: 33.333333% !important;

     

    }

    .form-textbox {

    width: 100% !important;

    }

    .form-line-column.form-col-2 iframe {

    width: 100% !important;

     

    }

    .form-submit-button,

    .form-submit-button:hover {

    width: 100% !important;

    margin-top: 0 !important;

        margin-bottom: 0 !important;

     

    }

     

     

    I can't get the Email auto correctness widget field to have the same background as Full name field

    replace the background-color property in the custom CSS of you Email Correctness Check widget with 

     background-color: #dddedf;

     

     

    Please see steps below.

     

     

     

    I'd like the bottom section of the form to be white like in the example I have show whilst the top setion (Header) is in the grey as is now.

    Please inject the following CSS to your form.

    .form-line-column.form-col-1,

    .form-line-column.form-col-2,

    .form-line-column.form-col-3,

    #id_17 {

    background-color: #FFF;

    }

    #text_17 {

    color: #555;

    }

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

    border: none !important;

     

    }

     

    I am not quite sure about the following requirement. Can you please give us more details?

    I'd like to disable both labels (above the fields) for the fields

    We never share your details icon is floating around as is the text.

     

    Here is my cloned form. https://form.jotformpro.com/72194147005956. You may check and clone it.

  • Profile Image
    Mrkay
    Answered on August 08, 2017 at 03:07 PM

    Thanks!

    I have cloned your form I have a few snags still remaining but the main issue is the mobile responsiveness of the form. 

    I am now using this form: https://eu.jotform.com/build/72194850284360/design

     

    You can also view it live on www.mktg-consulting.com

     

    The form would work fine in Mobile if the two fields and the submit button stacked on top of each other in mobile view:

    Full Name
    Email Address
    Subscribe

     

    ---

    The Email Address text sits lower than the Full Name text. I'd like to move the Email Address up to match.

     

     

    ---

     

     

    I'd like to increase the white space between the left border of the pop out and the Full Name field box. Also the same with the white space between the Subscribe button and the right border of the pop out.

     

    I'd like some space between the left field walls and the text inside of the field boxes. I've demonstrated this in the screenshot above.

     

    ---

    Despite the form being the correct height, there is a scroll in the light box pop out. Is there a way to deactivate.

     

    ---

     

    Finally, the Full Name field is Embossed and the Email Address is Debossed along with the Subscribe button. Is it possible to deboss the Full Name box as well to match?

     

     

    Thanks so much once again for your help!

  • Profile Image
    Kiran
    Answered on August 08, 2017 at 04:55 PM

    The Email Address text sits lower than the Full Name text. I'd like to move the Email Address up to match.

    Please try changing the height of the email field to 44px in the Email correctness check widget so that it should be aligned properly with Name.

    I'd like to increase the white space between the left border of the pop out and the Full Name field box. Also the same with the white space between the Subscribe button and the right border of the pop out.

    How is the form embedded on the web page? I am unable to find any link to the form on the website provided. Could you help us in locating the form on your website? We can also check the website on a mobile device to see what can be done with the responsiveness of the form.

    Is it possible to deboss the Full Name box as well to match?

    Since the Email field is being called from the widget, it is required to apply the CSS to the widget in order to match the Name field. Please try adding the following CSS code to the #user_email section in the Email correctness check and see if that helps.

    border: 1px solid #ccc;

    -moz-box-shadow: 0 1px 2px #eee inset;

    -webkit-box-shadow: 0 1px 2px #eee inset;

    box-shadow: 0 1px 2px #eee inset;

    Please get back to us if you need any further assistance. We will be happy to help. 

     

  • Profile Image
    Mrkay
    Answered on August 08, 2017 at 05:53 PM

    Hi I've made the changes,

    To see the form which is a light box popout please visit www.mktg-consulting.com it will only trigger once after 5 seconds. It uses a cookie to check if you are a returning visitor. If you are it will not pop open. You will need to use incognito or a private browsing window. Close and reopen each time you want to trigger it again.

    There seems to be a fault which stops it from triggering on the first page but if you reload or navigate to a second page it will trigger.

     

    Issues I am still facing:

     

    - Mobile responsiveness doesn't work. You can either see this on your phone at www.mktg-consulting.com or you can see it in the advanced style editor preview window and then change the view to mobile:

     

    -Error status doesn't work (try putting in a an email like 123@abc in the email field and submit and you will see the issue.

    Thanks again

  • Profile Image
    Kevin_G
    Answered on August 08, 2017 at 08:51 PM

    Please allow me some time to work on the needed CSS code to display your form properly in mobile devices. I will also investigate the issue with the email field. 

    I will get back to you as soon as possible. 

  • Profile Image
    Mrkay
    Answered on August 08, 2017 at 08:54 PM

    Hi @Kevin_G

    Thanks. The issue re email field is more an issue with the error messages / status for any fields.

     

    Thanks

  • Profile Image
    Kevin_G
    Answered on August 08, 2017 at 09:18 PM

    I have checked how the form display on a mobile device and it seems a bit distorted, this happens due to the element's width where the form has been embedded on, it's not enough to display the fields inline. 

    I would recommend you to try displaying the fields one below each other, this code will help you to do it: 

     

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

      li#id_3, li#id_15 {

          width: 100% !important;

          padding-bottom: 30px;

      }

      

      li#id_2 {

          width: 100% !important;

      }

    }

     

    Follow this guide in order to inject the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    And this one will display the email field with its full width, please inject it to you widget, this guide will help you: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

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

      input#user_email {

          width: 100%;

      }

    }

     

    You may take a look on this form in order to see the result: https://form.jotformpro.com/72197552966975 

    Now, regarding to your issue with the email validation, I can see you are using the "Email Correctness Check" widget, that will verify that the email address has been correctly typed, but it will not evaluate if this is a valid email address. 

    You could set up the suggested domains in the widget too: 

    You may also give a try to the Email Validator widget: https://widgets.jotform.com/widget/e-mail_validator 

    I hope this helps.