Multi-step forms

[Crixus]

Hey, everyone!

I’m fairly new to js (and php is even scarier for me atm ), so i wanted to ask some guidance from the experienced web developers. How would one go about creating multi-step (quiz-like) forms in hype? Like this:

luxrentcar.com

There is a button to take the quiz and answer a few questions. Answers to these questions (and choices) then will be send (like form) to an email and you know the rest

Can you, please, point me in a right direction? How can i implement something like that? I’m absolutely sure i can create this form in hype. The visual part at least The problem is everything else, lol. I think this type of form needs js to store values and php code to collect these values and when send them via email. What should i learn? What should i focus on? Can it be done with hype + plus a few extra lines of code?

Would really appreciate your advice!

[MarkHunte]

Have you search the forum.?
This has come up a lot and there is already many examples on site.

Try seraching for either contact form,php or forms

https://forums.tumult.com/search?q=contact%20form

As you note the quiz part is just getting values and posting them bu tI would suggest you look at the examples and see how people have gone over the php part. Read them carfully and pay attention to any security points. I would also do a search on good old google about best practices for php.

[MaxZieb (Loves Hype)]

Here is simple example. It lacks still some checks (like the need to select something or checking if fields are filled etc.). It could certainly be more sophisticated but I think it demonstrates that it’s possible.

Download:
Simple-Configurator-Example.zip

[Crixus]

Wow, i did not expect that Great job!

I’ve fiddled with it a little:

Now all i need is to understand php and js better I’ve enrolled on a few courses to cover that.

Here’s modified hype file if anyone is interested:
Simple-Configurator-Example 2.zip (135.2 KB)

Thanks again, MaxZieb!

[ionutilie (Ionut)]

Thank you @MarkHunte, @MaxZieb, @Crixus.
Could you share, please, how to make this form to send data to an email?
Thank you!

[Kellyn (chegodaev alexander)]

Awesome!!! very cool!
Please help me! - how to make this form to send data to email?

[MaxZieb (Loves Hype)]

Totally forgot about this… just use email on the server side.
https://www.php.net/manual/en/function.mail.php

PS: I saw that there is some sort of animation bug in this file? And it is from a time when there was no dataset fields. Needs rework.

[Kellyn (chegodaev alexander)]

@MaxZieb I tried to do it myself but nothing happens. I really hope for your help with this last step - setting up a php file to submit the form. it’s hard for me. I ask you to help me deal with this example. I am sure that users of the forum will be useful too. when the example is ready with your help - I will collect the instructions in one post and upload an example for the general public with a video clip for other forum users.

[Kellyn (chegodaev alexander)]

happened!
sharing code:

<?php
/* data for your use*/
$data = json_decode($_POST['json'], true);

/* this is not for production only so we can avoid CORS on loval testing */
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header("Access-Control-Allow-Headers: X-Requested-With");

/* return */
header('Content-Type: application/json');

echo ' <b> some text: </b> '; print_r ($data);

// send to
$to = '___@gmail.com'; // your email

// subject
$subject = 'new mail from hype';

$message = print_r($data, true);

// sending
mail($to, $subject, $message);

?>