Format Form Fields Side by Side

Introduction

When creating forms, aligning fields side by side can enhance both aesthetics and user experience. This is particularly useful in scenarios like a First Name & Last Name input or a Currency Selector.

How does it work?

This article provides a step-by-step guide on positioning form fields side by side, demonstrated using a Currency Selector example.

1. Drag a Select Box and a Text Field into your form layout.
   
2. Configure the Select Box by adding the necessary currency labels and values.
   
   
3. Insert the following jQuery script into a custom HTML element within your form. This script automatically updates the text field based on the selection in the dropdown.
   
   
   Ensure that the jQuery selector name is changed to the respective IDs of your select box and text field; otherwise, the script won't work.

   <script>
   $(document).ready(function() {
     //Set initial value with selected option
     $('input[name="value"]').val($('select[name="selector"]').val() + " ");
        
     $('select[name="selector"]').on('change', function() {
       // Get the selected value from selector
       if ($(this).val() === "USD" || $(this).val() === "POUND") {
           var selectedCurrency = " " + $(this).val();
        
           // Get the current value of currency_field
           var currentValue = $('input[name="value"]').val();
        
           // Set the updated value to currency_field by concatenating the selected currency
           $('input[name="value"]').val(currentValue + selectedCurrency);
       }
       else{
               var selectedCurrency = $(this).val()+ " ";
                
               // Set the updated value to currency_field
               $('input[name="value"]').val(selectedCurrency);
           }
    
     });
   });
    
    </script>

   

4. Click on Select Box
5. Click on Styles Tab
6. Set Default Mode to Display
7. Apply CSS to arrange the select box and text field side by side. This ensures that the layout is both functional and visually appealing.
   • Select Box Styling
     
   • Select Box Element Styling
     
   • Text Field Styling 
     
     
   • Text Field Element Styling
     

     

Expected Outcome

Styling Result:

Check the result:

Download sample app