<div class="home-contact-form">
  <div>
    <div>
      <label for="first-name">First Name</label>[text* first-name autocomplete:name placeholder "Enter First Name"]
    </div>
    <div>
      <label for="last-name">Last Name</label>[text* last-name autocomplete:name placeholder "Enter Last Name"]
    </div>
  </div>
  <div>
    <div>
      <label for="your-email">Email</label>[email* your-email autocomplete:email placeholder "Enter your Email"]
    </div>
    <div class="home-contact-form-telephone">
      <label for="phone-number">Phone Number</label><div><div class="dropdown">
      <div id="selectedCountry" class="selected">
        <p>
          <img src="https://flagpedia.net/data/flags/w580/us.png" class="flag" />
          <span class="arrow down"><svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1.5L7 7.5L13 1.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
        </p>
      </div>
      <div id="dropdownList" class="dropdown-list">
        <input type="text" id="countrySearch" placeholder="Search country..." />
        <div id="countryList" class="options"></div>
      </div>
      <input type="hidden" id="selectedCountryCode" name="country" />
    </div>[tel* phone-number id:phone-number autocomplete:tel placeholder "Enter Phone Number"]</div>
    </div>
  </div>
  <div>
    <label for="your-message">Message</label>[textarea your-message placeholder "Enter your Message"]
  </div>
  <div>
    [checkbox agreement use_label_element "I agree with Terms of Use and Privacy Policy"]
    [submit "Submit Request"]
  </div>
</div>