Hello, Im seeking help in trying to create my own custom Warranty Form on my website using dawn theme. Is there something that needs to be added else where vs Creating my own .Liquid? I have been tweaking the original contact form on a separate template. I just cannot for the life of me get it work. I would change variables from “contact-form” to “warranty-form” and everything seemed ok, though i think i am missing something as the required fields are not in the correct spots.
{{ 'section-contact-form.css' | asset_url | stylesheet_tag }}
<div class="contact page-width page-width--narrow spaced-section">
<h2 class="title">{{ section.settings.heading | escape }}</h2>
{%- form 'contact', id: 'ContactForm' -%}
{%- if form.posted_successfully? -%}
<div class="form-status form-status-list form__message" tabindex="-1" autofocus>{% render 'icon-success' %} {{ 'templates.contact.form.post_success' | t }}</div>
{%- elsif form.errors -%}
<div class="form__message">
<h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>{% render 'icon-error' %} {{ 'templates.contact.form.error_heading' | t }}</h2>
</div>
<ul class="form-status-list caption-large" role="list">
<li>
<a href="#ContactForm-email" class="link">
{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}
</a>
</li>
</ul>
{%- endif -%}
<div class="contact__fields">
<div class="field">
<input class="field__input" autocomplete="name" type="text" id="ContactForm-name" name="contact[{{ 'templates.contact.form.name' | t }}]" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}" placeholder="{{ 'templates.contact.form.name' | t }}">
<label class="field__label" for="ContactForm-name">{{ 'templates.contact.form.name' | t }}</label>
</div>
<div class="field field--with-error">
<input
autocomplete="email"
type="email"
id="ContactForm-email"
class="field__input"
name="contact[email]"
spellcheck="false"
autocapitalize="off"
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
aria-required="true"
{% if form.errors contains 'email' %}
aria-invalid="true"
aria-describedby="ContactForm-email-error"
{% endif %}
placeholder="{{ 'templates.contact.form.email' | t }}"
>
<label class="field__label" for="ContactForm-email">{{ 'templates.contact.form.email' | t }} <span aria-hidden="true">*</span></label>
{%- if form.errors contains 'email' -%}
<small class="contact__field-error" id="ContactForm-email-error">
<span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
<span class="form__message">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</span>
</small>
{%- endif -%}
</div>
</div>
<div class="field">
<input type="tel" id="ContactForm-phone" class="field__input" autocomplete="tel" name="contact[{{ 'templates.contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form.phone %}{{ form.phone }}{% elsif customer %}{{ customer.phone }}{% endif %}" placeholder="{{ 'templates.contact.form.phone' | t }}" required>
<label class="field__label" for="ContactForm-phone">{{ 'templates.contact.form.phone' | t }}</label>
</div>
<div class="field">
<input class="field__input" autocomplete="OrdNmb" type="text" id="WarrantyForm-OrdNmb" name="contact[{{ 'templates.contact.form.name' | t }}]" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}" placeholder="{{ 'templates.contact.form.name' | t }}"
required> <label class="field__label" for="WarrantyForm-OrdNmb">{{ 'templates.contact.form.name' | t }}
<span aria-hidden="true">*</span></label></div>
<div class="field">
<textarea
rows="10"
id="WarrantyForm-body"
class="text-area field__input"
name="Details"
placeholder=
>
{{- form.body -}}
</textarea>
<label class="form__label field__label" for="ContactForm-body">Details</label>
</div>
<div class="contact__button">
<button type="submit" class="button">
{{ 'templates.contact.form.send' | t }}
</button>
</div>
{%- endform -%}
</div>
{% schema %}
{
"name": "Warranty Form",
"tag": "section",
"class": "spaced-section",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Warranty form",
"label": "Heading"
}
],
"presets": [
{
"name": "Warranty Form"
}
]
}
{% endschema %}
Lines 56 - 59 is where i am having trouble making the field required. I am essentially trying to separate this form from the original “Contact Form” so I can have separate forms. Just unsure if there’s more in another spot I should be coding as well for it to work as i am planning