Email confirmation option is not formatting right on the form

  • Profile Image
    fsclinic
    Asked on July 07, 2021 at 12:23 PM

    See the attached screenshot

    Screenshot
  • Profile Image
    Basil_A
    Answered on July 07, 2021 at 05:47 PM

    Hi,

    Please attempt removing the field and adding back to the form. I believe that should fix the issue.

    Please let us know if the issue still persists.

  • Profile Image
    fsclinic
    Answered on July 08, 2021 at 04:53 AM

    Hi,


    I tried this yesterday and again this morning. No luck, it keeps going off to the side.


    THanks
    Sandy

  • Profile Image
    Cecile_A
    Answered on July 08, 2021 at 08:43 AM

    Hello Sandy,

    Please allow me some time to check on this and get back to you with relevant information.

    Thank you.

  • Profile Image
    Cecile_A
    Answered on July 08, 2021 at 08:58 AM

    Thank you for waiting.

    I cloned your form to test and the suggestion of my colleague seems to work. See demo below.

    1625748727_60e6f4f7b192f_1.gif

    I have cleared your form caches. Could you please try to delete and add back the email field again? But before doing so, I suggest you to download your submissions first as deleting a field will also delete its associated submission data.

    Guide: How-to-download-form-submissions-as-excel-csv-pdf

    Kindly give it a try and let us know how it goes.

  • Profile Image
    fsclinic
    Answered on July 08, 2021 at 09:19 AM

    Hi,


    This still isn't working.


    I have removed the email box and re-added but still the same issue :(


    Sandy

  • Profile Image
    Cecile_A
    Answered on July 08, 2021 at 05:00 PM

    Kindly try injecting the custom CSS code below.

    #input_77_confirm{

     margin-top: 50px !important;

     position: relative !important;

     right: 408px !important;

    }

    Guide: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

    Let us know how it goes.

    Thank you.


  • Profile Image
    fsclinic
    Answered on July 09, 2021 at 04:25 AM

    Hi,


    Thats great, its worked on one of my forms but not the second one -


    https://form.jotform.com/211882886907370

  • Profile Image
    Michal_S
    Answered on July 09, 2021 at 07:19 AM

    Hello!

    This is because custom CSS fixes work only for specific forms, due to varying IDs of the elements.

    For a CSS fix that will work for every form, please use this CSS code:

    div#cid_73 div:first-child{

     flex-wrap: wrap!important;

    }

    Replace the value highlighted in green with the appropriate element ID, which you can find in the Advanced tab of the element's Properties:

    133842_1.png

    Please let us know if you require any further assistance.

    Thank you!

  • Profile Image
    fsclinic
    Answered on July 09, 2021 at 09:01 AM

    Thanks.


    I am really sorry to be a pain but now on the original form when you view on a mobile or tablet the second email box does sit right.

  • Profile Image
    Sonnyfer
    Answered on July 09, 2021 at 10:06 AM

    No worries. Kindly allow me some time to check your form. I will be back shortly.

  • Profile Image
    Sonnyfer
    Answered on July 09, 2021 at 10:12 AM

    Thanks for patiently waiting. Kindly inject the below code into your form:

    @media only screen and (max-width:480px) {
     #input_73_confirm{
      margin-left: -332px ! important;
      margin-top: 50px ! important;
     }
    }  

    Guide: How-to-Inject-Custom-CSS-Codes

    Result:

    1625839904_60e85920bc0ae_

    Let us know if you need further assistance.

  • Profile Image
    fsclinic
    Answered on July 14, 2021 at 05:22 AM

    Hi,


    This formatting code is not working across phone, tablet and desktop. So I have decide to use some conditional formatting in the form to tell the form filler something doesn't match.


    Thanks for your help :)