Skip Navigation

[Résolu] Enroll button without showing the form to the user

Ce fil est résolu. Voici une description du problème et la solution proposée.

Problem: I would like to preselect a value in a hidden select field in Forms, and I would like to use a button element I created in Elementor to trigger a new post Form submission from a hidden Form.

Solution: Unfortunately there is no integration between the Elementor Button widget and Forms, so there's not an easy way to trigger a Toolset Forms submission using a button widget provided by Elementor. Instead, you can show a Submit button created in Forms.

To preselect a value in a Forms select field, using the drag-and-drop Form builder, you can open the settings for that select field and use the default value setting to specify which option value should be selected. In the Field Group editor, you can find the corresponding values for each option. Copy the value from the Field Group editor page into the default value option of the Form field configurations. See default-value.png for an example.

To hide the select field, drag one custom HTML content block above the select field and drag another custom HTML block below the select field. In the top HTML block, enter the HTML code as follows:

<div style="display:none;">

In the lower HTML block, enter the HTML code as follows:

</div>

That will wrap the select field in a hidden container.

To style the Submit button using your own custom CSS, you can open the Submit button configurations and add custom CSS classes as shown in custom-css-classes.png. Then add your own custom CSS styles targeting those class selectors in the Form's CSS editor.

Relevant Documentation:
https://toolset.com/course-lesson/front-end-forms-for-adding-content/
https://toolset.com/course-lesson/styling-front-end-forms/

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 2 réponses, has 2 voix.

Last updated by jamesH-3 Il y a 10 mois et 3 semaines.

Assigned support staff: Christian Cox.

Auteur
Publications
#1860347

Hi Jamal

Just following on from my previous ticket.

I have created a Courses CPT, then a Courses Statuses CPT (with a one to many relationship) , with select options of Not enrolled, Enrolled and Completed.

I then created a form for the Courses Statuses.

I am using Elementor Template builder. I would like to use the Elementor Button widget. When clicked, I would like a new Courses Status post with Enrolled option already selected  to be submitted, without showing the form to the user.

How can I  achieve this?

Thanks

#1860763
custom-css-classes.png
default-value.png

Hello, unfortunately there is no integration between the Elementor Button widget and Forms, so there's not an easy way to trigger a Toolset Forms submission using a button widget provided by Elementor. That would involve custom scripting that falls outside the scope of support we offer here. Instead, I can show you how to include in a Toolset Form a hidden select field, with some option automatically preselected, and show only a single submit button, from Forms, to the front-end User. I can also show you how to apply your own custom CSS to style the button if you'd like to customize the design of the button programmatically.

To preselect a value in a Forms select field, using the drag-and-drop Form builder, you can open the settings for that select field and use the default value setting to specify which option value should be selected. In the Field Group editor, you can find the corresponding values for each option. Copy the value from the Field Group editor page into the default value option of the Form field configurations. See default-value.png for an example.

To hide the select field, drag one custom HTML content block above the select field and drag another custom HTML block below the select field. In the top HTML block, enter the HTML code as follows:

<div style="display:none;">

In the lower HTML block, enter the HTML code as follows:

</div>

That will wrap the select field in a hidden container.

To style the Submit button using your own custom CSS, you can open the Submit button configurations and add custom CSS classes as shown in custom-css-classes.png. Then add your own custom CSS styles targeting those class selectors in the Form's CSS editor.

Let me know if you have additional questions about that.

#1871077

Thanks Christian. Your advice has been very helpful.