Skip Navigation

[Resuelto] Enroll button without showing the form to the user

Este hilo está resuelto. Aquí tiene una descripción del problema y la solución.

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 support ticket is created hace 3 años, 9 meses. There's a good chance that you are reading advice that it now obsolete.

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.

Hoy no hay técnicos de soporte disponibles en el foro Juego de herramientas. Siéntase libre de enviar sus tiques y les daremos trámite tan pronto como estemos disponibles en línea. Gracias por su comprensión.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

Este tema contiene 2 respuestas, tiene 2 mensajes.

Última actualización por jamesH-3 hace 3 años, 9 meses.

Asistido por: Christian Cox.

Autor
Mensajes
#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.

Este ticket ya está cerrado. Si eres cliente de Toolset y necesitas ayuda relacionada, abre un nuevo ticket de soporte.