Skip to main content

Add icon inside Input field

I’m moving my forms over to Fluent Forms from another plugin, and I noticed something I wanted to ask about. As you can see I have 2 screenshots attached. The first screenshot is a form with Fluent Forms and the second is from another form plugin.

In my old form plugin, I was able to put icons directly inside the input fields (like a little user icon in the name field, or an email icon in the email field (screenshot #2)). They sat inside the box with no background, which gave the form a nice clean look.

With Fluent Forms, the only way I’ve been able to add an icon so far is by using the β€œPrefix Label” option under Advanced settings, but it doesn’t look quite the same since it’s treated more like a label outside the field and has a background.

So my question is:

  • Is there a way to get icons inside the fields right now and achieve the same look as my previous forms plugin?
  • If not, would it be possible to add this as a feature in the future? I think it would make forms built with Fluent look a lot more polished.
Add icon inside Input field Add icon inside Input field

Right now its only possible with β€œPrefix Label”, but you are right. it doesn’t look quite the same.

We will look into it, see if there's possibilities to add this as feature.

Magik

Nishat ShahriyarΒ Thank you πŸ˜€ !! I will work around it for now, hoping to see it integrated in the near future

Magik

Nishat ShahriyarΒ any update on this feature by chance?

Taylor Drayson

You can achieve this by changing the styling and colour of the prefix background