Auto Selection of Form Controller (Select)

Hi @muneebhabib46

I hope you’re well today and thank you for your kind words. I’m really happy to know that you like our plugin so much!

Now to your questions ??

1. One form for all courses.

Assuming that you are sending that user is going to the form by clicking on some button, it is doable and actually pretty simple.

First you would need to create the select field on the form with all the courses added to it. Then you need to switch to “Settings” tab and at the bottom you’ll see “Pre-populate” option.

There you put some word that will be used as URL parameter, for example write course there.

And finally, you need to edit your course buttons (those that send user to the form) to include that parameter in URL.

By example:

– let’s say that you have two course: “Basic” and “Advanced”
– you add select field with “Basic” and “Advanced” option where for each option accordingly “Labels” are “Basic” and “Advanced” and “Values” are “basic” and “advanced”
– you set course word in “pre-populate” settings
– and the form is on “site.com/form” page

Now if you visit link

site.com/form/?course=basic

you’ll see that “Basic” is already automatically selected. If you visit

site.com/form/?course=advanced

you’ll see that “Advanced” option is selected.

So accordingly you can now use those URLs for your button.

Here is more information on the pre-populate option:

https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#pre-populate-form-field-values

2. “Multi Level Form”

The screenshot shows more of a “paged” form and that is entirely possible out of the box. You just need to add “Page Break” field to the form and drag it to the location where you want to split the form. You can add many of them and you can also then set how the paging will look like (there is similar option as on the screenshot).

Here is more information about it:

https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#page-break

Best regards,
Adam

Hi,

Thanks For Both Of The Solution, The Multi Level Form Is Pretty Much Easy To Understand But The Other Solution is a bit confusing. Please Guide Me Through This. For Example The Page I’m Using To Display The Form Is : https://ngds.ca/program/test/

And I create a select field having all the course names and in the pre-populate parameter I passed “course”. What Will Be The Link To Automatically select the golden plan (option value = golden) option in the select field.

I’m also attaching the export of my form in case you want to have a look at it.
Export Link: https://onlinetextsharing.com/untitled-3698

Looking Forward To Hear From You.
Warm Regards
Muneeb Ullah

Hi @muneebhabib46

I hope you are doing well

You actually did it correctly no further configuration is necessary in your form, for example accessing https://ngds.ca/program/test/?course=3days you will notice the “3 days in car” will be pre-selected.

So in your button, you just need to use that /?course=value

Best Regards
Patrick Freitas

Hi Patrick, Adams
Hope Everyone Is Doing Well The Last Question I’ve on this is, Is There Any Option or Way We Can Display 3 Pictures With Select Option For The User in the Forminator as I Don’t Want To Go To Any Other Plugin Just For This.

I’m attaching a screenshot and a link for the particular example for proper understanding.

Example URL: https://konfigurator.klarsolar.de/?roofArea=0&moduleCount=0

Image URL: https://pasteboard.co/atuG4IlqMZIz.png

Looking Forward To Hear From You Guys.

Warm Regards
Muneeb Ullah

• This reply was modified 1 year, 3 months ago by muneebhabib46.

Hi Patrick, Adams
Hope Everyone Is Doing Well, I Manage to get the required output I requested in the prior request but the issue now I’m facing is that when I’m showing images in a checkbox field the options not showing the name/label which makes very difficult for the user to identify the correct option is there any way I can display the name and description of the option along the images in the checkbox field. I’m Attaching Screenshot For Better Understanding.

Current Output: https://pasteboard.co/0LtJZSG6tw1F.png
Required Output: https://pasteboard.co/1NT5GmUiKgy3.png

Looking Forward To Hear From You Guys.

Warm Regards
Muneeb Ullah

Hi @muneebhabib46,

Hope this message finds you well.

The labels are not being displayed because the Settings >> Checkbox visibility is set to Hide.

You can enable it and use this CSS code to hide the checkboxes and leave the labels:

span.forminator-checkbox-box {
    display: none !important;
}

Let us know the results.

Best regards,
Laura

Hi Laura,
Thank You For The Reply. I Applied The CSS code you provided and facing couple of issues with it.

1- If I Enable the show option my checkboxes with 2 options, images are overlapping.
Screenshot: https://pasteboard.co/H4QWfFO0Bjmd.png

2- After Applying CSS Snippet, The Checkbox of consent field is also disappeared.
Screenshot: https://pasteboard.co/msdPDe35m7P6.png

Please provide me solutions of the above mentioned issues moreover is it possible to add description to every option of checkbox.

Looking forward to hear from you.

Warm Regards
Muneeb Ullah

Hi @muneebhabib46

Thank you for response!

2- After Applying CSS Snippet, The Checkbox of consent field is also disappeared.

Please replace CSS given by Laura with this version

.forminator-field-checkbox span.forminator-checkbox-box {
    display: none !important;
}

This version will only affect actual checkbox field and will keep consent checkbox visible.

1- If I Enable the show option my checkboxes with 2 options, images are overlapping.

This seems to be related to either images or option description length. We’ll need to check the form directly so can you, please, share a link to the page with this form (the one shared earlier doesn’t seem to have such checkboxes on it).

We’ll look into it then.

Best regards,
Adam

Hi Everyone,

Thank You For Your Response, Please Check The Below Link To The Form In Concern. The Page Storage and Invertor are having issues. I’m Also Sharing Export of the form in case you need it for the solution.

Form Export: https://onlinetextsharing.com/form-export
URL: https://solar.steadyecommerce.com/solar-configurator/

Looking forward to hear from you guys.

Warm Regards
Muneeb Ullah

Hi @muneebhabib46

Thanks for the link.

I checked it and the issue here is that with those checkboxes hidden the width of the entire “box” (so a wrapper element that holds entire option – actual checkbox, image and description) starts to depend on the width of the description itself.

On those affected boxes the length of the description text makes it shorter than 255px which is the image width and that causes it to “shrink”.

In this case solution will be to add another small piece of CSS to the site:

label.forminator-checkbox {
	min-width:260px!important;
	word-wrap:normal;
}

This should fix the issue.

Best regards,
Adam