Personalized checkout and custom promotions with Shopify Scripts
Hi,
I am making a new forum with a table .when a customer enter his/her information and fill the table and click the submit button it automatically open the default mail and information should appear on the mail body.
this forum I created just to check, However the submit button is not working ,I couldn't find the reason. If you can give me a little hand I'll be really appreciated.
page link : https://eliwellnutrition.com/pages
My code:
<div class="forum-container">
<form>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required>
</div>
<table class="forum-table">
<thead>
<tr>
<th>Brand</th>
<th>Category</th>
<th>Product Name</th>
<th>Wholesale Price</th>
<th>Exp. Price</th>
<th>Req. Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>7nutrition</td>
<td>Protein</td>
<td>Whey 80</td>
<td>150</td>
<td>170</td>
<td>
<input type="number" name="req_qty1" id="req_qty1">
</td>
</tr>
<tr>
<td>7nutrition</td>
<td>Gainer</td>
<td>Bodybuilder</td>
<td>130</td>
<td>180</td>
<td>
<input type="number" name="req_qty2" id="req_qty2">
</td>
</tr>
</tbody>
</table>
<input type="button" value="Submit" onclick="submitForm()">
</form>
</div>
{% schema %}
{
"name": "forum",
"settings": [],
"presets": [
{
"name":"forum"
}
]
}
{% endschema %}
{% stylesheet %}
.forum-container {
width: 80%;
margin: 0 auto;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 10px;
}
input,
textarea {
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
margin-top: 20px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #dddddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
input[type="number"] {
width: 80px;
}
{% endstylesheet %}
{% javascript %}
function submitForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var tableData = "";
var rows = document.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName("td");
for (var j = 0; j < cells.length; j++) {
if(j === 5) {
var qty_id = "req_qty" + (i+1);
tableData += document.getElementById(qty_id).value + " ";
} else {
tableData += cells[j].innerHTML + " ";
}
}
tableData += "\n";
}
var body = "Name: " + name + "\nEmail: " + email + "\nPhone: " + phone + "\n\n" + tableData;
window.location.href = "mailto:j.thusitha@gmail.com?subject=Forum%20Data&body=" + encodeURIComponent(body);
}
{% endjavascript %}
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025