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

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

1 0 0

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

<label for=”contact-concern”>What’s your concern?</label>
<select id=”contact-concern” name=”contact[customer concern]”>
<option>I have a question about a product</option>
<option>I have a question about my order</option>
<option>I need to return a product</option>
<option>I have a question about my refund</option>
<option>I have another concern</option>

<label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label>
<textarea rows="10" id="{{ formId }}-message" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>

<label>How did you hear about us?</label>
<input type=”radio” name=”contact[discovery]” value=”FB”>Facebook<br>
<input type=”radio” name=”contact[discovery]” value=”IG”>Instagram<br>
<input type=”radio” name=”contact[discovery]” value=”Other”>Other<br>

<input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">

{% endform %}




Any help would be appreciated!

Replies 4 (4)

Shopify Partner
5668 1039 1364

Hello There,

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

15 0 2

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 <input> without a type attribute is always interpreted as a single-line text field.

Shopify Partner
1 0 0

<div class="contact-method">
<label for="contact-method">How do you want us to contact you?</label>
<input type="radio" name="contact[contact_method]" value="email" id="email"><label for="email">Email</label><br>
<input type="radio" name="contact[contact_method]" value="phone" id="phone"><label for="phone">Phone</label><br>
<input type="radio" name="contact[contact_method]" value="text message" id="text"><label for="text">Text message</label>


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

145 1 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: