Check boxes of Free Quote Window is not working
Here is the code written in file... Please let me know what can be the issue
<div class="form-column">
<label><input type="checkbox" name="message[Services][]" value="need-additional-supplies"> Yes</label>
</div>
<div class="form-column">
<label><input type="checkbox" name="message[Services][]" value="no-supplies-needed"> No, thanks</label>
</div>
I copied your code to a file and opened it in Chrome. When i click on the checkbox, the checkmark appears, so the code is fully functional. Maybe you have a problem anywhere else in your code, or your browser is broken.
Please let me know how to fix
Here is complete code
<div class="fixed-quote-form inactive hidden-xs">
<button id="toggle_sideqoute" class="btn btn-style-7 hidden-xs">FREE QUOTE</button>
<div class="container-1">
<div class="row-1">
<div class="col-sm-12">
<h3 class="section-title">Request a Moving Quote.<br />FREE. FAIR. HONEST.</h3>
{% macro errorList(errors) %}
{% if errors %}
<ul class="errors">
{% for error in errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}
{% from _self import errorList %}
<form method="post" action="" accept-charset="UTF-8" class="form-style2 fx-cols-2">
{{ getCsrfInput() }}
<input type="hidden" name="action" value="contactForm/sendMessage">
<input type="hidden" name="redirect" value="contact-us/thanks?from={fromName}">
<div class="form-column">
<input id="fromName" type="text" name="fromName" value="{% if message is defined %}{{ message.fromName }}{% endif %}" placeholder="Your Name">
{{ message is defined and message ? errorList(message.getErrors('fromName')) }}
</div>
<div class="form-column">
<input id="fromEmail" type="email" name="fromEmail" value="{% if message is defined %}{{ message.fromEmail }}{% endif %}" placeholder="Email">
{{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}
</div>
<div class="form-column-full hidden">
<input id="subject" type="text" name="subject" value="New Quote Request from Homepage" placeholder="subject">
{{ message is defined and message ? errorList(message.getErrors('subject')) }}
</div>
<div class="form-column">
<input id="loadingPlace" type="text" name="message[loadingPlace]" value="{% if message is defined %}{{ message.loadingPlace }}{% endif %}" placeholder="Loading Place">
{{ message is defined and message ? errorList(message.getErrors('loadingPlace')) }}
</div>
<div class="form-column">
<input id="unloadingPlace" type="text" name="message[unloadingPlace]" value="{% if message is defined %}{{ message.unloadingPlace }}{% endif %}" placeholder="Unloading Place">
{{ message is defined and message ? errorList(message.getErrors('unloadingPlace')) }}
</div>
<div class="form-column-full">
<input id="phone" type="text" name="message[phone]" value="{% if message is defined %}{{ message.phone }}{% endif %}" placeholder="Phone">
{{ message is defined and message ? errorList(message.getErrors('phone')) }}
</div>
<div class="form-column-full">
<textarea rows="5" cols="40" id="message" name="message[body]">{% if message is defined %}{{ message.message }}{% endif %}</textarea>
{{ message is defined and message ? errorList(message.getErrors('message')) }}
</div>
<div class="form-column-full">
<input id="skynethighjack" name="skynethighjack" type="text">
<button class="btn btn-style-7" type="submit" value="Send">Submit Your Quote</button>
</div>
<div class="form-column-full">
<h6>Do you need additional moving supplies?</h6>
</div>
<div class="form-column">
<label><input type="checkbox" name="message[Services][]" value="need-additional-supplies"> Yes</label>
</div>
<div class="form-column">
<label><input type="checkbox" name="message[Services][]" value="no-supplies-needed"> No, thanks</label>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ page-section -->
still, as i click on the checkbox, the checkmark appears.
Please what should I do to get it fixed
Why fix something that is not broken?
This looks like a choice between two opposing options. So I think it should be radio buttons rather than checkboxes.
With checkboxes the user may choose both options or neither option.
With radios you can enforce a choice between one or the other option (or one of many).
You need to define “not working”.
The HTML may work, but since the OP posted in PHP, maybe the processing script (that we have not seen) has a problem dealing with the data received.
But we need the OP to elaborate on what “not working” means in this particular case.
try the following: copy this code by dragging over it with your mouse while clicking, than right-click and “copy”
<div class="fixed-quote-form inactive hidden-xs">
<button id="toggle_sideqoute" class="btn btn-style-7 hidden-xs">FREE QUOTE</button>
<div class="container-1">
<div class="row-1">
<div class="col-sm-12">
<h3 class="section-title">Request a Moving Quote.<br />FREE. FAIR. HONEST.</h3>
{% macro errorList(errors) %}
{% if errors %}
<ul class="errors">
{% for error in errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}
{% from _self import errorList %}
<form method="post" action="" accept-charset="UTF-8" class="form-style2 fx-cols-2">
{{ getCsrfInput() }}
<input type="hidden" name="action" value="contactForm/sendMessage">
<input type="hidden" name="redirect" value="contact-us/thanks?from={fromName}">
<div class="form-column">
<input id="fromName" type="text" name="fromName" value="{% if message is defined %}{{ message.fromName }}{% endif %}" placeholder="Your Name">
{{ message is defined and message ? errorList(message.getErrors('fromName')) }}
</div>
<div class="form-column">
<input id="fromEmail" type="email" name="fromEmail" value="{% if message is defined %}{{ message.fromEmail }}{% endif %}" placeholder="Email">
{{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}
</div>
<div class="form-column-full hidden">
<input id="subject" type="text" name="subject" value="New Quote Request from Homepage" placeholder="subject">
{{ message is defined and message ? errorList(message.getErrors('subject')) }}
</div>
<div class="form-column">
<input id="loadingPlace" type="text" name="message[loadingPlace]" value="{% if message is defined %}{{ message.loadingPlace }}{% endif %}" placeholder="Loading Place">
{{ message is defined and message ? errorList(message.getErrors('loadingPlace')) }}
</div>
<div class="form-column">
<input id="unloadingPlace" type="text" name="message[unloadingPlace]" value="{% if message is defined %}{{ message.unloadingPlace }}{% endif %}" placeholder="Unloading Place">
{{ message is defined and message ? errorList(message.getErrors('unloadingPlace')) }}
</div>
<div class="form-column-full">
<input id="phone" type="text" name="message[phone]" value="{% if message is defined %}{{ message.phone }}{% endif %}" placeholder="Phone">
{{ message is defined and message ? errorList(message.getErrors('phone')) }}
</div>
<div class="form-column-full">
<textarea rows="5" cols="40" id="message" name="message[body]">{% if message is defined %}{{ message.message }}{% endif %}</textarea>
{{ message is defined and message ? errorList(message.getErrors('message')) }}
</div>
<div class="form-column-full">
<input id="skynethighjack" name="skynethighjack" type="text">
<button class="btn btn-style-7" type="submit" value="Send">Submit Your Quote</button>
</div>
<div class="form-column-full">
<h6>Do you need additional moving supplies?</h6>
</div>
<div class="form-column">
<label><input type="checkbox" name="message[Services][]" value="need-additional-supplies"> Yes</label>
</div>
<div class="form-column">
<label><input type="checkbox" name="message[Services][]" value="no-supplies-needed"> No, thanks</label>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ page-section -->
create a new file on your filesystem, e.g. by opening an explorer, right-click > new > file. Name it like “checkbox.html”, click OK. Use right-click > open with > notepad. Than use right-click > paste. Save with ctrl+s (keyboard combination).
Open Chrome (install first if needed), open a new tab with crtl+t (on your keyboard again) and drag this file into the new tab. Now you can test the checkboxes.
that’s what i did to get the expected result of functional checkboxes.
i really hope we get to this point soon…
Indeed, or even just a single checkbox to say “yes, I need additional moving supplies”, with a presumption that if it is not ticked, the answer is “no, I don’t”.
Please help me to fix this which other file content you require , this is the website https://www.jensenmovingandstorage.com/
I see the problem on the live site. It looks to me as though the two checkboxes are disabled. The trouble is the form disappears when I open dev tools.
As Sam mentions 2 checkboxes make no sense, and it is daft to put them after the submit button.
Just a note in case anyone else has trouble finding the form on that page, it’s in the red “Free Quote” button on the side.
Also, this has been moved to HTML & CSS, it looks more like a client-side code problem.
What should I do to get this fixed… this Forum is the best…
If the issue is that the checkbox isn’t showing a check mark when you click it then the reason for that is that you have set the appearance of all inputs to none which means the default UA styling no longer applies.
You have this in your CSS:
input,button{-webkit-appearance:none;outline:none}
Once you remove the UA styling from inputs then you have to take full control yourself which for checkboxes and radios is quite difficult.
I suggest you return to the default UA styling.
e.g.
add this:
input[type=checkbox]{
-webkit-appearance:checkbox!important;
}
If you need to style a checkbox to look different then you need to look at styling a label to look like a checkbox or perhaps use something like this method.
thank dear
where should I add this
input[type=checkbox]{
-webkit-appearance:checkbox!important;
}
should I add the above code in the style-quote.html file which contain full code of this Free Quote form
You can add it anywhere you like in your css files but I suggest adding at the end of jensen.min.css so that you know where it is if you need to change things later.
I found style.css file
So can I just copy and paste this complete code in that file and test the page
input[type=checkbox]{
-webkit-appearance:checkbox!important;
}
Added this in style.css but still the same issue
input[type=checkbox]{
-webkit-appearance:checkbox!important;
}
You don’t have a style.css?
I only see these css files in the head of your page:
<link rel="stylesheet" type="text/css" href="/css/jensen.min.css"/>
<link rel="stylesheet" type="text/css" href="/css/smartbanner.min.css"/>
<link rel="stylesheet" type="text/css" href="/css/fq.css"/>
Show me where you put the code I gave you.