Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
my contact firm looks like this. I am using the dawn theme and just copied the existing input fields and removed the inside label. But you can see the text still appears there as if the label is there? (First field just as an example).
Can someone please help me fix this? I couldnt find it anywhere online.
Hi,
We can help you , if you want you can share store URL and details by contacting us directly
Im concious of spam etc. can you please share code snip here
Hi @svalkyrie23 ,
Can you copy your code in the contact-form.liquid file and I will help you check it if possible
If our suggestions are useful, please let us know by giving it a like, marking it as a solution.
MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
Thank you, here you go:
{{ 'section-contact-form.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
<!-- padding-top: {{ section.settings.padding_top }}px; -->
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="contact page-width page-width--narrow section-{{ section.id }}-padding">
{%- if section.settings.heading != blank -%}
<h2 class="title title-wrapper--no-top-margin inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{{ section.settings.heading }}
</h2>
{%- else -%}
<h2 class="visually-hidden">{{ 'templates.contact.form.title' | t }}</h2>
{%- endif -%}
{%- liquid
assign contact_form_class = 'isolate'
if settings.animations_reveal_on_scroll
assign contact_form_class = 'isolate scroll-trigger animate--slide-in'
endif
-%}
{%- form 'contact', id: 'ContactForm', class: contact_form_class -%}
{%- if form.posted_successfully? -%}
<h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>
{% render 'icon-success' %}
{{ 'templates.contact.form.post_success' | t }}
</h2>
{%- 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 -%}
<label for="ContactForm-name">Name</label>
<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-phone">{{ 'templates.contact.form.phone' | t }}</label>
</div>
<label for="ContactForm-email">Email</label>
<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 }}"
>
{%- 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>
<label for="OrderID">Order ID</label>
<div class="field">
<input
class="field__input"
type="text"
id="OrderID"
name="contact[OrderID]"
placeholder="OrderID"
>
</div>
<label for="ContactForm-body">Message</label>
<div class="field">
<textarea
rows="10"
id="ContactForm-body"
class="text-area field__input"
name="contact[{{ 'templates.contact.form.comment' | t }}]"
placeholder="{{ 'templates.contact.form.comment' | t }}"
>
{{- form.body -}}
</textarea>
</div>
<div class="contact__button">
<button type="submit" class="button">
{{ 'templates.contact.form.send' | t }}
</button>
</div>
{%- endform -%}
</div>
</div>
{% schema %}
{
"name": "t:sections.contact-form.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"id": "heading",
"default": "Contact form",
"label": "Heading"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"presets": [
{
"name": "t:sections.contact-form.presets.name"
}
]
}
{% endschema %}
Hi @svalkyrie23 ,
If you only want to remove the label below, for example, the "phone number" label, the code snippet below has been modified. You just need to replace it with the original code and save it. Then check on the storefront to see if it works. If it is helpful, please give us a like and mark it as a solution.
{{ 'section-contact-form.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
<!-- padding-top: {{ section.settings.padding_top }}px; -->
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="contact page-width page-width--narrow section-{{ section.id }}-padding">
{%- if section.settings.heading != blank -%}
<h2 class="title title-wrapper--no-top-margin inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{{ section.settings.heading }}
</h2>
{%- else -%}
<h2 class="visually-hidden">{{ 'templates.contact.form.title' | t }}</h2>
{%- endif -%}
{%- liquid
assign contact_form_class = 'isolate'
if settings.animations_reveal_on_scroll
assign contact_form_class = 'isolate scroll-trigger animate--slide-in'
endif
-%}
{%- form 'contact', id: 'ContactForm', class: contact_form_class -%}
{%- if form.posted_successfully? -%}
<h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>
{% render 'icon-success' %}
{{ 'templates.contact.form.post_success' | t }}
</h2>
{%- 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 -%}
<label for="ContactForm-name">Name</label>
<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 }}"
>
</div>
<label for="ContactForm-email">Email</label>
<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 }}"
>
{%- 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>
<label for="OrderID">Order ID</label>
<div class="field">
<input
class="field__input"
type="text"
id="OrderID"
name="contact[OrderID]"
placeholder="OrderID"
>
</div>
<label for="ContactForm-body">Message</label>
<div class="field">
<textarea
rows="10"
id="ContactForm-body"
class="text-area field__input"
name="contact[{{ 'templates.contact.form.comment' | t }}]"
placeholder="{{ 'templates.contact.form.comment' | t }}"
>
{{- form.body -}}
</textarea>
</div>
<div class="contact__button">
<button type="submit" class="button">
{{ 'templates.contact.form.send' | t }}
</button>
</div>
{%- endform -%}
</div>
</div>
{% schema %}
{
"name": "t:sections.contact-form.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"id": "heading",
"default": "Contact form",
"label": "Heading"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"presets": [
{
"name": "t:sections.contact-form.presets.name"
}
]
}
{% endschema %}
If our suggestions are useful, please let us know by giving it a like, marking it as a solution.
MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
Hi, no this isnt the issue. I put the phone number back in just for onbservations. Look at all the other fields, there is a gap and text is off centre. This is likely DUE to the way the label originally appears in the input form, and then when you type it goes to small text on the top of the input field.
I just want the normal input field so that when you type there is no padding.
Hi @svalkyrie23 ,
Is this final design you want?
Could you insert below code at the end of file base.css and Save them
.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
padding: 0 1.5rem;
}
If our suggestions are useful, please let us know by giving it a like, marking it as a solution.
MIDA: Heatmap, Record & Replay |BLOOP Referral Program, Reward |
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
Hello - thank you this works! But there is a bit less padding on the messages compared to the other fields (As seen in your picture also). Do you know how to fix it for the messages field?
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024