Clearout Email Validation: how to hide sublabel and align fields

  • Profile Image
    Marc HILL
    Asked on August 05, 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.


    Screenshot
  • Profile Image
    Saeed
    Answered on August 05, 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_

    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_

    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.

  • Profile Image
    jegeremonbiz
    Answered on August 05, 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.

  • Profile Image
    Saeed
    Answered on August 06, 2022 at 04: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_

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

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

    Result:

    1659775913_62ee2ba9c24ed_

    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.

  • Profile Image
    jegeremonbiz
    Answered on August 06, 2022 at 05:45 AM

    Hi Saeed,

    Thank you so much, my form looks great now!

    Warm Regards, Marc.