Webflow forms - how to add arrow button next to input?

cedi44 · August 18, 2018, 10:51am

Hi Guys

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…

Best regards,
Cédric

Siton_Systems · August 18, 2018, 12:23pm

Flexbox trick:

Start point

Regular form - with one email field (without label)

How to

a - form
b - button with arrow

A.1. Set form to display `flex`

https://university.webflow.com/article/intro-to-flexbox

± 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))

“submit” arrow

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;

after:

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

use SVG because the arrow is very small

B.3.2. Change arrow `width/height` + `center-center` + `no reapeat`

https://university.webflow.com/article/background-image

B.3.3. I want button in a 60px sqaure?

In my case i set the height of the text-feild to 60px

So the width of the button should be 60px (30px right - 30px left padding)==> sqaure

Finish

Siton_Systems · August 18, 2018, 12:59pm

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-label or aria-labelledby attribute. mozilla developer

The button without value ==> add custom attribute (For screen readers)

aria-label="Email"

or

aria-label="Submit Email"

Related:
https://humanwhocodes.com/blog/2013/04/01/making-accessible-icon-buttons/

cedi44 · August 20, 2018, 1:51pm

@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!