Adding square meters symbol to a number field

Get Help
,
1

Hello,

Is there a simple way to add the “m²” as unit for a number field. Please see the image attached.

paris
paris960×435 10.4 KB

Thanks for your help

2

Do you have a link to the page on your site where we can see the form? I assume from the screenshot the the input field is as wide as the underline, which means you cannot add the text AFTER the input (which would have been my suggestion.) Share a link if you can

3

Hi Chris, thanks for your reply. I tried to use :after in my css but as you imagine with no luck. Here is the link to the forrn : https://maisonlouis.paris/questionnaire/2. For info, I used lastform add-on for styling. Thanks

4

I was able to create and use a background image in the input, but that puts it all the way to the right. It looks like this:

firefox_2019-09-06_16-28-58
firefox_2019-09-06_16-28-581290×647 14.3 KB

I created the image using the same font, same font size, same font weight and same background color as the input. I’m not sure I checked the font color.

This is the image I created:
[SITE REMOVED]

This is the CSS I used to add it to that field in your form:

body .gform_wrapper input#input_2_12 {
	background: url([SITE REMOVED]/wp-content/uploads/gravity_forms/files/m2.png) no-repeat right 10px center;
	// optional border to see where the input is
	border: 1px solid #000;
}

That CSS can be added to your theme stylesheet, or use the Appearance Customizer (Appearance > Customize > Additional CSS)

The border is there only so I could see where the input was.

If you want to use something like this, please download that image and store it on your server, or create a new image tweaked to your liking.

Let me know if you have any questions.

5

Lastform is at https://lastform.com