1Back up your theme (Online Store > Themes > Actions > Duplicate) before changing any code.
2Open Online Store > Themes > Edit code and create a new file under Sections using the file name shown above.
3Paste the complete file - markup, styles and JavaScript are already inside the single file, nothing else to install.
4Open the theme editor, add the section to a template, and replace the example values using the section settings.
5Preview the storefront and test it on a phone-sized screen before publishing.
contact-form-section.liquid
1<divclass="gpl-contact">2<h2class="gpl-contact__heading">{{section.settings.heading}}</h2>3{%-form'contact', class: 'gpl-contact__form'-%}4{%-ifform.posted_successfully? -%}5<pclass="gpl-contact__ok">Thanks - we reply within a business day.</p>6{%-endif-%}7<inputtype="text"name="contact[name]"placeholder="Your name" required>8<inputtype="email"name="contact[email]"placeholder="Your email" required>9<textareaname="contact[body]"rows="4"placeholder="Your message" required></textarea>10<buttontype="submit">Send message</button>11{%-endform-%}12</div>1314{%schema%}
