Umbraco Forms

Adding support for Umbraco forms


Example Form

      
        <form action="#" enctype="multipart/form-data" id="form52a2e8c847a64159abbfddf1fcb4f319" method="post">
    <div class="umbraco-forms-page" id="ef979d36-15f1-4690-a1b0-f94b8e5a3dbc">
      <fieldset class="umbraco-forms-fieldset" id="57d8cd6e-08a3-4d65-92e0-800fa752f2d0">
        <div class="row-fluid">
          <div class="umbraco-forms-container col-md-12">
            <div class="umbraco-forms-field fullname shortanswer mandatory ">
              <label for="d8386de1-9325-4393-88ac-35e39f65dbf7" class="umbraco-forms-label">Full Name </label>
              <div class="umbraco-forms-field-wrapper">
                <input type="text" name="d8386de1-9325-4393-88ac-35e39f65dbf7" id="d8386de1-9325-4393-88ac-35e39f65dbf7" data-umb="d8386de1-9325-4393-88ac-35e39f65dbf7" class="text " value="" maxlength="255" data-val="true" data-val-required="Please provide a value for Full Name" aria-required="true">
                <span class="field-validation-valid" data-valmsg-for="d8386de1-9325-4393-88ac-35e39f65dbf7" data-valmsg-replace="true" role="alert"></span>
              </div>
            </div>
            <div class="umbraco-forms-field message longanswer alternating ">
              <label for="839d1491-d368-4157-86b5-fb49eec157dd" class="umbraco-forms-label">Message </label>
              <div class="umbraco-forms-field-wrapper">
                <textarea class="" name="839d1491-d368-4157-86b5-fb49eec157dd" id="839d1491-d368-4157-86b5-fb49eec157dd" data-umb="839d1491-d368-4157-86b5-fb49eec157dd" rows="2" cols="20"></textarea>
                <span class="field-validation-valid" data-valmsg-for="839d1491-d368-4157-86b5-fb49eec157dd" data-valmsg-replace="true" role="alert"></span>
              </div>
            </div>
            <div class="umbraco-forms-field date ">
              <label for="9ea0c12f-2d05-455f-e238-3bc2e589a307" class="umbraco-forms-label">Date </label>
              <div class="umbraco-forms-field-wrapper">
                <input type="hidden" name="9ea0c12f-2d05-455f-e238-3bc2e589a307" id="9ea0c12f-2d05-455f-e238-3bc2e589a307_1" class="datepickerfieldshadow" value="" data-umb="9ea0c12f-2d05-455f-e238-3bc2e589a307">
                <input type="text" name="9ea0c12f-2d05-455f-e238-3bc2e589a307" id="9ea0c12f-2d05-455f-e238-3bc2e589a307" class="datepickerfield" autocomplete="off" value="" aria-label="Use the arrow keys to pick a date">
                <span class="field-validation-valid" data-valmsg-for="9ea0c12f-2d05-455f-e238-3bc2e589a307" data-valmsg-replace="true" role="alert"></span>
              </div>
            </div>
            <div class="umbraco-forms-field state dropdown alternating ">
              <label for="e5cdb79b-ab39-41b7-ff6b-01bc1dcb04f3" class="umbraco-forms-label">State </label>
              <div class="umbraco-forms-field-wrapper">
                <select class="" name="e5cdb79b-ab39-41b7-ff6b-01bc1dcb04f3" id="e5cdb79b-ab39-41b7-ff6b-01bc1dcb04f3" data-umb="e5cdb79b-ab39-41b7-ff6b-01bc1dcb04f3">
                  <option value=""></option>
                  <option value="New Hampshire">NH</option>
                  <option value="Massachusetts">MA</option>
                  <option value="New York">NY</option>
                  <option value="California">CA</option>
                  <option value="Connecticut">CT</option>
                </select>
                <span class="field-validation-valid" data-valmsg-for="e5cdb79b-ab39-41b7-ff6b-01bc1dcb04f3" data-valmsg-replace="true" role="alert"></span>
              </div>
            </div>
            <div class="umbraco-forms-field passwordfieldnotsurewhatthisdoes password ">
              <label for="bbadde51-9feb-46b4-e031-41c159582ad4" class="umbraco-forms-label">Password field (not sure what this does) </label>
              <div class="umbraco-forms-field-wrapper">
                <input type="password" name="bbadde51-9feb-46b4-e031-41c159582ad4" id="bbadde51-9feb-46b4-e031-41c159582ad4" data-umb="bbadde51-9feb-46b4-e031-41c159582ad4" spellcheck="false" class=" text" value="">
                <span class="field-validation-valid" data-valmsg-for="bbadde51-9feb-46b4-e031-41c159582ad4" data-valmsg-replace="true" role="alert"></span>
              </div>
            </div>
          </div>
        </div>
      </fieldset>
  
      <fieldset class="umbraco-forms-fieldset" id="a8cc85d8-d117-4197-c313-fc0420c9780b">
        <div class="row-fluid">
          <div class="umbraco-forms-container col-md-6">
            <fieldset class="umbraco-forms-field multiplechoice alternating ">
              <legend class="umbraco-forms-legend">Multiple choice </legend>
              <div class="umbraco-forms-field-wrapper">
                <div class="checkboxlist checkboxlist-vertical" id="ec2a476b-4de8-48eb-b981-edc823285bb2" data-umb="ec2a476b-4de8-48eb-b981-edc823285bb2">
                  <div>
                    <input type="checkbox" class="" name="ec2a476b-4de8-48eb-b981-edc823285bb2" id="ec2a476b-4de8-48eb-b981-edc823285bb2_0" data-umb="ec2a476b-4de8-48eb-b981-edc823285bb2_0" value="Option 1">
                    <label for="ec2a476b-4de8-48eb-b981-edc823285bb2_0">Option 1</label>
                  </div>
                  <div>
                    <input type="checkbox" class="" name="ec2a476b-4de8-48eb-b981-edc823285bb2" id="ec2a476b-4de8-48eb-b981-edc823285bb2_1" data-umb="ec2a476b-4de8-48eb-b981-edc823285bb2_1" value="Option 2">
                    <label for="ec2a476b-4de8-48eb-b981-edc823285bb2_1">Option 2</label>
                  </div>
                  <div>
                    <input type="checkbox" class="" name="ec2a476b-4de8-48eb-b981-edc823285bb2" id="ec2a476b-4de8-48eb-b981-edc823285bb2_2" data-umb="ec2a476b-4de8-48eb-b981-edc823285bb2_2" value="Option 3">
                    <label for="ec2a476b-4de8-48eb-b981-edc823285bb2_2">Option 3</label>
                  </div>
                  <div>
                    <input type="checkbox" class="" name="ec2a476b-4de8-48eb-b981-edc823285bb2" id="ec2a476b-4de8-48eb-b981-edc823285bb2_3" data-umb="ec2a476b-4de8-48eb-b981-edc823285bb2_3" value="Option 4">
                    <label for="ec2a476b-4de8-48eb-b981-edc823285bb2_3">Option 4</label>
                  </div>
                </div>
                <span class="field-validation-valid" data-valmsg-for="ec2a476b-4de8-48eb-b981-edc823285bb2" data-valmsg-replace="true" role="alert"></span>
              </div>
            </fieldset>
          </div>
          <div class="umbraco-forms-container col-md-6">
            <fieldset class="umbraco-forms-field howdidyouhearaboutus singlechoice ">
              <legend class="umbraco-forms-legend">How did you hear about us </legend>
              <div class="umbraco-forms-field-wrapper">
                <div class=" radiobuttonlist radiobuttonlist-vertical" id="f89e1f9f-ae48-48b1-831f-acbdcb3980fd" data-umb="f89e1f9f-ae48-48b1-831f-acbdcb3980fd">
                  <div>
                    <input type="radio" name="f89e1f9f-ae48-48b1-831f-acbdcb3980fd" id="f89e1f9f-ae48-48b1-831f-acbdcb3980fd_0" data-umb="f89e1f9f-ae48-48b1-831f-acbdcb3980fd_0" value="LinkedIn">
                    <label for="f89e1f9f-ae48-48b1-831f-acbdcb3980fd_0">LinkedIn</label>
                  </div>
                  <div>
                    <input type="radio" name="f89e1f9f-ae48-48b1-831f-acbdcb3980fd" id="f89e1f9f-ae48-48b1-831f-acbdcb3980fd_1" data-umb="f89e1f9f-ae48-48b1-831f-acbdcb3980fd_1" value="Indeed">
                    <label for="f89e1f9f-ae48-48b1-831f-acbdcb3980fd_1">Indeed</label>
                  </div>
                  <div>
                    <input type="radio" name="f89e1f9f-ae48-48b1-831f-acbdcb3980fd" id="f89e1f9f-ae48-48b1-831f-acbdcb3980fd_2" data-umb="f89e1f9f-ae48-48b1-831f-acbdcb3980fd_2" value="Zip Recruiter">
                    <label for="f89e1f9f-ae48-48b1-831f-acbdcb3980fd_2">Zip Recruiter</label>
                  </div>
                </div>
                <span class="field-validation-valid" data-valmsg-for="f89e1f9f-ae48-48b1-831f-acbdcb3980fd" data-valmsg-replace="true" role="alert"></span>
              </div>
            </fieldset>
          </div>
        </div>
      </fieldset>
      <fieldset class="umbraco-forms-fieldset" id="8e3ae64a-b61a-4985-a31c-4eb4fcf2bdfe">
        <div class="row-fluid">
          <div class="umbraco-forms-container col-md-12">
            <div class="umbraco-forms-field additionalinfo titleanddescription alternating ">
              <label for="68df98ad-dd82-4652-a4b7-184b67596952" class="umbraco-forms-label umbraco-forms-hidden">Additional Info </label>
              <div class="umbraco-forms-field-wrapper">
                <div id="68df98ad-dd82-4652-a4b7-184b67596952" data-umb="68df98ad-dd82-4652-a4b7-184b67596952" class="">
                  <h3>Resume</h3>
                  <p>Lorem ipsum dolor sit amet, ei nam odio percipitur, sale inermis detraxit eum no. Cu tale erant
                    ridens vel, ei cum appareat efficiendi quaerendum, vim ne veri modus imperdiet. Ex diam invenire
                    consetetur vel, eum insolens interesset ut. Ad novum aliquam pertinacia nam, qui at dicant quodsi, per
                    delenit corrumpit assentior in.</p>
                </div>
                <span class="field-validation-valid" data-valmsg-for="68df98ad-dd82-4652-a4b7-184b67596952" data-valmsg-replace="true" role="alert"></span>
              </div>
            </div>
            <div class="umbraco-forms-field resume fileupload mandatory ">
              <label for="cf595a83-94a6-4ef5-deab-04f6109976dc" class="umbraco-forms-label">Resume </label>
              <div class="umbraco-forms-field-wrapper">
                <input type="file" name="cf595a83-94a6-4ef5-deab-04f6109976dc" id="cf595a83-94a6-4ef5-deab-04f6109976dc" data-umb="cf595a83-94a6-4ef5-deab-04f6109976dc" data-val="true" data-val-required="Please provide a value for Resume">
                <span class="field-validation-valid" data-valmsg-for="cf595a83-94a6-4ef5-deab-04f6109976dc" data-valmsg-replace="true" role="alert"></span>
              </div>
            </div>
            <div class="umbraco-forms-field richtexteditor richtext alternating ">
              <label for="f71dcbba-5772-4ae8-be45-cf55720d2c6a" class="umbraco-forms-label umbraco-forms-hidden">Rich text editor </label>
              <div class="umbraco-forms-field-wrapper">
                <div id="f71dcbba-5772-4ae8-be45-cf55720d2c6a" data-umb="f71dcbba-5772-4ae8-be45-cf55720d2c6a" class="">
                  <p>Lorem ipsum dolor sit amet, ei nam odio percipitur, sale inermis detraxit eum no. Cu tale erant
                    ridens vel, ei cum appareat efficiendi quaerendum, vim ne veri modus imperdiet. Ex diam invenire
                    consetetur vel, eum insolens interesset ut. Ad novum aliquam pertinacia nam, qui at dicant quodsi, per
                    delenit corrumpit assentior in.</p>
                </div>
                <span class="field-validation-valid" data-valmsg-for="f71dcbba-5772-4ae8-be45-cf55720d2c6a" data-valmsg-replace="true" role="alert"></span>
              </div>
            </div>
            <div class="umbraco-forms-field doyouconsenttoyourdatabeingstored dataconsent mandatory ">
              <label for="d776b9ee-4f64-478f-9e9f-de3bcd37df17" class="umbraco-forms-label">Do you consent to your data being stored.... </label>
            </div>
            <div class="umbraco-forms-field checkthisbox checkbox mandatory alternating ">
              <label for="b0c7ad4c-9399-4f22-b6fc-85b284b9bee3" class="umbraco-forms-label">Check this box </label>
              <span id="b0c7ad4c-9399-4f22-b6fc-85b284b9bee3_description" class="umbraco-forms-tooltip help-block">Lorem
                ipsum dolor sit amet, ei nam odio percipitur, sale inermis detraxit eum no. Cu tale erant ridens vel, ei
                cum appareat efficiendi quaerendum, vim ne veri modus imperdiet. Ex diam invenire consetetur vel, eum
                insolens interesset ut.</span>
              <div class="umbraco-forms-field-wrapper">
                <input type="checkbox" name="b0c7ad4c-9399-4f22-b6fc-85b284b9bee3" id="b0c7ad4c-9399-4f22-b6fc-85b284b9bee3" value="true" data-umb="b0c7ad4c-9399-4f22-b6fc-85b284b9bee3" data-val="true" data-val-requiredcb="Please provide a value for Check this box" aria-required="true" aria-describedby="b0c7ad4c-9399-4f22-b6fc-85b284b9bee3_description">
                <input type="hidden" name="b0c7ad4c-9399-4f22-b6fc-85b284b9bee3" value="false">
                <span class="field-validation-valid" data-valmsg-for="b0c7ad4c-9399-4f22-b6fc-85b284b9bee3" data-valmsg-replace="true" role="alert"></span>
              </div>
            </div>
            <input type="hidden" name="aafc52cb-63b7-4f61-8ac4-003882878587" id="aafc52cb-63b7-4f61-8ac4-003882878587" data-umb="aafc52cb-63b7-4f61-8ac4-003882878587" class="hidden" value="https://app.clickup.com/t/8687z6r1b">
          </div>
        </div>
      </fieldset>
      <div class="umbraco-forms-navigation row-fluid">
        <div class="col-md-12">
          <input type="submit" class="btn primary btn-8ba1eecc0141477d9727fae466afd397" value="Submit" name="__next" data-form-navigate="next" data-umb="submit-forms-form">
        </div>
      </div>
    </div>
  </form>