ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Uplift
• August 11, 2016 at 6:49 pm #287061
  koy0616

  Member

  Post count: 22

  Hi support team,

  May I know how to add a icon before placeholder text in a specific field in contact form 7?

  here is my current form, I added tel and model field in the form.
  [text name placeholder “稱呼”]
  [email* email placeholder “電郵地址”]
  [tel* tel placeholder “聯絡電話”]
  [text model placeholder “牌子及型號”]
  [textarea message 40×3 placeholder “故障情況”]
  [submit “即時報價”]

  I created tel field which i want to place a phone icon before placeholder. I think it need some css work? I will do it myself for other field after you show me how to add one for “tel”. Thanks.

  p.s. the attached screenshot shows that these new field without icon at the left side.

  Attachments:

  You must be logged in to view attached files.
  August 12, 2016 at 8:58 am #287124
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  Add this to your custom css:

  span.wpcf7-form-control-wrap.email::before {
    color: #999;
    content: "";
    font-family: "nucleo-interface";
    left: 15px;
    position: absolute;
    top: 10px;
  }

  and replace email with the name of your field. You will also need to put the content code for the phone icon in content: “”;

  – Kyle

  August 14, 2016 at 5:10 pm #287311
  koy0616

  Member

  Post count: 22

  This reply has been marked as private.
  August 15, 2016 at 6:35 am #287343
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Your code is incorrect. The right code is:-

  span.wpcf7-form-control-wrap.your-email:before {
  color: #999;
  content: "\f003" !important;
  font-family: FontAwesome !important;
  left: 15px;
  position: absolute;
  top: 10px;
  }

  Thanks
  Mohammad

• Back to forum

  Posted in: Uplift