Wrap Number Fields Elementor

1. **Edit the Form**: Open your Elementor editor and select the form you want to edit.

2. **Add a New Section**: If you want to group the number fields together, you might want to create a new section or inner section for them. Drag an "Inner Section" widget into your form.

3. **Move Number Fields**: Drag your number fields into the newly created inner section. This groups them together.

4. **Custom CSS (if needed)**: If you want to specifically target these fields and wrap them in a custom “, you might need to use custom CSS. Here’s how you can do that:
– Go to the **Advanced** tab of the inner section or the individual number fields.
– Add a CSS class, for example, `custom-number-group`.
– Then, in the **Custom CSS** section (available in Elementor Pro), you can write:

.custom-number-group {
       display: flex; /* Or any other display property you want */
       gap: 10px; /* Adjust space between fields */
   }

5. **Save Changes**: After arranging the fields and adding any custom CSS, make sure to save your changes.

### Example HTML Structure
If you are using Elementor Pro and Custom HTML, it might look something like this:

<div class="custom-number-group">
    <input type="number" name="number1" placeholder="Number 1" />
    <input type="number" name="number2" placeholder="Number 2" />
</div>

### Additional Notes
– If you need to do more complex layouts or need further customization, consider using custom HTML or Elementor widgets that allow for more flexible layouts.
– Keep in mind that using custom CSS is a powerful way to control the layout but may require some understanding of CSS for more advanced customizations.

Let me know if you need more specific guidance!

### Using Elementor Widgets

1. **Edit the Form**: Open the Elementor editor and select the form widget you want to edit.

2. **Add an Inner Section**:
– Drag and drop an **Inner Section** widget into your form. This will create two columns within your form.

3. **Move Number Fields**:
– Drag your number fields into one of the columns of the inner section. If you have multiple number fields, you can add more inner sections or columns as needed.

4. **Style the Inner Section**:
– Click on the **Inner Section** widget and go to the **Style** tab to adjust the spacing, alignment, or any other styles to make it look cohesive.

5. **Adjust Column Widths**:
– If you have multiple number fields, you can adjust the column widths by selecting the column handle and modifying the width settings.

### Customizing the Layout

– **Spacing and Alignment**: Use the **Advanced** tab of the Inner Section or individual fields to add padding, margin, or custom CSS classes to control the layout further.

– **Using Elementor's Columns**: Instead of a single “, using Elementor's column layout can help visually group fields together, giving a similar effect.

### Additional Workaround

If you specifically want to wrap certain number fields in a single container for styling purposes but are limited by the Elementor form widget:

1. **Use a Custom CSS Class**:
– In the **Advanced** settings of the inner section or individual fields, add a custom class, e.g., `number-fields-wrapper`.

2. **Custom CSS**:
– Go to your WordPress dashboard and navigate to **Appearance** > **Customize** > **Additional CSS**, and add custom styles for that class:

.number-fields-wrapper {
       display: flex;
       gap: 10px; /* Adjust spacing as needed */
   }

### Important Notes

– While Elementor provides a lot of flexibility, it has some limitations regarding direct HTML editing in certain widgets like forms. Using Inner Sections or Columns is usually the best way to group elements together visually.
– If you need to implement custom code, consider using the HTML widget in conjunction with the form widget if your design allows for it.

If this doesn’t resolve your issue or if you need help with a specific part of the process, feel free to provide more details!

### Using jQuery

If you have jQuery enabled on your site (which is often included by default in WordPress), you can use the following code:

1. **Add Custom Code**:
– Go to your WordPress dashboard.
– Navigate to **Appearance** > **Customize** > **Additional CSS** or use a custom JavaScript plugin to add your script.

2. **Insert jQuery Code**:
– Add the following code to append a new “ after a specific “ with a given class:

jQuery(document).ready(function($) {
       // Select the target div using its class or ID
       var targetDiv = $('.your-target-class'); // Change this to your target div class
       
       // Create a new div with the desired class
       var newDiv = $('<div class="your-new-class">Your content here</div>'); // Change "your-new-class" and content as needed
       
       // Append the new div after the target div
       targetDiv.after(newDiv);
   });

### Using Vanilla JavaScript

If you prefer to use plain JavaScript, you can do the following:

1. **Add Custom Code**:
– Similar to the jQuery method, you can place this code in the **Additional CSS** section or a custom JavaScript file.

2. **Insert JavaScript Code**:
– Add the following code to append a new “ after a specific “:

document.addEventListener('DOMContentLoaded', function() {
       // Select the target div using its class or ID
       var targetDiv = document.querySelector('.your-target-class'); // Change this to your target div class
       
       // Create a new div element
       var newDiv = document.createElement('div');
       newDiv.className = 'your-new-class'; // Change to your desired class
       newDiv.textContent = 'Your content here'; // Change to your desired content
       
       // Append the new div after the target div
       targetDiv.parentNode.insertBefore(newDiv, targetDiv.nextSibling);
   });

### Notes

– **Class Selector**: Replace `your-target-class` with the class of the “ you want to append after, and `your-new-class` with the class for the new “.
– **Content**: Modify `Your content here` with whatever content you want to display in the new “.
– **Location**: If you are using a child theme or a custom plugin, consider placing the JavaScript in a separate file and enqueueing it properly for better performance and organization.

### Testing

– After adding the code, refresh your page to see if the new “ appears after the specified target “. You may need to inspect the HTML structure in your browser’s developer tools to confirm that the elements are being added as expected.

If you encounter any issues or need further adjustments, let me know!