Values from form fields made into components

[xtremeexposures]

Continuing the discussion from Are form variables not visible while the form is in a collection item?:

I have made a custom form element - an input field with an icon at the start. I’ve then turned this into a component.

I’m now trying to use the values entered into the form field component but cannot get them.

I think the attached post relates to how to do this but I’m afraid I just don’t understant it.

Surely there’s an easier way to extract the values from a form element if it becomes a component?

Form field component

The id of the component instance - three others are collecting the email, company name and city (plus a checkbox for marketing consent)

This is the workflow attached to the form container which contains the 4 form field components. I need to collate the data into an object to send to another workflow which passes the data to my email application.

What can I do to get this to work?

[sam1]

In the component you need to create a variable and expose that to outside the component. Then update that on the change of the actual input. another option would be to create a template instead of a component

[xtremeexposures]

Thank you @sam1 this solved my problem.

I had looked into the previously but could not find out how to get the on-change event to push the value into my component variables.

To do this, I followed this process:

1. Create a component variable - in my case ‘value’. Ensure the variable is visible outside the component
2. Create a workflow on the input field itself with an ‘on change’ event
3. The only action in the workflow was to ‘execute a workflow’. Link this to the following component workflow…
4. Create a workflow for the component for an ‘on execution’ event.
5. Give this component workflow a single action to ‘change a component value’.
6. Set the action to change the component variable in step 1 above to the value of the input field.

This should mean that each component instance runs these two workflows whenever their input values change, allowing these values to be exposed outside of the component.