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:
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/
