Why aren't my radio buttons showing properly on the custom contact form?

Shopify Discussion
1

I have watched the YouTube video provided by Shopify twice. I have only been able to recreate the dropdown feature shown in the video.

I copied the code and took screenshots for adding radio buttons and have code shown below but I cannot get the radio buttons to appear properly on my custom-contact form.

I get the picture shown below

What’s your concern?
<select id=”contact-concern” name=”contact[customer concern]”>

I have a question about a product I have a question about my order I need to return a product I have a question about my refund I have another concern

{{ ‘contact.form.message’ | t }}

{% if form.body %}{{ form.body }}{% endif %}

How did you hear about us?
Facebook

Instagram

Other

{% endform %}

cj62352_0-1613635978440.png
cj62352_0-1613635978440.png650×508 14.3 KB

Any help would be appreciated!

2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

I know I’m a grave digger here, but since this thread has never actually been resolved, I thought I’d drop this here just in case someone stumbles across it: It’s the quotation marks. If you look closely, all form fields have the proper, simple “double quotation marks” as HTML syntax requests.

The radio buttons have that more “sophisticated” kind of quotation marks - you know, the ones that are used in books or MS Word documents.

See: " vs. ”

So the HTML parser ignores all attributes and basically just sees <input [[[GARBAGE]]]somethingFB> there, and without a type attribute is always interpreted as a single-line text field.

1 Like
4
How do you want us to contact you? Email
Phone
Text message

Shopify reference: https://shopify.dev/docs/themes/customer-engagement/add-contact-form#radio-type

5

Hi @cj62352 , found the perfect fix for adding custom fields to your Shopify contact form, including text, dropdown, radio, and checkbox options! Check out this helpful YouTube video: