Contact form showing padded text/off center

Technical Q&A
,
1

IMG_4539.jpeg
IMG_4539.jpeg1179×1272 43.1 KB

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.

2

Hi,

We can help you , if you want you can share store URL and details by contacting us directly

3

Im concious of spam etc. can you please share code snip here

4

Hi @svalkyrie23 ,

Can you copy your code in the contact-form.liquid file and I will help you check it if possible

5

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-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

  

    
    {%- if section.settings.heading != blank -%}
      ## 
        {{ section.settings.heading }}
      
    {%- else -%}
      ## {{ 'templates.contact.form.title' | t }}
    {%- 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? -%}
        ## 
          {% render 'icon-success' %}
          {{ 'templates.contact.form.post_success' | t }}
        
      {%- elsif form.errors -%}
        
          ## 
            {% render 'icon-error' %}
            {{ 'templates.contact.form.error_heading' | t }}
          
        

        
          - {{ form.errors.translated_fields.email | capitalize }}
                {{ form.errors.messages.email }}
            
          
        

      {%- endif -%}

    

          
    

      
      
  
    

          

          {%- if form.errors contains 'email' -%}
            <small>
              {{ 'accessibility.error' | t }}
              
                {%- render 'icon-error' -%}
                {{- form.errors.translated_fields.email | capitalize }}
                {{ form.errors.messages.email -}}
              
            </small>
          {%- endif -%}
        

      
      
    

          
        

        
      

        
      

      
        
      

    {%- endform -%}
  

{% 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 %}
6

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-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

  

    
    {%- if section.settings.heading != blank -%}
      ## 
        {{ section.settings.heading }}
      
    {%- else -%}
      ## {{ 'templates.contact.form.title' | t }}
    {%- 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? -%}
        ## 
          {% render 'icon-success' %}
          {{ 'templates.contact.form.post_success' | t }}
        
      {%- elsif form.errors -%}
        
          ## 
            {% render 'icon-error' %}
            {{ 'templates.contact.form.error_heading' | t }}
          
        

        
          - {{ form.errors.translated_fields.email | capitalize }}
                {{ form.errors.messages.email }}
            
          
        

      {%- endif -%}

    

          
    

      
      
  
    

          

          {%- if form.errors contains 'email' -%}
            <small>
              {{ 'accessibility.error' | t }}
              
                {%- render 'icon-error' -%}
                {{- form.errors.translated_fields.email | capitalize }}
                {{ form.errors.messages.email -}}
              
            </small>
          {%- endif -%}
        

      
      
    

          
        

        
      

        
      

      
        
      

    {%- endform -%}
  

{% 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 %}
7

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.

8

Hi @svalkyrie23 ,

Is this final design you want?

BSSCommerceTC_1-1720525838469.png
BSSCommerceTC_1-1720525838469.png891×545 7.48 KB

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;
}
9

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?

svalkyrie23_0-1720554817912.png
svalkyrie23_0-1720554817912.png281×452 2.95 KB