How can I make the email field the full length of the form in the Dawn theme?

How can I make the email field the full length of the form in the Dawn theme?

Prolifink
Visitor
3 0 0

Hello!

 

I have a question concerning the forms in Shopify.

I managed to add fields to the custom forms from the Dawn theme.

The only thing left is that I want the Email field to take the full length of the form like to Object field.

I don't know what to add to my code.

 

Screenshot 2024-01-23 at 3.55.13 PM.png

 

I can't give a link since it's a draft to replace the current website but here is the code in my contact-form.liquid for the email and object field:

 

<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
class="field__input"
autocomplete="object"
type="text"
id="ContactForm-object"
name="contact[{{ 'templates.contact.form.object' | t }}]"
value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.object }}{% endif %}"
placeholder="{{ 'templates.contact.form.object' | t }}"
>
<label class="field__label" for="ContactForm-object">{{ 'templates.contact.form.object' | t }}</label>
</div>

 

Thank you!

Reply 1 (1)

HM_Helal
Shopify Partner
39 8 7

Hey @Prolifink,

 

Can you share your Store URL so I can have a look at it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Helal