[Gelöst] Trying to build up a 4-5 pages form with clickable images

[Author]

Artikel

[jorg-andreasK]

Hi there,...

I am trying to find out, weather CRED is the right tool for me to build up a 4-5 pages Form. All the Questions asked have images to choose the relevant infomations.

Here is an example from a different industry which is created with clickable images for the first pages, collecting necessary data with text fields only on the last page:
versteckter Link

But of course the choices of the first pages need to be part of the form as well.

Is Toolset with CRED the right tool to achieve this? Most importantly I want to the user to click for choices (images) until the end of the Form, where he needs to fill out a bit of data only.

I do not have any idea to start with. How do my thoughts have to move on?

First page is a Choice

[Nigel]

Hi there

I would say the key question is whether each of these screens is simply collecting data that will be submitted along with the data to be collected on the final screen, or whether there is a lot of logic where the choices on slide 3 depend on what was selected on slide 2 which in turn depended on what was chosen in slide 1 etc.

With the first it should be reasonably straight-forward, but you'll want to be pretty good with CSS to make something like the demo in your link. CRED forms don't include much more than basic form styling, and it will be down to your CSS to make it look like something that isn't obviously a form.

Even with the second it may still be possible, but depending on the logic the form could be pretty complex. Because this will be a single long form where you selectively reveal certain sections at a time, rather than, say, a simple first form that uses ajax to pull in the contents of the second slide based upon your first choice, etc.

So, first you would create the long form with all of the fields in the order they will appear in the final result.

I would worry about the functionality first, then come to the styling.

Taking your link as an example, the first slide would be a radio field where the user chooses one option.

You can then use conditional display to show other fields for the second slide, as described here: https://toolset.com/documentation/user-guides/conditional-display-for-form-inputs/

In a simple form you will be displaying slide 2 whenever any selection in the first radio field is made.

In the more logically complex form, you would have alternative sections for slide 2 that would be revealed according to the choice made in slide 1.

So you would build your form like that, until you reach the final slide where more data is collected and your users submit. All the fields, including from the earlier slides, would be submitted with the form.

Then you can move on to styling radio buttons as images, for example (Google will be your friend here if you are not sure how to do this).

[jorg-andreasK]

Hi Nigel,...

And Thanks for your soon reply.

I don´t mind woking on HTML with CSS,... but I am still unsure weather this project is still possible with CRED.

I linked a PDF File showing a detailed flowchart of what I want to realize (partly in english): versteckter Link

You might see, that all data is only a collection of data. At this point there is no conditional output needed.

Do you still believe it is possible, and das it make sense for you to use CRED in this case?

Jörg

[Nigel]

Hi Jörg

I looked at the flowchart and, although long, it seems simple enough, in that the question on the third slide doesn't depend on what was chosen in the second slide, etc.

So I think you can do this with CRED using conditional display as described in the link I shared above. The test in each condition would be whether a selection had been made in the previous step, so that once it had the next step would be exposed.

How nice it appears visually will depend very much on your CSS skills, as CRED forms have only rudimentary styling by default.

An alternative method for multi-step forms with CRED—given that this is a simple form, would work like this:

The first slide is a CRED form to publish a post, which contains just the initial field the user must select.

When they make the selection the form is submitted and it creates a post with that field stored, and then it redirects to a second form which is a post edit form that edits the original post but which only includes the fields you require for the second slide.

When the selection is made on that slide, the form submits and redirects to a third form which is a post edit form that edits the post and includes only the fields required for the third slide, and so on.

You chain together an initial create post form and then a series of post edit forms.

There are a couple of points to bear in mind with this approach in your specific case.

The first slide will contain only a field (probably a radio field), but when creating a post the form must include the post title, so you will need to automatically generate a title and hide the title field with CSS.

Also, each slide won't have a submit button for the form, so you will need to programmatically submit the form with JavaScript once the field selection has been made.

Either approach would work, you can choose whichever you are more comfortable with.

[jorg-andreasK]

Hi Nigel,...

Thanks for your reply again.

I guess, that everything sound logically to me in terms of the different slides... and I am actually working on this.

The only crack for me will be the button to move to the next slide and maybe "back" additionally.

You mentioned JavaScript. I am well with HTML and CSS, but unfortunately I am not experienced in JavaScript.
Can you provide me a bit more on that,... just to find out in google,... what I have to do?
I am a "learning by doing guy", anyway.

Thx and all the best from Germany

Jörg

[Nigel]

Hi Jörg

You have jQuery available to you, so you can use .change() to detect when an input changes (i.e. the user has selected a value) and .submit() to then programmatically submit the form.

versteckter Link
versteckter Link

You can add your custom JS to the JS editor of your form.

To be able to use the $ syntax for jQuery as you will see in any documentation you read use the following format to add your JS:

( function( $ ) {
	$( document ).ready( function(){
		// Your code here

	});
})( jQuery );

[jorg-andreasK]

Hi Nigel,...

May I ask you to leave this ticket open? I am actually working on this issue,... and I will need additional help soon in a couple of days.

Thx
Jörg

[Nigel]

No problem, I will set the status as needing further info from you...