Shopify Custom Contact Form
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.full.min.js"></script>
<style>
.select2-selection__clear {
display: none;
}
span.select2-dropdown.select2-dropdown--below {
border-radius: 10px;
}
span.select2-search.select2-search--dropdown {
display: none !important;
}
ul#select2-test-results
li.select2-results__option:first-child
> ul.select2-results__options--nested
li.select2-results__option:first-child {
display: none !important;
}
.select2-results__group {
cursor: pointer !important;
font-weight: 600 !important;
}
.select2-container .select2-selection--single {
height: 55.25px !important;
border-radius: 10px !important;
}
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
line-height: 55.25px !important;
padding-left: 20px !important;
font-size: 15px !important;
font-weight: 100 !important;
}
.select2-container--default
.select2-selection--single
.select2-selection__arrow
b {
border-color: #000 transparent transparent transparent !important;
}
.select2-container--default
.select2-selection--single
.select2-selection__arrow {
height: 55.25px !important;
right: 5px !important;
}
.normal-field {
border: none !important;
animation: none !important;
}
.inquire-now .error {
position: relative;
animation: shake 0.1s linear;
animation-iteration-count: 3;
border: 2px solid red !important;
outline: none;
}
@keyframes shake {
0% {
left: -2px;
}
100% {
right: -2px;
}
}
.inquire_formbody {
margin-bottom: 2rem !important;
padding-top: 40px !important;
}
.inquire-now .title_kwikpospages {
color: #000 !important;
padding-top: 5px !important;
}
.inquire-now label,
.inquire-now p {
color: #000 !important;
}
.inquire-now p {
padding: 8px;
}
[type=radio] {
height: 12px !important;
}
.inquire-now input,
.inquire-now select,
.inquire-now textarea {
height: 55.25px;
border-radius: 10px !important;
border: 1px solid #00b24f !important;
}
.inquire_formbody td {
width: 50%;
}
form.inquire-now {
background-color: #00b24f !important;
padding: 20px;
border-radius: 10px;
box-shadow: -5px 7px 10px #00b24f6b !important;
border: 1px solid #00b24f6b;
}
.inquire_formbody {
width: 100%;
padding: 10px 10%;
height: 600px;
}
.inquire-now {
width: 100%;
padding: 0px;
border: none;
}
.inquire-now h3 {
font-size: 41px;
font-weight: 700;
color: #222;
text-align: left;
padding: 0px 0px 40px 0px;
}
.inquire-now table,
th,
td {
border: none;
padding: 10px;
}
th,
td {
border: none;
padding: 10px;
}
.inquire-now textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
border: 0px solid #ccc;
border-radius: 5px;
background-color: #f4f4f4;
font-size: 20px;
resize: none;
color: #ababab;
}
.inquire-now input,
.inquire-now select {
width: 100%;
padding: 12px 20px !important;
display: inline-block;
border: none;
border-radius: 4px;
font-size: 20px;
border-radius: 5px;
background-color: #f4f4f4;
}
input[type="text"]:focus {
background-color: #f8f8f8;
border: 0px;
}
.inquire-now input[type="submit"] {
width: 250px;
font-size: 20px;
text-transform: uppercase;
background-color: #fff;
color: #000 !important;
padding: 10px 20px;
border: 1px solid #00b24f;
border-radius: 30px;
cursor: pointer;
}
.inquire-now input[type="submit"]:hover {
background-color: transparent !important;
color: #fff !important;
border: 1px solid #fff !important;
}
@media (max-width: 767px) {
.inquire_formbody td {
width: 100%;
}
.inquire_formbody tr {
display: grid;
}
}
@media screen and (max-width: 720px) {
.inquire_formbody {
width: 100%;
padding: 10px 2%;
height: 600px;
}
}
</style>
<div class="inquire_formbody">
<div class="inquire-now">
{% form 'contact', class: 'inquire-now' %}
<h2 class="title_kwikpospages">Ready To Improve Your Business Operations?</h2>
{% if form.posted_successfully? %}
<script type="text/javascript">
<!--
window.location = "/pages/thank-you-about-us";
//-->
</script>
{% endif %}
{{ form.errors | default_errors }}
<table class="inquire-now" style="padding: 0px; border:none; important!">
<tr>
<td><input class="inquire-now" type="text" id="fullname" name="contact[fullname]" placeholder="Full Name*" required></td>
<td><input class="inquire-now" type="text" id="company" name="contact[company]" placeholder="Company Name"></td>
</tr>
<tr>
<td><input class="inquire-now" type="text" id="phone" name="contact[phone]" placeholder="Phone*" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" required></td>
<td><input class="inquire-now" type="email" id="email" name="contact[email]" placeholder="Email*" required></td>
</tr>
<tr>
<td>
<div id="select-container"></div>
<input type="hidden" id="businessType" name="contact[businessType]">
</td>
<td>
<select id="branch" name="contact[branch]">
<option value="" disabled selected>How many store/branches?</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10 or more</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="region" name="contact[region]" onchange="fetchCities()">
<option value="" disabled selected>Location/Region</option>
<option value="NCR">NCR</option>
<option value="CAR">CAR</option>
<option value="Region I – Ilocos Region">Region I – Ilocos Region</option>
<option value="Region II – Cagayan Valley">Region II – Cagayan Valley</option>
<option value="Region III – Central Luzon">Region III – Central Luzon</option>
<option value="Region IV‑A – CALABARZON">Region IV‑A – CALABARZON</option>
<option value="MIMAROPA">MIMAROPA</option>
<option value="Region V – Bicol Region">Region V – Bicol Region</option>
<option value="Region VI – Western Visayas">Region VI – Western Visayas</option>
<option value="Region VII – Central Visayas">Region VII – Central Visayas</option>
<option value="Region VIII – Eastern Visayas">Region VIII – Eastern Visayas</option>
<option value="Region IX – Zamboanga Peninsula">Region IX – Zamboanga Peninsula</option>
<option value="Region X – Northern Mindanao">Region X – Northern Mindanao</option>
<option value="Region XI – Davao Region">Region XI – Davao Region</option>
<option value="Region XII – SOCCSKSARGEN">Region XII – SOCCSKSARGEN</option>
<option value="Region XIII – Caraga">Region XIII – Caraga</option>
<option value="BARMM">BARMM</option>
</select>
</td>
<td>
<select id="city" name="contact[city]">
<option value="" disabled selected>City/Province</option>
</select>
</td>
</tr>
<tr>
<td>
<p style="padding: 0 8px !important;">Do you have an existing POS System?</p>
<input type="radio" id="yes" name="contact[pos]" value="Yes"> <label for="yes">Yes</label>
<input type="radio" id="no" name="contact[pos]" value="No"> <label for="no">No</label>
</td>
</tr>
<tr>
<td colspan="2">
<textarea class="inquire-now" name="contact[requirement]" placeholder="Brief detail of your requirement"></textarea></td>
</tr>
<tr>
<td colspan="2"><input class="inquire-now" type="submit" value="Inquire Now"></td>
</tr>
</table>
<input type="hidden" name="contact[siteref]" id="siteRef">
<input type="hidden" name="contact[referrer_url]" id="referrerUrl">
<input type="hidden" name="contact[inquiry-type]" value="ABOUT US">
{% endform %}
</div>
</div>
<script>
$(document).ready(function() {
$('#select2-test-results li').on('click', function() {
$('#select2-test-results li').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
// Create default select and give it an ID
var test = document.createElement("SELECT");
test.setAttribute("id", "test");
test.setAttribute("style", "width:100%");
// Populate options
var og1 = document.createElement("optgroup");
og1.label = "Food & Beverages";
var og2 = document.createElement("optgroup");
og2.label = "Retail";
var og3 = document.createElement("optgroup");
og3.label = "Services";
var opt0 = document.createElement("option");
opt0.text = "Type of Business";
var opt1 = document.createElement("option");
opt1.text = "Cafe/Bakery";
var opt2 = document.createElement("option");
opt2.text = "Casual Dining";
var opt3 = document.createElement("option");
opt3.text = "Fine Dining";
var opt4 = document.createElement("option");
opt4.text = "Bar/Lounge";
var opt5 = document.createElement("option");
opt5.text = "Food Truck";
var opt6 = document.createElement("option");
opt6.text = "Food Kiosk";
var opt7 = document.createElement("option");
opt7.text = "Fast Food";
var opt8 = document.createElement("option");
opt8.text = "Grocery";
var opt9 = document.createElement("option");
opt9.text = "Pharmacy";
var opt10 = document.createElement("option");
opt10.text = "Supermarket";
var opt11 = document.createElement("option");
opt11.text = "Clothing & Apparel";
var opt12 = document.createElement("option");
opt12.text = "Retail Store/Kiosk";
var opt13 = document.createElement("option");
opt13.text = "Flower Shop";
var opt14 = document.createElement("option");
opt14.text = "Spa & Wellness Center";
var opt15 = document.createElement("option");
opt15.text = "Auto Repair Shop";
var opt16 = document.createElement("option");
opt16.text = "Laundry & Dry Cleaning";
var opt17 = document.createElement("option");
opt17.text = "Health Care/Medical Clinic";
var opt18 = document.createElement("option");
opt18.text = "Hair Salon";
var opt19 = document.createElement("option");
opt19.text = "Pet Grooming";
var opt20 = document.createElement("option");
opt20.text = "Sports & Country Club";
og1.appendChild( opt0 );
og1.appendChild( opt1 );
og1.appendChild( opt2 );
og1.appendChild( opt3 );
og1.appendChild( opt4 );
og1.appendChild( opt5 );
og1.appendChild( opt6 );
og1.appendChild( opt7 );
og2.appendChild( opt8 );
og2.appendChild( opt9 );
og2.appendChild( opt10 );
og2.appendChild( opt11 );
og2.appendChild( opt12 );
og2.appendChild( opt13 );
og3.appendChild( opt14 );
og3.appendChild( opt15 );
og3.appendChild( opt16 );
og3.appendChild( opt17 );
og3.appendChild( opt18 );
og3.appendChild( opt19 );
og3.appendChild( opt20 );
test.add( og1 );
test.add( og2 );
test.add( og3 );
// Actually add to correct location
document.getElementById("select-container").appendChild( test );
// Give select2 class to this
$('#test').select2({
placeholder: "Business Type",
allowClear: true
}).on('change', function () {
var selectedValue = $(this).val();
$('#businessType').val(selectedValue);
});
// Onclick event to expand/collapse optgroups
$("body").on('click', '.select2-container--open .select2-results__group', function(e) {
//console.log("e: ", e);
$(this).siblings().toggle();
console.log("this: ", this);
console.log("innerHTML: ", this.innerHTML);
var grpName = this.innerHTML;
let groups = $('.select2-container--open .select2-results__group');
console.log("groups: ", groups);
$.each(groups, (index, grp) => {
let childName = grp.innerHTML;
console.log("childName: ", childName);
if (grpName.includes("Food")) {
if (childName.includes("Food") == false) {
$(grp).siblings().hide();
}
}
if (grpName.includes("Retail")) {
if (childName.includes("Retail") == false) {
$(grp).siblings().hide();
}
}
if (grpName.includes("Services")) {
if (childName.includes("Services") == false) {
$(grp).siblings().hide();
}
}
})
});
// Open event to collapse all optgroups by default
$('#test').on('select2:open', function() {
$('.select2-dropdown--below').css('opacity', 0);
setTimeout(() => {
let groups = $('.select2-container--open .select2-results__group');
console.log("groups: ", groups);
$.each(groups, (index, v) => {
$(v).siblings().hide();
console.log("v: ", v);
})
$('.select2-dropdown--below').css('opacity', 1);
}, 0);
});
});
</script>
<script>
function fetchCities() {
var region = document.getElementById('region').value;
var citySelect = document.getElementById('city');
citySelect.innerHTML = '';
if (region === 'NCR') {
var cities = ['City/Province', 'Caloocan City', 'Las Piñas City', 'Makati City', 'Malabon City', 'Mandaluyong City', 'Manila City', 'Marikina City', 'Muntinlupa City', 'Navotas City', 'Parañaque City', 'Pasay City', 'Pasig City', 'Quezon City', 'San Juan City', 'Taguig City', 'Valenzuela City'];
} else if (region === 'CAR') {
var cities = ['City/Province', 'Abra', 'Apayao', 'Benguet', 'Ifugao', 'Kalinga', 'Mountain Province'];
} else if (region === 'Region I – Ilocos Region') {
var cities = ['City/Province', 'La Union', 'Ilocos Norte', 'Ilocos Sur', 'Pangasinan', 'Alaminos City', 'Batac City', 'Candon City', 'Dagupan City', 'Laoag City', 'San Carlos City', 'San Fernando City', 'Urdaneta City', 'Vigan City'];
} else if (region === 'Region II – Cagayan Valley') {
var cities = ['City/Province', 'Batanes', 'Cagayan', 'Isabela', 'Nueva Vizcaya', 'Quirino', 'Cauayan City', 'Ilagan City', 'Santiago City', 'Tuguegarao City'];
} else if (region === 'Region III – Central Luzon') {
var cities = ['City/Province', 'Aurora', 'Bataan', 'Bulacan', 'Nueva Ecija', 'Pampanga', 'Tarlac', 'Zambales', 'Angeles City', 'Balanga City', 'Cabanatuan City', 'Gapan City', 'Mabalacat City', 'Malolos City', 'Meycauayan City', 'Muñoz City', 'Olongapo City', 'Palayan City', 'San Fernando City', 'San Jose City', 'San Jose Del Monte City', 'Tarlac City'];
} else if (region === 'Region IV‑A – CALABARZON') {
var cities = ['City/Province', 'Batangas', 'Cavite', 'Laguna', 'Quezon', 'Rizal', 'Antipolo City', 'Bacoor City', 'Batangas City', 'Biñan City', 'Cabuyao City', 'Calamba City', 'Cavite City', 'Dasmariñas City', 'Imus City', 'Lipa City', 'Lucena City', 'San Pablo City', 'Santa Rosa City', 'Tagaytay City', 'Tanauan City', 'Tayabas City', 'Trece Martires City'];
} else if (region === 'MIMAROPA') {
var cities = ['City/Province', 'Marinduque', 'Occidental Mindoro', 'Oriental Mindoro', 'Palawan', 'Romblon', 'Calapan City', 'Puerto Princesa City'];
} else if (region === 'Region V – Bicol Region') {
var cities = ['City/Province', 'Albay', 'Camarines Norte', 'Camarines Sur', 'Catanduanes', 'Sorsogon', 'Masbate', 'Iriga City', 'Legazpi City', 'Ligao City', 'Masbate City', 'Naga City', 'Sorsogon City', 'Tabaco City'];
} else if (region === 'Region VI – Western Visayas') {
var cities = ['City/Province', 'Aklan', 'Antique', 'Capiz', 'Guimaras', 'Iloilo', 'Negros Occidental', 'Bacolod City', 'Bago City', 'Cadiz City', 'Escalante City', 'Himamaylan City', 'Iloilo City', 'Kabankalan City', 'La Carlota City', 'Passi City', 'Roxas City', 'Sagay City', 'San Carlos City', 'Silay City', 'Sipalay City', 'Talisay City', 'Victorias City'];
} else if (region === 'Region VII – Central Visayas') {
var cities = ['City/Province', 'Bohol', 'Cebu', 'Negros Oriental', 'Siquijor', 'Bais City', 'Bayawan City', 'Bogo City', 'Canlaon City', 'Carcar City', 'Cebu City', 'Danao City', 'Dumaguete City', 'Guihulngan City', 'Lapu-Lapu City', 'Mandaue City', 'Naga City', 'Tagbilaran City', 'Talisay City', 'Tanjay City', 'Toledo City'];
} else if (region === 'Region VIII – Eastern Visayas') {
var cities = ['City/Province', 'Biliran', 'Leyte', 'Eastern Samar', 'Northern Samar', 'Samar', 'Southern Leyte', 'Baybay City', 'Borongan City', 'Calbayog City', 'Catbalogan City', 'Maasin City', 'Ormoc City', 'Tacloban City'];
} else if (region === 'Region IX – Zamboanga Peninsula') {
var cities = ['City/Province', 'Zamboanga Del Norte', 'Zamboanga Del Sur', 'Zamboanga Sibugay', 'Dapitan City', 'Dipolog City', 'Isabela City', 'Pagadian City', 'Zamboanga City'];
} else if (region === 'Region X – Northern Mindanao') {
var cities = ['City/Province', 'Bukidnon', 'Camiguin', 'Lanao Del Norte', 'Misamis Occidental', 'Misamis Oriental', 'Cagayan De Oro City', 'El Salvador City', 'Gingoog City', 'Iligan City', 'Malaybalay City', 'Oroquieta City', 'Ozamiz City', 'Tangub City', 'Valencia City'];
} else if (region === 'Region XI – Davao Region') {
var cities = ['City/Province', 'Davao De Oro', 'Davao Del Norte', 'Davao Occidental', 'Davao Oriental', 'Davao Del Sur', 'Davao City', 'Digos City', 'Mati City', 'Panabo City', 'Samal City', 'Tagum City'];
} else if (region === 'Region XII – SOCCSKSARGEN') {
var cities = ['City/Province', 'Cotabato', 'South Cotabato', 'Sultan Kudarat', 'Sarangani', 'Cotabato City', 'General Santos City', 'Kidapawan City', 'Koronadal City', 'Tacurong City'];
} else if (region === 'Region XIII – Caraga') {
var cities = ['City/Province', 'Agusan Del Norte', 'Agusan Del Sur', 'Dinagat Islands', 'Surigao Del Norte', 'Surigao Del Sur', 'Bayugan City', 'Bislig City', 'Butuan City', 'Cabadbaran City', 'Surigao City', 'Tandag City'];
} else if (region === 'BARMM') {
var cities = ['City/Province', 'Basilan', 'Lanao Del Sur', 'Maguindanao', 'Sulu', 'Tawi-Tawi'];
}
for (var i = 0; i < cities.length; i++) {
var option = document.createElement('option');
option.value = cities[i];
option.text = cities[i];
citySelect.appendChild(option);
}
}
</script>
<script>
var params = window.location.search.substr(1).split('&');
if (localStorage.getItem('siteref') != null) {
document.getElementById("siteRef").value = localStorage.getItem('siteref');
}
if (localStorage.getItem('referrer_url') != null) {
document.getElementById("referrerUrl").value = localStorage.getItem('referrer_url');
}
</script>
Run code snippetExpand snippet
I created a custom form for my website unfortunately when I tried it again yesterday the submit button redirected me to a challenge page it supposed to be redirected to a thank you page then when I tried to click the submit button of the reCAPTCHA it did not go anywhere it stucked me on that page but before it was working fine and it is not redirecting to a challenge page I don't understand why it is acting weird lately.
https://www.loom.com/share/30bda5b9626e4dbd943f18ea415b92cf?sid=9397382e-af10-4df4-a5c5-9c7649cdd444
Can someone help me? Thanks in advance.
Also I tried to disable the reCAPTCHA but it is affecting the submit button of the actual form
https://www.loom.com/share/0ac4f85328b14ede8dde6d54e83e712b?sid=26b82a1c-6a33-41d9-92d7-fc0d182410f6
Turbo Multi-language Translator
Make the better internet purchasing globaly
Turbosify SEO Speed Booster
5.0 (7)
•
Free plan available
•
Free plan available
Get better conversions by improving store loading speed
Installed
Turbo Multi-language Chat - AI Customer service in one hand
- Shopify: Automatic Discount Detail On Product Detail Page
- Megamenu implementation on Shopify Store. CSS gets messed up
- how to update total on click plus and minus button shopify cart page
- Many issues trying to register webhooks for customs shopify app. Was working till it wasnt
- How to get content of the home page in Shopify Storefront API?
