Clearout Email Validation: how to hide sublabel and align fields

  • Marc HILL
    Asked on August 5, 2022 at 10:45 AM

    Dear JotForm Support Team,

    In form https://form.jotform.com/jegeremonbiz/commande-bobun, I use the clearout mail validation widget as you may see in attached screenshot.

    Question 1 : is it possible to better align the mail and mobile fields as shown on screenshot? Via CSS or other options available maybe?

    Question 2 : is it possible via CSS to get rid of the example@example.com text?

    Thanks for your help and greetings from France.

    Best Regards, Marc.


    Jotform Thread 4238707 Screenshot
  • Saeed Support Team Lead
    Replied on August 5, 2022 at 11:11 AM

    Hello Marc,

    Thanks for reaching out to Jotform Support. To hide the example@example.com sublabel, please inject the following CSS code into the widget.

    .sublabel {
        display: none;
    }

    Result:

    1659712221 62ed32dd7505b  Screenshot 10

    It's really easy to add Custom CSS to your widget, let me show you how:

    • Select the widget and click the wand icon. It will open the widget Settings.
    • Navigate to the Custom CSS tab and inject your codes.
    • Don't forget to hit the Update Widget button to save your changes.

    1659711914 62ed31aad9195  Screenshot 21

    To learn more about how to inject custom CSS codes into widgets please review a step-by-step guide here.

    The above code will also fix the alignment issue but if you still need help with this let us know and we will provide you with the required code. It would help us if you share a bit more details about the alignment issue. Do you want to decrease the space between the fields?

    Keep us updated and let us know if you need any more help.

  • jegeremonbiz
    Replied on August 5, 2022 at 10:48 PM

    Hi Saeed,

    Thanks for the code, works fine.

    As you may have seen, the Mail field is not vertically aligned with Mobile field. Mail field on the left seems a couple of pixels "below" Mobile field. I wondered if there is a way to give the form a nicer look without this little gap.

    Thanks.

  • Saeed Support Team Lead
    Replied on August 6, 2022 at 4:53 AM

    Hello Marc,

    Thanks for getting back to us and providing us with additional details. Please use the following code to align them in the same line.

    li#id_9 {
    margin-top: 15px !important;
    }

    Result:

    1659775814 62ee2b4681b75  Screenshot 10

    To reduce the gap between the fields, please inject this CSS:

    #id_9 {
    padding-left: 0 !important;
    margin-left: 0 !important;
    }

    Result:

    1659775913 62ee2ba9c24ed  Screenshot 21

    I cloned your form and implemented the above CSS. You can check my form here.

    That's it. Let us know if you need any more help.

  • jegeremonbiz
    Replied on August 6, 2022 at 5:45 AM

    Hi Saeed,

    Thank you so much, my form looks great now!

    Warm Regards, Marc.