Image button

[Filip_Kostic]

Hi,

I want to make a step by step form where the user is prompted 2 choices when than 2 new ones etc. i understand how to do that but what is bugging me is that i dont know how to make an image thats is actualy a form submit button (i want to record the users choices to a table ofc!).
Any help with that button would be appreciated.

*i will upload an example from figma

[baub]

couldn’t you just use an onclick="" on the image and then run the server connect? or add it to array or variable from the onclick?

[famousmag]

Hey @Filip_Kostic,

Not sure if I got it right…

Have you watched this tutorial?

Creating Multi Steps Forms

Got a long form on your website? Break it up into smaller logical sections and convert it into a multi-step form easily. In this tutorial we will show you a very basic form, but you can extend it as per your requirements adding more inputs, using different layout etc. Creating a Variable First we need to add a variable on our page. This variable will control the active step in our form. In the App Structure panel, add new component: [Screenshot_1] Open the Data menu and select Variable: […

There is ONLY one submit button, on the last step.

If this last step’s button (submit) you want to be an image add this <input> element inside your form:
<input type="image" src="assets/images/defaultThumb_200-200.webp" alt="Submit" role="button" width="50" height="50">

type=“image” is the keyword for submitting the form.

**OF COURSE @baub’s solution is perfect

[Filip_Kostic]

Ohh that would be a perfect solution. Im new to using wappler so some of those basic solutions dont come to mind immediately.
Thanks

[Filip_Kostic]

I am following that exact tutorial!
@baub solutions works. Im sure yours does as well but the less i dable in code the better
Thanks!

[famousmag]

Baub’s solution works on every element… In any place of the place…
Just add a click event on any element and assign a form.submit() on it.