Contact form con flex, grid, y js

Community feedback

• 

  Aakash Verma•9,520

  @skyv26Posted 2 months ago

  Hi @MolinaEf 👋,

  I’ve reviewed the provided code and JS logic. Below are my observations and suggestions for improvements, along with actionable feedback. Let me know if you have any questions or need further clarification! 😊

  ---

  HTML Feedback

  1. Error Message Positioning:

     • Current setup disturbs the page flow when error messages are displayed.
     • Suggestion: Position the error messages absolutely within their respective labels. This ensures a smoother user experience without disrupting the layout.

  2. Radio Button Accessibility:

     • Clicking the circular dots works, but clicking the text doesn’t activate the radio buttons.
     • Suggestion: Wrap the <input> and its <label> directly without using <div>. This makes the entire text area clickable, improving usability.

  ---

  JavaScript Improvements

  Your current JS logic can be refactored for better readability and reduced complexity. Here's a more compact and DRY version:

  document.querySelector('form').addEventListener('submit', handleSubmit);
  
  function handleSubmit(e) {
      e.preventDefault();
      const errors = validateForm();
  
      if (Object.keys(errors).length === 0) {
          showToast();
      } else {
          displayErrors(errors);
      }
  }
  
  function validateForm() {
      const errors = {};
      const fields = {
          firstName: 'First Name',
          lastName: 'Last Name',
          email: 'Email Address',
          message: 'Message'
      };
  
      // Validate text inputs and textarea
      Object.keys(fields).forEach((field) => {
          const input = document.getElementById(field);
          const error = document.getElementById(`${field}-error`);
          if (!input.value.trim()) {
              errors[field] = `${fields[field]} is required`;
              setErrorState(input, error, true);
          } else {
              setErrorState(input, error, false);
          }
      });
  
      // Validate email format
      const emailInput = document.getElementById('email');
      if (!errors.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value)) {
          errors.email = 'Invalid email address';
          setErrorState(emailInput, document.getElementById('invalid-email-error'), true);
      }
  
      // Validate radio buttons
      const radioChecked = Array.from(document.querySelectorAll('input[name="radio"]')).some(r => r.checked);
      setErrorState(
          null,
          document.getElementById('radio-error'),
          !radioChecked,
          radioChecked ? '' : 'Please select a query type'
      );
  
      // Validate checkbox
      const checkbox = document.getElementById('checkbox');
      setErrorState(
          null,
          document.getElementById('checkbox-error'),
          !checkbox.checked,
          checkbox.checked ? '' : 'Please consent to being contacted'
      );
  
      return errors;
  }
  
  function setErrorState(input, errorElement, isError, message = '') {
      if (input) input.classList.toggle('red', isError);
      if (errorElement) {
          errorElement.textContent = message;
          errorElement.classList.toggle('hide', !isError);
      }
  }
  
  function displayErrors(errors) {
      console.error('Validation Errors:', errors);
  }
  
  function showToast() {
      document.querySelector('.toast').classList.add('show'); // Add a show class for toast display
  }
  

  ---

  Why These Changes?

  1. Compact Logic:

     • Removed repetitive code by using reusable setErrorState() for managing input and error states.
     • Grouped validation logic for better readability.

  2. Improved Readability:

     • Object mapping (fields) makes it easy to add or remove fields in the future.

  3. Better User Feedback:

     • Directly updates the UI for each validation error, ensuring errors are clear and actionable.

  ---

  CSS Suggestions

  1. Position Error Messages Absolutely:
     • Add the following CSS for error messages to appear within the label:

       label {
           position: relative;
       }
       .error {
           position: absolute;
           top: 100%; /* Adjust based on spacing */
           left: 0;
           color: red;
           font-size: 0.9em;
       }
       

  2. Radio Button Usability:
     • Modify the HTML and CSS to ensure the entire text is clickable:

       <label>
           <input type="radio" name="radio" value="1">
           General Enquiry
       </label>
       

       label {
           display: flex;
           align-items: center;
           cursor: pointer;
       }
       input[type="radio"] {
           margin-right: 0.5em;
       }
       

  ---

  Let me know how these suggestions work out! 🚀

  0