Join US Form2

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Add this line inside the <head> tag -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Farm Vibrance - Contact Us</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl5w2ynyQ714jdWR/Rf+G1I9Y/YXK8fQVELh3vz6dz" crossorigin="anonymous"></script>
</head>
<body>
<h1>Farm Vibrance - Contact Us</h1>
<p>Sign up to sell your certified fresh produce through our ecommerce store.</p>
<form id="contact-form">
<label for="name">Name (required):</label>
<input type="text" id="name" name="name" required>

<label for="email">Email (required):</label>
<input type="email" id="email" name="email" required>

<label for="mobile">Mobile (10 digits):</label>
<input type="tel" id="mobile" name="mobile" pattern="[0-9]{10}" required>

<label for="organization">Do you represent an organization? (Yes/No):</label>
<select id="organization" name="organization">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>

<div id="gst-number" style="display:none;">
<label for="gst">GST Number (15 alphanumeric characters):</label>
<input type="text" id="gst" name="gst" pattern="[A-Za-z0-9]{15}">
</div>

<label for="fssai">Do you have an FSSAI License? (Yes/No):</label>
<select id="fssai" name="fssai">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>

<div id="fssai-number" style="display:none;">
<label for="fssaiLicense">FSSAI License Number:</label>
<input type="text" id="fssaiLicense" name="fssaiLicense">
</div>

<label for="address1">Address Line 1:</label>
<input type="text" id="address1" name="address1">

<label for="address2">Address Line 2:</label>
<input type="text" id="address2" name="address2">

<label for="city">City (required):</label>
<input type="text" id="city" name="city" required>

<label for="state">State (required):</label>
<input type="text" id="state" name="state" required>

<label for="pincode">Pin Code (6 digits):</label>
<input type="text" id="pincode" name="pincode" pattern="[0-9]{6}" required>
<label for="produce">Type of Produce:</label>
<div id="produce" name="produce">
<div>
<input type="checkbox" id="fruits" name="fruits">
<label for="fruits">Fruits</label>
</div>
<div class="sub-produce" id="fruits-sub" style="display:none;">
<input type="checkbox" id="freshFruit" name="freshFruit">
<label for="freshFruit">Fresh</label>
<input type="checkbox" id="frozenFruit" name="frozenFruit">
<label for="frozenFruit">Frozen</label>
<input type="checkbox" id="cannedFruit" name="cannedFruit">
<label for="cannedFruit">Canned</label>
<input type="checkbox" id="driedFruit" name="driedFruit">
<label for="driedFruit">Dried</label>
<input type="checkbox" id="fruitSauces" name="fruitSauces">
<label for="fruitSauces">Sauces</label>
</div>
<!-- Add similar code blocks for Vegetables, Plants, Flowers, Gourmet, and Other -->
</div>

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4"></textarea>

<button type="submit">Submit</button>
</form>
<script src=$(document).ready(function() {
$('#organization').on('change', function() {
if ($(this).val() === 'yes') {
$('#gst-number').show();
} else {
$('#gst-number').hide();
}
});

$('#fssai').on('change', function() {
if ($(this).val() === 'yes') {
$('#fssai-number').show();
} else {
$('#fssai-number').hide();
}
});

// Add this part to the existing scripts.js
$('#fruits').on('change', function() {
if ($(this).prop('checked')) {
$('#fruits-sub input').prop('checked', true);
} else {
$('#fruits-sub input').prop('checked', false);
}
});

// Add similar code blocks for Vegetables, Plants, Flowers, Gourmet, and Other

<!-- Add this line inside the form tag, just before the submit button -->
<div class="g-recaptcha" data-sitekey=6Lf9JzElAAAAAJ-tVweSVUXskXJSGWN-xRFkfhtw></div>

$('#contact-form').on('submit', function(event) {
event.preventDefault();

// Add your logic to send the form data to your server or service.
// Example: Call an AJAX function to submit the form data.

alert('Thank you for signing up! We will be in touch soon.');
$('#contact-form').trigger('reset');
});
});
></script>
</body>
</html>
<style>
body {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 0 auto;
padding: 2rem;
}

h1 {
color: #4CAF50;
text-align: center;
}

form {
display: flex;
flex-direction: column;
}

label, input, textarea, button {
margin-bottom: 1rem;
text-align: left;
}

input, textarea, button, {
padding: 0.5rem;
font-size: 1rem;
width: 50%;
}
select, label {
padding: 0rem;
font-size: 1rem;
width: 40%;
}
select#organization, {
padding: 0rem;
font-size: 1rem;
width: 40%;
}
button {
background-color: #4CAF50;
color: white;
cursor: pointer;
border: none;
}

button:hover {
background-color: #45a049;
}
</style>

Wholesale Products

From
Rs. 66.00 | Rs. 80.00
From
Rs. 69.00 | Rs. 100.00
From
Rs. 101.00 | Rs. 130.00
From
Rs. 80.00 | Rs. 100.00
From
Rs. 78.00 | Rs. 120.00
From
Rs. 78.00 | Rs. 120.00
From
Rs. 199.00 | Rs. 260.00

Roquette Wild

From
Rs. 104.00 | Rs. 160.00
From
Rs. 120.00 | Rs. 180.00
From
Rs. 72.00 | Rs. 110.00
From
Rs. 39.00 | Rs. 60.00
From
Rs. 59.00 | Rs. 90.00
From
Rs. 98.00 | Rs. 150.00
From
Rs. 65.00 | Rs. 100.00
From
Rs. 113.00 | Rs. 150.00