Style Elementor pro forms using Custom CSS

by | Apr 4, 2021 | 0 comments

Style Elementor pro forms using Custom CSS

by | Apr 4, 2021 | CSS Tips and Tricks | 0 comments



Learn how to style Elementor pro forms using simple custom CSS code, things that you can’t do using Elementor theme styles.

►Get Elementor pro:
https://bit.ly/designelementorpro

⚡️⚡️ CSS DISCUSSED IN THE VIDEO ⚡️⚡️⚡️

/*START OF THE CODE*/
.my-form .elementor-field-type-textarea .elementor-field-label{

color: purple;
font-size: 12px;

}

.my-form input[type=”text”]
{
border: 2px solid purple;
background: purple!important;
color: white!important;
}

.my-form input[type=”email”]:invalid
{
border: 1px solid red;
}

.my-form select{
background: purple!important;
color: white!important;
border-radius: 10px;
}

/*Replace my-form with your own class name added in the advanced tab and play with other values*/

/*END OF THE CODE*/

⚡️⚡️ OUR FINEST RECOMMENDATIONS ⚡️⚡️⚡️

If you like my work and would like to support the channel, consider purchasing our handpicked affiliate plugins and themes from below.

DISCLAIMER : I may earn a small commission from the links below that won’t cost you more but rather help me create more such videos. My recommendations don’t affect the content that I create.

► ELEMENTOR AND ADD-ONS ◄

►Elementor pro – https://bit.ly/designelementorpro
►Dynamic content plugin – https://bit.ly/designdynamicooo
► Unlimited elements pro – https://bit.ly/designunlimited
►Crocoblock – https://bit.ly/designcrocoblock
►Ultimate add-ons – https://bit.ly/designuae
►Exclusive add-ons – https://bit.ly/dsexclusive

► BEST WORDPRESS HOSTING ◄

►SiteGround – http://bit.ly/dssiteground

► BEST WORDPRESS THEMES ◄

►Astra Pro – https://bit.ly/designuae
►Neve Pro – https://shrsl.com/2a728
►Gutenix pro – https://bit.ly/designgutenix

► BEST WORDPRESS PLUGINS ◄

►WPForms – https://shrsl.com/258qs
►WPVivid pro – https://bit.ly/designwpvivid

source

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>