form.html

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UCC Microsite</title>
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
  <!-- start HERO blade-->
  <div class="grid-container full">
    <div class="large-8 cell">
      <a href="https://placeholder.com"><svg class="placeholder" width="100%" height="600px"></svg></a>
    </div>
  </div>
    <!-- end HERO blade-->
      <!-- start VALUE PROP blade-->
  <div class="grid-container full">
    <div class="grid-x grid-padding-x grid-padding-y">
      <div class="large-6 large-offset-2 cell">
        <h1>Work is no longer a place. It’s wherever you happen to be.</h1>
      </div>
      <div class="large-6 large-offset-2 cell">
        <p>Give your workforce instant access to the communication and collaboration tools they need to get the job done&mdash;from virtually anywhere, on any device.</p>
        <p>Answer three short questions to see how specific combinations of Verizon advanced communications solutions&mdash;from Spark, WebEx and UCCaaS to Jabber, VCE and One Talk&mdash;can help your organization unleash collaboration, unlock productivity&mdash;and drive innovation.</p>
        <p>With the collaboration tools and applications from Verizon, organizations can streamline business processes and operations&mdash;and gain the speed, agility and flexibility needed to take advantage of business opportunities and to gain a competitive edge.</p>
      </div>
    </div>
  </div>
      <!-- end VALUE PROP blade-->
    <!-- start VALUE PROP blade-->
    <div class="grid-container full" id="workstats">
      <div class="grid-x grid-padding-y">
        <div class="large-8 large-offset-2 cell">
          <h2>Collaboration starts here.</h2>
          <h3>Tell us how your needs.</h3>
        </div>
      </div>
        <div class="grid-container">
        <form action="result.html" id="prospectprofile">
        <div class="grid-x grid-padding-x">
          <div class="large-8 medium-4 cell">
            <label>What would you like to do?</label>
              <select name="needs" id="needs">
                <option value="" selected disabled hidden>Select one</option>
                <option value="workstream">Simplify Workstream Collaboration for Employees, partners, customers (call, meet, message)</option>
                <option value="realtime">Interested in Real-time Communication and hosted calling services (call)</option>
                <option value="conferencing">Host or Attend Audio/Video Conferencing (meet, message) </option>
              </select>
          </div>
          <div class="large-8 medium-4 cell">
            <label>Where do you conduct business?</label>
              <select name="bizlocation" id="bizlocation">
                <option value="" selected disabled hidden>Select one</option>
                <option value="us">US only</option>
                <option value="global">Globally</option>
                <option value="apac">APAC</option>
                <option value="apac">EMEA</option>
                <option value="Canada">Canada</option>
              </select>
          </div>
          <div class="large-8 medium-4 cell">
            <label>How would you describe your current organization?</label>
              <select name="orgstructure" id="orgstructure">
                <option value="" selected disabled hidden>Select one</option>
                <option value="multibranch">Corporate Headquarters with Multiple Branch Office /Retail Locations(s)</option>
                <option value="distributed">Corporate Headquarters with distributed Mobile Work Force</option>
                <option value="multismall">Corporate Headquarters with Multiple Smaller Office, Branch Offices and Mobile workforce</option>
              </select>
          </div>
        </div>
        <div class="grid-x grid-padding-x">
          <div class="large-4 medium-4 cell">
            <input class="button" type="submit">
            </input>
          </div>
        </div>
      </form>
        </div>

      </div>
      <!-- end FORM blade-->
      <!-- start CONSULT FORM blade-->
      <div class="grid-container">
        <div class="grid-x grid-padding-y">
          <div class="large-8 medium-8 cell">
            <h3 class="white">Schedule a Free Consultation.</h3>
            <p>Verizon is offering a customized collaboration session for your team. Personalize your consultation by filling out the questions below and improve business productivity and effectiveness.</p>
            <form id="consultationoutput">
              <div class="grid-x grid-padding-x">
                <div class="large-4 medium-4 cell">
                  <label>First Name</label>
                  <input type="text" placeholder="First Name" />
                </div>
                <div class="large-4 medium-4 cell">
                  <label>Last Name</label>
                  <input type="text" placeholder="Last Name" />
                </div>
              </div>
              <div class="grid-x grid-padding-x">
                <div class="large-4 medium-4 cell">
                  <label>Email Address</label>
                  <input type="text" placeholder="Email Address" />
                </div>
                <div class="large-4 medium-4 cell">
                  <label>Phone Number</label>
                  <input type="text" placeholder="Phone Number" />
                </div>
              </div>
              <div class="grid-x grid-padding-x">
                <div class="large-4 medium-4 cell">
                  <label>Title</label>
                  <input type="text" placeholder="Title" />
                </div>
                <div class="large-4 medium-4 cell">
                  <label>Company</label>
                  <input type="text" placeholder="Company" />
                </div>
              </div>
              <div class="grid-x grid-padding-x">
                <div class="large-4 medium-4 cell">
                  <a href="#" class="button">Schedule Consultation</a>
                  </div>
                </div>
            </form>
            </div>
          </div> <!--form-->
        </div>
          <!-- end FORM blade-->
      <!-- end CONSULT FORM blade-->
    <div class="grid-container">
      <div class="grid-x grid-padding-y">
        <footer>
          <p>Information shared on this website is being collected as part of a joint promotion between Cisco and Verizon and may be shared with Verizon, who will use the information in accordance with their privacy policies.</p>
        </footer>
      </div>
    </div>
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/what-input/dist/what-input.js"></script>
    <script src="bower_components/foundation-sites/dist/js/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>