logo
  • Home
  • About
  • Services
  • Portfolio
  • Contact Us
  • Submit Guest post
Fancy Effects To Input Fields Using Jquery Plugin

Fancy Effects To Input Fields Using Jquery Plugin

May 27, 2016 No comments Article SEO Website Designing

Hi Friends, Today i will tell you about how to add fancy effects to input fields using jquery plugin. After using the plugin your input field looks very pretty and your user feel good to type in your input fields. It is very easy and simple to add it in your website.

Benefits of using effects in the input fields:

  • It help to attract the users of your website.
  • it increases your contacts(fill the form) and query.
  • It increases your subscribers
  • This kind of inputs enhance user experience
  • You can add easily in your website.
  • You can apply 5 different effects
  • Fancy Effects To Input Fields Using Jquery Plugin Live Demo:

    See the Live Demo and download the code below:

    SEO Website Designing Live Demo      SEO Website Designing Download

    For More information about Website Design you can click below:
    Pure CSS Button With Lightening Glowing and Shining Effect
    Create Expand Collapse Sliding Menu Using jQuery
    Background Color Change Automatically Using Jquery
    How to add smart slider Facebook Like Box Pop-up
    Learn Ajax For Beginners In Hindi
    33 New Awesome Features in CSS3 and CSS4
    Simple Show Hide Accordion Code Using Jquery
    Add Diwali Fireworks Using Jquery In Your Website
    Add CKEditor in Html Form using Jquery
    Jquery Me Simple Slider Kaise Bnate Hai
    Learn JQUERY Code Step By Step For Beginners

    How to Add Fancy Effects To Input Fields Using Jquery Plugin:

    You have to follow some steps to add effect to your input fields(text, textarea etc). These Steps are.

    Step1:  Download the code from below.

    SEO Website Designing Download

    Step2: After that open your webpage in any code editor.




    Step3: Add below code in your web page.

    Stylesheet Code:

    <link rel="stylesheet" href="css/fancyInput.css">
    <link rel="stylesheet" href="css/styles.css">

    <link rel="stylesheet" href="css/fancyInput.css"> <link rel="stylesheet" href="css/styles.css">

    You can change the css code according to your requirement.
    HTML Body Code:

    <h1 style="margin: 20px;">Fancy Effects To Input Fields Using Jquery Plugin</h1>
    &nbsp;
    <div style="background: #44B3C2; text-align: center;">
    <div style="margin: 10px 0px;"><input class="fancy_effect1" type="text" placeholder="Your Input Effect 1" /></div>
    &nbsp;
    <div style="margin: 10px 0px;"><input class="fancy_effect2" type="text" placeholder="Your Input Effect 2" /></div>
    &nbsp;
    <div style="margin: 10px 0px;"><input class="fancy_effect3" type="text" placeholder="Your Input Effect 3" /></div>
    &nbsp;
    <div style="margin: 10px 0px;"><input class="fancy_effect4" type="text" placeholder="Your Input Effect 4" /></div>
    &nbsp;
    <div style="margin: 10px 0px;"><input class="fancy_effect5" type="text" placeholder="Your Input Effect 5" /></div>
    </div>

    <h1 style="margin: 20px;">Fancy Effects To Input Fields Using Jquery Plugin</h1> &nbsp; <div style="background: #44B3C2; text-align: center;"> <div style="margin: 10px 0px;"><input class="fancy_effect1" type="text" placeholder="Your Input Effect 1" /></div> &nbsp; <div style="margin: 10px 0px;"><input class="fancy_effect2" type="text" placeholder="Your Input Effect 2" /></div> &nbsp; <div style="margin: 10px 0px;"><input class="fancy_effect3" type="text" placeholder="Your Input Effect 3" /></div> &nbsp; <div style="margin: 10px 0px;"><input class="fancy_effect4" type="text" placeholder="Your Input Effect 4" /></div> &nbsp; <div style="margin: 10px 0px;"><input class="fancy_effect5" type="text" placeholder="Your Input Effect 5" /></div> </div>

    The above code create the text boxes. Please don’t forget to add the class of fancy effects. You can add the class (fancy_effect) according to the effects.




    Jquery Code:

    <script src="js/jquery-1.9.1.min.js"></script><script src="js/fancyInput.js"></script>
    <script type="text/javascript">
    			$(document).ready(function(){
     
    				$(".fancy_effect1").fancyInput()[0];
    				$(".fancy_effect2").fancyInput()[1];
    				$(".fancy_effect3").fancyInput()[2];
    				$(".fancy_effect4").fancyInput()[3];
    				$(".fancy_effect5").fancyInput()[4];
    			});
     
    // ]]></script>

    <script src="js/jquery-1.9.1.min.js"></script><script src="js/fancyInput.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".fancy_effect1").fancyInput()[0]; $(".fancy_effect2").fancyInput()[1]; $(".fancy_effect3").fancyInput()[2]; $(".fancy_effect4").fancyInput()[3]; $(".fancy_effect5").fancyInput()[4]; }); // ]]></script>

    You can apply any effect out of 5 effects using the function fancyInput()[0-4];.

    Step4: After saving all the code see the magic in your browser.

    For any problem you see the live demo and download the code from below.

    SEO Website Designing Live Demo      SEO Website Designing Download

    Enjoy Fancy Effects To Input Fields Using Jquery Plugin

    Important Note: This effects doesn’t work on internet explorer

    Read About Other Interesting Things below.

    1. HOW TO WRITE CSS CODE FOR SAFARI BROWSER ONLY (NOT CHROME)
    2. ADD GOOGLE CUSTOM SEARCH ENGINE ON YOUR WEBSITE
    3. DISABLE ADDING NOODP META ROBOTS TAG IN YOAST PLUGIN
    4. Basics of Social Media Optimization Services
    5. On Page Search Optimization Services
    6. How to Create a Website from scratch for beginners
    7. How To Write a Blog for Website and Content Marketing
    8. Website Promotion – Need For All Websites
    9. Important Things to Think Before Graphic Designs
    10. Remember Things Before Email Marketing

    If You like my blog, kindly Subscribe it.

    Share this:

    • Tweet
    • Telegram
    • WhatsApp
    • Share on Tumblr
    • Pocket
    • Email

    Related

    Categories: Website Design

    Tags: jquery

    Leave a Reply Cancel reply

    Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,504 other subscribers

    Categories

    • Angular (1)
    • Content Marketing (2)
    • Email Marketing (3)
    • Graphics Design (3)
    • Keyword Strategy (1)
    • Other (3)
    • Search Engine Optimization (10)
    • Social Media Optimization (4)
    • Website Design (67)
    • WordPress (18)
  • Subscribe to Blog via Email

    Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,504 other subscribers

  • Tag Cloud

    Add Social Share button in WordPress without Plugins Bootstrap center div on screen with flexbox center div vertically and horizontally in body center div vertically and horizontally responsive Center Elements Vertically And Horizontally Using Flex Centering in CSS Create Your Own Fast Social Sharing Buttons For WordPress Creating Scroll-based Animations using jQuery and CSS3 CSS CSS3 CSS3 Variables CSS custom properties CSS Variables custom share buttons wordpress Disable Mouse Right Click Using Jquery disable right click with jquery Disabling right mouse click menu facebook Get to Know the CSS Object Fit and Position Properties How Can You Use CSS Variables HOW TO CODE A RESPONSIVE EMAILER OR NEWSLETTER How to Create Social Sharing Button without any Plugin HOW TO DESIGN A RESPONSIVE EMAILER OR NEWSLETTER how to disable right click menu in html page How to prevent Right Click option using jquery How to Restore WordPress Website from Backup Manually How to use CSS Variables HTML HTML5 javascript jquery jQuery make div slide in when scrolling down page Know About CSS Object Fit and Position Properties Meta Tags Mysql object-fit object-fit/object-position object-position Responsive Website Sliding Div When Scroll Down Page Using Jquery Vertical Centering - Solved by Flexbox Webpage Scrolling Animation Effects with CSS3 & jQuery What You Need To Know About CSS Variables wordpress
  • Copyright SEO Website Designing 2015

    loading Cancel
    Post was not sent - check your email addresses!
    Email check failed, please try again
    Sorry, your blog cannot share posts by email.