Forms https://sitemasonry.gmu.edu/ en How to...Create and Place a Webform https://sitemasonry.gmu.edu/news/2021-11/how-tocreate-and-place-webform <span>How to...Create and Place a Webform</span> <span><span lang="" about="/user/621" typeof="schema:Person" property="schema:name" datatype="">Kelly Hansen</span></span> <span>Wed, 11/17/2021 - 21:19</span> <div class="layout layout--gmu layout--twocol-section layout--twocol-section--30-70"> <div class="layout__region region-first"> <div data-block-plugin-id="inline_block:call_to_action" data-inline-block-uuid="43207156-cc05-48be-b752-c1368244e537"> <div class="cta"> <a class="cta__link" href="https://sitemasonry.gmu.edu/all-sitemasonry-tutorials"> <h4 class="cta__title">View more SiteMasonry tutorials <i class="fas fa-arrow-circle-right"></i> </h4> <span class="cta__icon"> <div class="field field--name-field-cta-icon field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Icon</div> <div class="field__item"><div> <div class="field field--name-field-media-font-awesome-icon field--type-fontawesome-icon field--label-visually_hidden"> <div class="field__label visually-hidden">Icon</div> <div class="field__item"><div class="fontawesome-icons"> <div class="fontawesome-icon"> <i class="fas fa-info-circle" data-fa-transform="" data-fa-mask="" style="--fa-primary-color: #000000; --fa-secondary-color: #000000;"></i> </div> </div> </div> </div> </div> </div> </div> </span> </a> </div> </div> </div> <div class="layout__region region-second"> <div data-block-plugin-id="inline_block:text" data-inline-block-uuid="11fb09da-6734-481e-a48f-1d87b99e80a1" class="block block-layout-builder block-inline-blocktext"> <div class="field field--name-body field--type-text-with-summary field--label-hidden field__item"><figure class="quote"> <blockquote> <p><strong>Attention:</strong></p> <p>Webforms created using the Drupal Webform Module are <strong>not appropriate</strong> for collecting sensitive information such as:</p> <ul> <li>birth dates</li> <li>test scores</li> <li>application materials</li> <li>payment processing</li> <li>file uploads of any sort</li> <li>social security numbers</li> <li>personally sensitive information</li> <li>any item that may become part of an official record.</li> </ul> <p> </p> <p>Contact the Admissions Tech Team for assistance if you are creating a form for the purposes of collecting information for an admissions-related process.</p> <p> </p> <p>Contact ITS for access to the <a href="https://its.gmu.edu/service/qualtrics/" target="_blank" title="Qualtrics; new tab">Qualtrics secure form building tool</a>, if your form requires file uploads or the collection of personally identifying information (PII) or FERPA protected information related to an academic or administrative process such as a fellowship or scholarship application, or other administrative process.</p> <p> </p> <p><strong>It is every Mason Web Editor's duty and responsibility to be good stewards of our website users' information.</strong></p> </blockquote> </figure> </div> </div> <div data-block-plugin-id="field_block:node:news_release:body" class="block block-layout-builder block-field-blocknodenews-releasebody"> <div class="field field--name-body field--type-text-with-summary field--label-visually_hidden"> <div class="field__label visually-hidden">Body</div> <div class="field__item"><p><span class="intro-text">The Webform builder allows Site Owners to create and place forms on any SiteMasonry page.</span></p> <p><span class="intro-text">Collecting Personal Identifiable Information (PII), documents or images?  Contact ITS for access to the <a href="https://its.gmu.edu/service/qualtrics/" title="Mason ITS Qualtrics Secure Form Building Tool">Qualtrics secure form building tool</a>.</span></p> <h2> </h2> <h2>Create and Place: Webform Basics </h2> <h3>Create a Webform </h3> <p><strong>From the Admin toolbar n</strong>avigate to &gt; Structure &gt; Webforms:</p> <ul><li>At the 'Webforms' page &gt; Click ‘Add Webform’</li> <li>Click ‘Add Element’ to add form elements</li> </ul><p>Of the many element options to choose from, email, phone, text field, and text area are the most commonly used field elements.</p> <p>Webforms may be placed on any SiteMasonry page - Basic or Landing.</p> <div class="align-center" style="min-width: 50%;"> <div class="field field--name-field-media-video-embed-field field--type-video-embed-field field--label-hidden field__item"><div class="video-embed-field-provider-youtube video-embed-field-responsive-video"><iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" src="https://www.youtube.com/embed/ts9_IcqPqPE?autoplay=0&amp;start=0&amp;rel=0"></iframe> </div> </div> </div> <p> </p> <figure class="quote"><blockquote> <p><strong>Want to learn more?  Watch the recommended deep-dive webform video tutorials:</strong> </p> <ul><li><a href="https://youtu.be/ic4wu-iZd4Y" title="Conditional Elements">Conditional Elements</a></li> <li><a href="https://youtu.be/k17W2yH71ak" title="Multi-step Wizards">Multi-step Wizards</a></li> <li><a href="https://youtu.be/magHXd9DNpg" title="Pre-Defined List Options">Pre-Defined List Options</a></li> <li><a href="https://youtu.be/kSzi1J1MyBc?t=162" title="Emailed Submission Confirmation">Emailed Submission Confirmations</a></li> <li><a href="https://youtu.be/edYCWGoLzZk" title="Submission Confirmation Page">Submission Confirmation Page</a></li> </ul></blockquote> </figure><p> </p> <h2>Place a Webform</h2> <p><strong>Navigate to and open the desired page:</strong></p> <ul><li>Click the ‘Customize This Page’ tab</li> <li>Locate, or create, the section to place the webform block in <ul><li>click ‘Add Block’, notice the fly-out sidebar admin menu</li> </ul></li> <li>From the sidebar admin menu <ul><li>select ‘Webform' from the block list (will be close to the bottom of the list) to 'pop-up' the 'Configure Block' screen</li> </ul></li> <li>From the ‘Configure Block’ pop-up <ul><li>Add a name for the block in the title field</li> <li>Use the type-ahead feature in the ‘Webform’ textfield to select form</li> </ul></li> </ul><p><em>In the unlikely event you need to modify the ‘Default webform submission data (YAML)’ or redirect the webform,<a href="https://sitemasonry.gmu.edu/help/report-issue" title="Report and Issue"> please file a support ticket</a> for assistance.</em></p> <ul><li>Click ‘Add Block’</li> <li>Admire your new form! </li> <li>Save the page</li> </ul><p> </p> <div class="align-center" style="min-width: 50%;"> <div class="field field--name-field-media-video-embed-field field--type-video-embed-field field--label-hidden field__item"><div class="video-embed-field-provider-youtube video-embed-field-responsive-video"><iframe width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen" src="https://www.youtube.com/embed/Io4Qf98XNmU?autoplay=0&amp;start=0&amp;rel=0"></iframe> </div> </div> </div> <p> </p> <p> </p> <h3>Additional Resources</h3> <ul><li><strong><a href="https://universitypolicy.gmu.edu/policies/data-stewardship/" title="George Mason University Data Stewardship Policy">George Mason University - Data Stewardship Policy</a></strong></li> <li><a href="https://www.linkedin.com/pulse/12-web-form-best-practices-kristen-joseph/" title="12 Web Form Best Practices"><strong>12 Web Form Best Practices</strong></a></li> <li><strong><a href="//themanifest.com/web-design/blog/5-tips-designing-perfect-web-form" title="5 Tips for Designing the Perfect Web Form">5 Tips for Designing the Perfect Web Form</a></strong></li> </ul><p> </p> <p> </p> </div> </div> </div> <div data-block-plugin-id="field_block:node:news_release:field_content_topics" class="block block-layout-builder block-field-blocknodenews-releasefield-content-topics"> <h2>Topics</h2> <div class="field field--name-field-content-topics field--type-entity-reference field--label-visually_hidden"> <div class="field__label visually-hidden">Topics</div> <div class='field__items'> <div class="field__item"><a href="/taxonomy/term/506" hreflang="en">SiteMasonry</a></div> <div class="field__item"><a href="/taxonomy/term/616" hreflang="en">Site Owners</a></div> <div class="field__item"><a href="/taxonomy/term/836" hreflang="en">Forms</a></div> <div class="field__item"><a href="/taxonomy/term/851" hreflang="en">Best Practices Tutorial</a></div> </div> </div> </div> </div> </div> Thu, 18 Nov 2021 02:19:48 +0000 Kelly Hansen 1086 at https://sitemasonry.gmu.edu