-
Marc HILLAsked 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.
-
Saeed Support Team LeadReplied 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:
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.
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.
-
jegeremonbizReplied 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 LeadReplied 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:
To reduce the gap between the fields, please inject this CSS:
#id_9 {
padding-left: 0 !important;
margin-left: 0 !important;
}
Result:
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.
-
jegeremonbizReplied on August 6, 2022 at 5:45 AM
Hi Saeed,
Thank you so much, my form looks great now!
Warm Regards, Marc.