I’m trying to make a website that contains a questionnaire form where each question/text field is on a different slide, and you submit all the information at the end.
For example, if I were a private chef,
* Slide 1: What kind of protein do you like (Press Next)
* Slide 2: What culture’s cuisine do you like (Press Next)
* Slide 3: Tell me about your best dining experience (Press Next)
* Slide 4: Any other requests? (Press Submit)
* Results are sent to the business’ email
I want these functionalities
* The ability to swipe back and change your answer
* An progress indicator that shows which slide you are on (like dots on a slider)
* Custom design of what each slide looks like (padding, alignment, element position)
Do you know of any plugin or way to create this on WordPress? I am normally a Webflow user coming from a graphic design background, so I’m not used to how limited WordPress is with creating stuff directly from my imagination.
​
​
[ad_2]
Those are called “conversational forms” – there are several form builder plugins that support that feature eg Fluent forms, WPForms, Formidable Forms.
First of all, it’s possible to create literally anything you want in WordPress as, unlike Webflow, it’s not a closed ecosystem. The only limitation is your skill as a developer.
There are many ways you could achieve what you’re asking. It’s just HTML, CSS, and JavaScript.
If you’re coming from Webflow specifically, you’ll likely feel most at home using something like Bricks Builder. In terms of splitting the form into sections, I can think of 2 potentially elegant solutions;
1. Don’t use a form. Fully style the ‘form’ exactly as you want it and use JavaScript to both animate the steps and save the users choices into session storage (and delete the entry if they click back etc). At the end of the ‘form’ have an actual form with a bunch of hidden fields. Use JavaScript to populate these fields with the values from session storage. So in effect the only real form would be the submit button at the end.
2. Have a traditional multi-step form and add an event listener to simulate movement in the background when the user clicks next / back
Option 1 I think is actually easier and gives you total control over the design (traditional html forms are notoriously clunky to style and will often get overruled by the browser in terms of css)