Custom Lead Form in Shopify [without any App]

Make sure to follow Umair Javed on FACEBOOK

{% form 'contact' %}
  {% if form.posted_successfully? %}
    <p class="success-message">Thank you! Your message has been sent.</p>
  {% endif %}

  {% if form.errors %}
    <ul class="error-message">
      {% for field in form.errors %}
        <li>{{ field | capitalize }} {{ form.errors.messages[field] }}</li>
      {% endfor %}
    </ul>
  {% endif %}

  <div class="lead-form">
    <label for="name">Name</label>
    <input type="text" id="name" name="contact[name]" required>

    <label for="email">Email</label>
    <input type="email" id="email" name="contact[email]" required>

    <label for="phone">Phone</label>
    <input type="tel" id="phone" name="contact[phone]" required>

    <label for="service">Service Required</label>
    <select id="service" name="contact[service]">
      <option value="">Select a service</option>
      <option value="Website Design">Website Design</option>
      <option value="SEO">SEO</option>
      <option value="Social Media">Social Media</option>
      <option value="Marketing Consultation">Marketing Consultation</option>
    </select>

    <label for="date">Preferred Date</label>
    <input type="date" id="date" name="contact[date]">

    <label for="time">Preferred Time</label>
    <input type="time" id="time" name="contact[time]">

    <label for="message">Message</label>
    <textarea id="message" name="contact[body]" rows="4"></textarea>

    <button type="submit">Submit</button>
  </div>
{% endform %}

<style>
  .lead-form {
    display: grid;
    gap: 1rem;
    max-width: 500px;
    margin: 2rem auto;
    font-size: 1.6rem;
padding: 20px;
border: 2px solid #fff;
border-radius: 15px;
  }

  .lead-form input,
  .lead-form select,
  .lead-form textarea,
  .lead-form button {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    font-size: 1.6rem;
outline:none;
  }
.lead-form input:focus, .lead-form select:focus,.lead-form textarea:focus,.lead-form button:focus{
box-shadow:none;
transition-duration: 0.3s;
border: 2px solid #333;
}

  .lead-form button {
    background-color: #000;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s;
outline: none; box-shadow: none
  }

  .lead-form button:hover {
    background-color: #444;
  }

  .success-message {
    max-width: 500px;
    margin: 1rem auto;
    padding: 1rem;
    background-color: #e6f9e6;
    border: 1px solid #8bc34a;
    color: #2e7d32;
    font-size: 1.6rem;
    text-align: center;
    border-radius: 6px;
  }

  .error-message {
    max-width: 500px;
    margin: 1rem auto;
    padding: 1rem;
    background-color: #ffe6e6;
    border: 1px solid #e53935;
    color: #b71c1c;
    font-size: 1.6rem;
    border-radius: 6px;
  }
</style>