How to Add a Pop Up Template 2 - WordPress Popup Plugin Tutorial
Image
HTML Text
<div class="md:mt-20 pt-6"> <h1 class="text-3xl sm:text-2xl text-black font-serif text-bold mb-4">Don't miss out.</h1> <p class="text-base">Sign up for our newsletter tos stay in the loop.</p> </div> <div class="w-full mt-6 rounded-full">Error: Contact form not found.
</div>
Contact 7
<div class="flex">
<div class="w-full md:w-1/2">
[email* your-email class:flex-1 class:bg-gray-100 class:appearance-none class:text-base class:p-2 class:pl-4 class:border class:text-grey-dark class:rounded-l-full class:focus:outline-none placeholder "email@example.com"] </div>
[submit class:btn-yellow class:bg-yellow-500 class:text-white class:text-base class:font-semibold class:tracking-wide class:uppercase class:p-2 class:rounded-r-full "Subscribe"]
</div>
CSS Code
/*Contact Form */
.fab-container .wpcf7-form input {
appearance: none;
outline: none;
border: none;
}
.fab-container .wpcf7-form .wpcf7-submit {
color:white;
font-weight: 600;
width: 100%;
}
.btn-yellow:hover {
background-color: #d97706 !important;
}
.jconfirm-fab-modal-31 .featured-img-container {
max-width: 160px;
}Explore Docs
- Cases
- Introduction
- Reacts
- Template
- How To Add A Pop Up Template 1 WordPress Popup Plugin Tutorial
- How To Add A Pop Up Template 10 WordPress Popup Plugin Tutorial
- How To Add A Pop Up Template 11 WordPress Popup Plugin Tutorial
- How To Add A Pop Up Template 12 WordPress Popup Plugin Tutorial
- How To Add A Pop Up Template 2 WordPress Popup Plugin Tutorial
- How To Add A Pop Up Template 3 WordPress Popup Plugin Tutorial
- How To Add A Pop Up Template 4 WordPress Popup Plugin Tutorial
- How To Add A Pop Up Template 5 WordPress Popup Plugin Tutorial
- How To Add A Pop Up Template 6 WordPress Popup Plugin Tutorial
- How To Add A Pop Up Template 7 WordPress Popup Plugin Tutorial
- How To Add A Pop Up Template 8 WordPress Popup Plugin Tutorial
- How To Add A Pop Up Template 9 WordPress Popup Plugin Tutorial
- Tutorial
Related Post
Image Html Text <div class="lg:flex-shrink-0 p-8 xl:p-14 xl:pt-8 xl:pr-0"> <h1 class="text-bold text-3xl text-white py-4">Free Unlimited Migrations. Faster WordPress Websites. 24/7 Expert Support. Cloudways has it All!</h1> <p class="text-xl text-white mb-8">Get <span class="text-green-400">15%</span> for 3 months <br> to Get Started.</h3> <div class="mb-9 py-2 px-5 border-dashed inline-block text-bold text-white text-xs border-2 border-white rounded"> PROMO CODE: <strong>WP15</strong> […]
Image Html Text <div class="max-w-full mx-auto"> <div class="lg:flex-shrink-0 p-5 sm:p-12 text-center order-first lg:order-last"> <h1 class="text-bold text-2xl text-pink-400 py-4">BEFORE YOU GO...</h1> <h3 class="text-5xl text-bold mb-5">Hey, wait!</h3> <p class="text-grey-500 text-md">Enter you email and get sale coupon code</p> <div class="w-full mt-2 rounded-full mb-4"> </div> </div> </div> Contact Form 7 <div class="max-w-sm mx-auto p-1 pr-0 block"> <div […]
Image HTML Text <div class="bg-gray-100"> <div class="max-w-lg mx-auto p-5 pb-0 text-center"> <h1 class="text-bold text-3xl text-indigo-800 pb-4 tracking-tight">Subscribe to Unlock</h1> <div class="w-full mt-2 rounded-full mb-4"> </div> </div> </div> Contact Form 7 <div class="max-w-sm mx-auto p-1 pr-0 block"> <div class="md:w-1/2 pr-2 mr-2 mb-6"> [email* your-email class:w-full class:bg-indigo-100 class:border class:appearance-none class:py-2 class:px-5 class:text-base class:text-grey-dark class:bg-grey-600 placeholder […]