Container

Form allows a user to create a form out of different form compontents to collect information and send it to a chosen adress.

Github URL
Adobe URL
Source URL
Title
Core Form Container
Content

Core Form Container with Form Text, Form Option, Form Hidden and Form Button as child elements

Result
Newsletter
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
action: /content/usergenerated/core-components-examples/library/form/cq-gen1576161785602/
jcr:lastModifiedBy: admin
jcr:created:
jcr:lastModified:
sling:resourceType: core-components-examples/components/form/container
actionType: foundation/components/form/actions/store
Markup:
<div class="container responsivegrid">
  <form method="POST" action="/content/core-components-examples/library/form/container.html" id="new_form" name="new_form" enctype="multipart/form-data" class="cmp-form aem-Grid aem-Grid--12 aem-Grid--default--12">
    <input type="hidden" name=":formstart" value="/content/core-components-examples/library/form/container/jcr:content/root/responsivegrid/demo_665944747/component/container">
    <input type="hidden" name="_charset_" value="utf-8">
    <div class="text aem-GridColumn aem-GridColumn--default--12">
      <div class="cmp-form-text">
        <label for="form-text-1104835627">E-Mail</label>
        <input class="cmp-form-text__text" data-cmp-hook-form-text="input" type="email" id="form-text-1104835627" placeholder="E-Mail" name="email">
      </div>
    </div>
    <div class="text aem-GridColumn aem-GridColumn--default--12">
      <div class="cmp-form-text">
        <label for="form-text-1788423476">Set Password</label>
        <input class="cmp-form-text__text" data-cmp-hook-form-text="input" type="password" id="form-text-1788423476" placeholder="password" name="pw" required="">
      </div>
    </div>
    <div class="options aem-GridColumn aem-GridColumn--default--12">
      <fieldset class="cmp-form-options cmp-form-options--radio">
        <legend class="cmp-form-options__legend">Newsletter</legend>
        <label class="cmp-form-options__field-label">
          <input class="cmp-form-options__field cmp-form-options__field--radio" name="newsletter" value="true" checked="" type="radio">
          <span class="cmp-form-options__field-description">Do you want to get notified about News and Sales?</span>
        </label>
        <label class="cmp-form-options__field-label">
          <input class="cmp-form-options__field cmp-form-options__field--radio" name="newsletter" value="false" type="radio">
          <span class="cmp-form-options__field-description">No</span>
        </label>
      </fieldset>
    </div>
    <div class="hidden aem-GridColumn aem-GridColumn--default--12">
      <input type="hidden" id="asset-url" name="Asset URl" value="/assets/marketing/q3/female/hiking">
    </div>
    <div class="button aem-GridColumn aem-GridColumn--default--12">
      <button type="SUBMIT" id="form-button-1390778470" class="cmp-form-button" name="register">Register</button>
    </div>
  </form>
</div>
JSON:
{"method":"POST","enctype":"multipart\/form-data","id":"new_form","name":"new_form","action":"\/content\/core-components-examples\/library\/form\/container.html","errorMessages":[],"resourceTypeForDropArea":"wcm\/foundation\/components\/responsivegrid\/new",":itemsOrder":["text","text_854476329","options","hidden","button"],":items":{"text":{"id":"form-text-1104835627","title":"E-Mail","name":"email","value":"","helpMessage":"E-Mail","placeholder":"E-Mail","type":"email","readOnly":false,"required":false,"requiredMessage":"","constraintMessage":"","rows":2,"defaultValue":"",":type":"core-components-examples\/components\/form\/text"},"text_854476329":{"id":"form-text-1788423476","title":"Set Password","name":"pw","value":"","helpMessage":"password","placeholder":"password","type":"password","readOnly":false,"required":true,"requiredMessage":"","constraintMessage":"","rows":1,"defaultValue":"",":type":"core-components-examples\/components\/form\/text"},"options":{"id":"form-options-1655286956","title":"Newsletter","name":"newsletter","type":"RADIO","items":[{"text":"Do you want to get notified about News and Sales?","selected":true,"disabled":false,"value":"true"},{"text":"No","selected":false,"disabled":false,"value":"false"}],":type":"core\/wcm\/components\/form\/options\/v2\/options"},"hidden":{"id":"asset-url","name":"Asset URl","value":"\/assets\/marketing\/q3\/female\/hiking",":type":"core\/wcm\/components\/form\/hidden\/v2\/hidden"},"button":{"id":"form-button-1390778470","title":"Register","name":"register","value":"","type":"SUBMIT",":type":"core\/wcm\/components\/form\/button\/v2\/button"}},":type":"core-components-examples\/components\/form\/container"}
PostCSS: CSS:

By mchavez

Hi, I am Michael Chavez, a web developer based in San Francisco, California. I started Space-Rocket in 2012 to make custom content management systems that are tailored to business needs.

Leave a comment

Your email address will not be published. Required fields are marked *