How To Swap Two Form Input ValuesPRO

In this tutorial, we will create a button in WS Form that swaps two WordPress form number input values using a hidden field and conditional logic. This method avoids custom JavaScript by leveraging the powerful features of WS Form.

Demo

Tutorial

Create a New Form

1. In your WordPress dashboard, navigate to WS Form > Add New.
2. Choose the Blank template.
3. Add two Number fields to the form. Label these fields (e.g., Width and Height).
4. Add a Hidden field. Drag and drop a hidden field onto your form. This field will temporarily hold one of the values during the swap. We’ll label it Swap Temporary Value.
5. Add a Custom Button. We’ll use the custom button to initiate the swap. We’ll label it Swap.

Configure Conditional Logic

Now, we’ll set up conditional logic to perform the swap when the button is clicked.

1. Click on the Conditional Logic icon at the top of the layout editor.
2. Create a new condition by clicking the + icon. We’ll label the condition Swap Values.
3. In the IF condition, we add [Custom Button] [Clicked]
4. In the THEN statement will contain three actions:
   1. Set the Swap Temporary Value hidden field to the Width value. We use the WS Form #field variable to insert the value of the Width value.
   2.  Set the Width value to the Length value.
   3. Set the Length value to the Swap Temporary Value hidden field.
5. Click Save & Close.