Fake Typeform form

Community resources Show & Tell
1

I was intrigued by Typeform’s assertion that the “one field at a time” method was more engaging to customers. While I haven’t done research on it, I think I would agree with that assertion as far as my own experience with it.

Because I’m trying not to spend money on each and every integration for my website, I thought I’d work up a simple form and see if it worked. It does!

I’m including the share link below. Be aware that the form is very simple… no, “if/then” logic is applied. I also didn’t finish filling out the fake selection choices since it’s not necessary for building purposes nor sharing.

No need to fill in anything, just click the “Next” button to see it work.

There might be a better way to do this, but I thought I’d share some simple interactions to get the ball rolling.

Let me know what you think.
https://preview.webflow.com/preview/cheryl-solutions?preview=5de3950be01cac4aff5167e5c9dfb2e0

3 Likes
2

Well done, I think you have it down pat.

1 Like
3

This is really cool. Is there a way to apply if/then logic?

4

You might want to checkout Tellforms.

Its actually just typeform right down to the UI and logic but without the branding and all. and its OPEN SOURCE… :raised_hands:

https://tellform.com/

2 Likes
5

This IS really cool! Thanks for bringing this thread back up to the top otherwise I’d have never found it :grin:

1 Like
6

There may be a way with JavaScript or another script, but I don’t know how to do it. Glad you like it!

1 Like
7

I’m about to delve into trying this. I’m on a new project for a wedding pianist and I think this would be a great touch for them selecting their wedding date etc for a quote.

Just one question. If they miss some information on the first box will it still flag up at the end when they press submit? Do you think I should integrate in a “back” interaction maybe?

That’s two questions… not one :speak_no_evil:

8

Yes, I should have included a back button, but that would have involved twice as many interactions, and I was just piddling around with it. :slight_smile:
It should flag a missed required field because it’s all inside one form box, just divided into hidden and showing divs.

Good luck!

1 Like
9

Perfect. It’ll be the same interactions in reverse then… sounds simple enough :no_mouth:

If I’ve finished before this thread gets closed I’ll post it here for your feedback! :vulcan:

Mark.

1 Like
10

Well I think I’ve got it…:nerd: it was quite easy to just replicate the interactions and change the classes accordingly. Let me know what you think!

I’m going to create another thread to get feedback on the site so far and UX feedback of the form. I’ll be sure to reference you as the creator!

It doesn’t quite show the missing fields as I’d hoped, so I put a note at the end so the user knows the possible cause if it doesn’t submit.

1 Like
11

Cool! Where’s the link for viewing?

12

:see_no_evil: It’s late!

http://thepianoplayer.webflow.io
Get Quote is where the form is located.

1 Like
13

Very nice job!! I didn’t enter any info in the fields, but it functions beautifully!

I’m going to offer one piece of unsolicited advice… do with it what you will. :slight_smile: Your “scroll down the page” arrow feels like it needs to be a link to the next section. I get that it’s directional, but it looks like it’s begging to be a link that moves the page. Just my two cents.

Again, great job! So happy to see an idea of mine in the real world. I think ultimately, I’ll use Typeform because I need if/then functionality.

14

And, I really like the design of the site. The grand piano breaking the section border is so elegantly simple and beautiful.

15

I’ve changed the arrow, thank you, very good point.
Glad you like the piano positioning, a bit of a happy accident! I’ve played with a lot of functions on this one so I hope it doesn’t seem too gimmicky, I still wanted to try and keep it as simple.

1 Like