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

To create a sign-up form field that includes an icon as a link (for example, a help icon next to the email input), you will need to use a combination of Webflow’s Form Block and Positioning features.

​

1. Add a Form Block and Input Field

​

• Drag a Form Block into your page.
• Inside the form, add a Form Field (like Email).
• Webflow automatically wraps inputs in a Form Field Wrapper, which you’ll use for positioning the icon.

​

2. Add a Link Block for the Icon

​

• Drag in a Link Block inside the same Form Field Wrapper, positioning it next to the input (typically to the right).
• Inside the Link Block, add an Image or an Icon (e.g., SVG) that visually represents your intent (like a help icon or envelope).
• Set the Link URL to the desired destination or use # for no action.

​

3. Use Relative and Absolute Positioning

​

• Select the Form Field Wrapper, and set its position to Relative.
• Then select the Link Block with the icon and set its position to Absolute (e.g., top right or center vertically on the right).
• Adjust margins/padding to ensure alignment.

​

4. Adjust Form Field Padding (If Needed)

​

• If the icon overlaps the input text, increase the right padding on the input field to make room for the icon.
• This ensures that text within the input does not clash visually with the icon.

​

5. Make It Responsive

​

• In Tablet and smaller breakpoints, check if the input and icon still align properly.
• Adjust icon size or position accordingly for smaller screens.

​

Summary

​

To add an icon link next to a Webflow form input, place a Link Block with an icon inside the Form Field Wrapper, use absolute positioning to place it, and modify the input's padding as needed. This gives you a visually integrated icon that can act as a clickable help tip or redirect.