How to style a custom dropdown in Ride 2.0 contact form?

Store Design
,
1

How do I get the style to match for the Dropdown I have added to the contact us form?

MartyMcflyGuy_0-1691788437323.png
MartyMcflyGuy_0-1691788437323.png1050×547 75.9 KB

Below is my code. I am using Ride 2.0.

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

{%- endif -%}
{{ 'templates.contact.form.name' | t }}
{{- 'templates.contact.form.email' | t }} * {%- if form.errors contains 'email' -%} {{ 'accessibility.error' | t }} {%- render 'icon-error' -%} {{- form.errors.translated_fields.email | capitalize }} {{ form.errors.messages.email -}} {%- endif -%}
{{ 'templates.contact.form.phone' | t }}
{{- form.body -}} {{- 'templates.contact.form.comment' | t -}}
Select a business for your inquiry.
{{ 'templates.contact.form.send' | t }}
{%- endform -%}

{% schema %}
{
“name”: “t:sections.contact-form.name”,
“tag”: “section”,
“class”: “section”,
“disabled_on”: {
“groups”: [“header”, “footer”]
},
“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 %}

2

Avoid giant walls of code it’s a good way to get ignored.

To increase changes of someone contributing either format only the relevant parts of the code

, or link to an actual working example that is publicly accessible that others can inspect.

It would probably be saner to turn the dropdown into a radio inputs group.

Notice the other inputs are text inputs and the labels exist INSIDE the input area.

You wont get that aesthetic with a drop down unless you want the first option to be the label in which case the entire dropdown will span the entire form looking silly.

For the inputs the relevant classes are the wrapper

.field i.e.

the input , which you would apply to the