Add an image to a form field

HubSpot Ideas
1

I would like to have an image in a form field, such as a phone in a phone number field. Other autoresponders, such as Sender, I have used have had this. For example,

phone.png

2

Hello @HubspotUser20 ,

you have already a lot of options for that, let me show 2 that I use here : https://145224196.hs-sites-eu1.com/hubspot-community-form

1/ you can add an emoji in the placeholder text or the label of the propertiy in your form (like :telephone: Phone number in my example)

2: you can go to the page where your form is and add css in your header section. To get the same effect that I did :

  • copy paste this code in the header section of your page (the form need to have a mobilphone of course but you can just change for hs_phone if it is phone that you want)
  • if you want to change icon, look for the code at fontawesome website (here it is f095 for example)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 <style>
 .hs_mobilephone .input {
 position: relative;
 }

 .hs_mobilephone .input::before {
 content: "\f095"; /* Font Awesome Unicode for phone icon */
 font-family: "Font Awesome 6 Free"; /* Ensure the correct font is used */
 font-weight: 900; /* Required for Font Awesome solid icons */
 position: absolute;
 left: 10px; /* Adjust this value to position the icon correctly */
 top: 50%;
 transform: translateY(-50%);
 font-size: 16px;
 color: #333; /* Icon color */
 }

 .hs_mobilephone .hs-input {
 padding-left: 30px; /* Adjust this to ensure space for the icon */
 }
 </style>