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!
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!
Hi @janiisa ,
Please send me the contact form code, I will help you to edit it
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. 
Hi @janiisa ,
Can you send me the full form code? Currently I have checked and the code is only partial.
I will check it.
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 %}
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!
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.
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.
Much love to you - it’s perfect now! THANK YOU!
1 Like