Webflow sync, pageviews & more.
NEW

How can I create a sign-up form field with an icon as a link in Webflow?

TL;DR
  • Add a Form Block with an input field and wrap it in a Flexbox Div (Input Wrapper) alongside a Link Block containing your icon.
  • Style layout with Flex settings so the input expands and the icon stays aligned; link the icon to a help URL or section and enhance accessibility with labels or tooltips.

To create a sign-up form field with an icon as a clickable link (for example, a "?" icon that links to help text), follow these steps in Webflow:

1. Add a Form Block and Input Field

  • Drag a Form Block from the Add Elements panel onto your page.
  • Inside the Form, delete extra inputs if needed and keep only the one you want (e.g., Email).
  • Select the Input Field, and give it a class (e.g., Signup Input).

2. Create a Wrapper for Input and Icon

  • Drag a Div Block into the Form and give it a class like Input Wrapper.
  • Move your input field inside this wrapper.
  • Inside the same wrapper, add a Link Block or Text Link, and place your icon (SVG, image, emoji, or font icon) inside it.

3. Style the Wrapper for Layout

  • Set the Input Wrapper to Flex → Horizontal.
  • Align items to Center or adjust padding/margins to align vertically.
  • Set Input Field to grow (Flex → Grow if possible) so it takes up available space.
  • The Icon Link can have fixed width and margin-left as needed.
  • Select the icon link and in the settings panel:
  • Use External URL for help documentation (e.g., https://example.com/help)
  • Or choose Page Section if you’re linking to an explanation on the same page

5. Optional: Add Accessibility and UX Enhancements

  • Add alt text or aria-label to the icon for screen readers.
  • Use tooltips for hover explanations (you can use Webflow interactions or basic title attributes).

Summary

Wrap the input and icon in a flexbox container, use an icon inside a Link Block for functionality, and adjust styles so the layout looks clean. This keeps your form field interactive with a clickable, helpful icon.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I make my Webflow menu automatically close after clicking a menu item that links to another section on the page?
How can I add icons next to text in the "For Instance" section of my UX Coaching page on Webflow? Can someone provide a video tutorial? The icon I want to use is the green checkmark circle shown in my photos.
What can I do to improve my website's loading speed in Webflow, particularly in terms of optimizing images for mobile devices and reducing total blocking time?
Why does the grid behave differently in preview mode in Webflow when building a custom nav drop-down menu?
Is it possible to link a Webflow CMS collection list to another CMS collection?
How can I create a fully-functional lightbox with Webflow and CMS collection integration?
How can I create a simplified step-by-step guide for achieving a parallax background effect in Webflow?
Can I add specific email addresses for recruiters to receive job applications in Webflow? If so, what integrations or tools are recommended for sending automated email responses to applicants?
Am I not using Webflow CMS properly if I need more than 30 fields for each case study section? Can I add a non-collection section to a collection page in Webflow? Is there a better way to build case studies using Webflow that allows for more flexibility? Thank you.
Can I create a div box with sharp corners in Webflow similar to the example shown?
Does Webflow support video backgrounds and how can I troubleshoot if the video is not showing up on my site?
What options should I set in Webflow to make this text wrap to a new line and align the "5 videos ^" to the right?
How can Webflow users incorporate 3D objects and animations into their websites, interact with them using interactions, scrolling, and mouse movement, and import models and animations from Blender?
What responsive issues am I encountering with Webflow on tablet breakpoints, specifically with an animation involving cards?
What are the benefits and features of Webflow?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?