Does anybody knows how the Sign-up to Webflow form fiels with an icon as link is done? In forms only buttons with text can be made in webflow, or isnt that true?
Here a screenshot, I mean that arrow which is pointing to the right top. Hows that done?
Thanks a lot for your help! Wanted to do a similar form field with no text button but couldnt figure out how to do it…
Regular form - with one email field (without label)
- a - form
- b - button with arrow
A.1. Set form to display
± the result you want (Important flex for the
form not for the
form-block(The parent of form))
A.2. Text feild Remove margin bottom
The result you want (Now only change colors/padding/size of button - the email field width always match (flexbox))
B.1. remove button text (value)
Click spacebar (Inside the feild --> empty value). Now the Button is empty - the size set by webflow core padding styles
padding: 9px 15px;
B.2. set width for the button (by padding r/l or width)
B.3. Set background image for the button:
B.3.1 - set background image
SVG because the arrow is very small
B.3.2. Change arrow
B.3.3. I want button in a 60px sqaure?
In my case i set the height of the text-feild to
So the width of the button should be 60px (30px right - 30px left padding)==> sqaure
Accessible icon buttons
For most buttons, this name will be the same as the text inside the button. In some cases, for example for icon buttons, the accessible name can be provided through an
aria-labelledby attribute. mozilla developer
The button without value ==> add custom attribute (For screen readers)
@Siton_Systems Oh nice thank you very much, I once imagined the way you did it via background. But didn’t worked well. Maybe I will need to give it another try! Thank you for your help!