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 %}
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024