Customizing the Form Style using CSS

<optipub-subscribe class="form-container" publication-id="1" effort-id="123"> 
  <template v-slot:input-group>
    <h2>Subscribe to OptiPub</h2>
    <input type="text" name="first_name" placeholder="First Name" required>
    <input type="text" name="last_name" placeholder="Last Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="tel" name="phone" placeholder="Phone Number">
    <input type="hidden" name="enable_addon" value="SMS">
    <button type="submit">Subscribe Now!</button>
    <p>
      *I agree to receive recurring automated promotional text messages from OptiPub at the
      phone number provided. Message and data rates apply. Reply STOP anytime to stop receiving
      text messages. Message frequency varies.
    </p>
  </template>
  <template v-slot:success-alert>
    <div class="popup success">
      <span>Subscribed Successfully!</span>
    </div>
  </template>
  <template v-slot:error-alert>
    <div class="popup error">
      <span>Subscribe Failed.</span>
    </div>
  </template>
</optipub-subscribe>

<style>
  .form-container {
    max-width: 600px;
    background-color: #fff;
    padding: 20px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
  }

  .form-container h2 {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin: 10px auto 20px;
  }

  .form-container p {
    font-size: 0.8rem;
    text-align: center;
    margin: 20px auto;
  }

  .form-container input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .form-container button {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background-color: #f40204;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
  }

  .popup {
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
  }

  .popup.success {
    display: block !important;
    border: 1px solid #155724;
    background-color: #d4edda;
    color: #155724;
  }

  .popup.error {
    display: block !important;
    border: 1px solid #721c24;
    background-color: #f8d7da;
    color: #721c24;
  }
</style>