Contact Form Dawn Theme - new fields not in theme design

Store Design
1

Hey,

I created two new fields in my contact form. Unfortunately they are not in the same design like the others. How can I set the “borders” around the fields?

I would be very grateful for some help!

IMG_2601.jpg
IMG_2601.jpg1284×856 46.6 KB

2

@janiisa

My pleasure to help you.
Welcome to the Shopify community!
Please share your store URL!
I will check out the issue and provide the correct solution to you!

Thanks!

3

Hi @janiisa ,

Please send me the contact form code, I will help you to edit it

4

Thanks for answering! :slightly_smiling_face:

Here is the code:

Website: https://www.janiisa.com/pages/contact

5

Hi @janiisa ,

Please change code:

Hope it helps!

6

It is much better now but I need the last three fields in each row. And the title of the dropdown menu is missing. How can I change that? The “style” has to look like the beginning. :slightly_smiling_face:

Bildschirmfoto 2022-09-16 um 09.33.58.png
Bildschirmfoto 2022-09-16 um 09.33.58.png1568×844 39 KB

7

Hi @janiisa ,

Can you send me the full form code? Currently I have checked and the code is only partial.

I will check it.

8

Sure! Here is the full code.

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

  

    {%- if section.settings.heading != blank -%}
      ## {{ section.settings.heading | escape }}
    {%- else -%}
      ## {{ 'templates.contact.form.title' | t }}
    {%- endif -%}
    {%- form 'contact', id: 'ContactForm', class: 'isolate' -%}
      {%- 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",
  "settings": [
    {
      "type": "text",
      "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": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label"
    },
    {
      "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 %}
9

Hi @janiisa ,

Please change all code:

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

  

    {%- if section.settings.heading != blank -%}
      ## {{ section.settings.heading | escape }}
    {%- else -%}
      ## {{ 'templates.contact.form.title' | t }}
    {%- endif -%}
    {%- form 'contact', id: 'ContactForm', class: 'isolate' -%}
      {%- 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",
  "settings": [
    {
      "type": "text",
      "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": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label"
    },
    {
      "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 %}

Hope it helps!

10

Thank you so so much!! Just the dropdown menu is still not showing the title “Kategorie” and you can’t see that you can select some categories like with an arrow down. I would be so grateful if you could help me with that again.

Bildschirmfoto 2022-09-16 um 16.37.53.png
Bildschirmfoto 2022-09-16 um 16.37.53.png1602×974 39 KB

11

Hi @janiisa ,

Because it is dropdown, so when adding label, it will not display well in current design.

Or you can change the select code as follows:

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

12

Much love to you - it’s perfect now! THANK YOU!