{"id":2733,"date":"2009-05-06T09:51:49","date_gmt":"2009-05-06T16:51:49","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=2733"},"modified":"2015-02-25T19:52:49","modified_gmt":"2015-02-26T02:52:49","slug":"62-advanced-form-styling-functionality","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/62-advanced-form-styling-functionality\/","title":{"rendered":"#62: Advanced Form Styling & Functionality"},"content":{"rendered":"
This screencast walks through the code that powers a fairly advanced web form. It utilizes jQuery to hide and show inputs as needed as well as power three plugins. One for applying fancy styling, one for validation, and one for the serializing of the inputs and AJAX submission. We then use PHP to optionally save the users name and email, as well as send the actual email.<\/p>\n
Links from Video:<\/strong><\/p>\n This screencast walks through the code that powers a fairly advanced web form. It utilizes jQuery to hide and show inputs as needed as well as power three plugins. One for applying fancy styling, one for validation, and one for the serializing of the inputs and AJAX submission. We then use PHP to optionally save […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"open","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":6474,"url":"https:\/\/css-tricks.com\/video-screencasts-5\/","url_meta":{"origin":2733,"position":0},"title":"Video Screencasts","date":"May 28, 2010","format":false,"excerpt":"#80: Regarding Wheel Invention Running time: 19:09 Sometimes \"reinventing the wheel\" is the right way to go. You get control and all the learning that goes into it. Sometimes it is a waste of time and an existing solution will save you time, money, frustration, and it may do a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":335874,"url":"https:\/\/css-tricks.com\/snippets\/css\/form-validation-styling-on-input-focus\/","url_meta":{"origin":2733,"position":1},"title":"Form Validation Styling on Input Focus","date":"March 8, 2021","format":false,"excerpt":"\/* Only show invalid ring while not focused *\/ input:not(:focus):not(:placeholder-shown):invalid { border-color: var(--color-invalid); } input:not(:focus):not(:placeholder-shown):invalid ~ .error-message { display: block; } \/* Only show valid ring while not focused and if a value is entered *\/ \/* :empty won't work here as that targets elements that have no childeren. Therefore\u2026","rel":"","context":"In \":invalid\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3492,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/inputs-that-remember-original-value\/","url_meta":{"origin":2733,"position":2},"title":"Inputs That Remember Original Value","date":"August 21, 2009","format":false,"excerpt":"var origValue = []; $('input.remember').each ( function (currentIndex) { origValue.push ( $(this).val () ); $(this).focus ( function () { $(this).removeClass(\"unfocused\"); var defaultText = $(this).val(); if ( $(this).val () == origValue [ currentIndex ] ) { $(this).val(''); } $(this).blur(function() { var userInput = $(this).val(); if (userInput == '') { $(this).val(defaultText); $(this).addClass(\"unfocused\");\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":155627,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/27-building-simple-jquery-plugin\/","url_meta":{"origin":2733,"position":3},"title":"#27: Building a Simple jQuery Plugin","date":"November 11, 2013","format":false,"excerpt":"Now that we've looked at using jQuery plugins, it is absolutely worth understanding how to build them as well. We already briefly touched on the fact that you can extend the native jQuery object if you want to. Just like: $.myFunction = function() { console.log(\"I am a function on the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":155499,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/26-using-jquery-plugin-wild\/","url_meta":{"origin":2733,"position":4},"title":"#26: Using a jQuery Plugin from the Wild","date":"November 8, 2013","format":false,"excerpt":"Everyone has seen a super cool jQuery plugin out there on the wild, wild internet right? Perhaps you only became interested in actually learning more about jQuery and JavaScript by finding a jQuery plugin and trying to use it on your own site. No shame of course. I'm sure that's\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":155729,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/28-building-complex-plugin\/","url_meta":{"origin":2733,"position":5},"title":"#28: Building a More Complex Plugin","date":"November 11, 2013","format":false,"excerpt":"Now that we understand the basics of plugin development, we can dig a little deeper. Because ultimately a plugin is a function, it provides us the scope we need to organize. Remember when we got our house in order when we were learning about templating? We can use some of\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/2733"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=2733"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/2733\/revisions"}],"predecessor-version":[{"id":155774,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/2733\/revisions\/155774"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=2733"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=2733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n