{"id":24870,"date":"2017-10-30T19:41:43","date_gmt":"2017-10-30T09:41:43","guid":{"rendered":"https:\/\/codemyui.com\/?p=24870"},"modified":"2018-05-16T16:36:13","modified_gmt":"2018-05-16T06:36:13","slug":"email-subscribe-form-button-one","status":"publish","type":"post","link":"https:\/\/codemyui.com\/email-subscribe-form-button-one\/","title":{"rendered":"Email Subscribe Form and Button In One"},"content":{"rendered":"

This is an email form<\/a> with validation that reveals the submit\/ok button when a valid email is submitted. It was designed by Ahmad Shadeed<\/a>.<\/p>\n

<\/p>\n

If you are having trouble with the pen, try the archived copy on GitHub<\/a><\/p>\n

Email Subscribe Form Snippet<\/h2>\n

\nSee the Pen Subscribe Form #4 by Ahmad Shadeed (@shadeed) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"

This is an email form with validation that reveals the submit\/ok button when a valid email is submitted. It was designed by Ahmad Shadeed.<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":24871,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[40156984],"class_list":["post-24870","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-email-signup-forms","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/10\/email-subscribe-form-and-button-in-one.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":4224,"url":"https:\/\/codemyui.com\/button-morph-email-subscription-form\/","url_meta":{"origin":24870,"position":0},"title":"Button Morph to Email Subscription Form","author":"Hima Vincent","date":"November 14, 2016","format":false,"excerpt":"This is an email subscription form designed by Ahmad Shadeed where you accept the user's email address as the input. It starts off with a button that you can use as a Call To Action element on your landing page and when you click on it, it morphs to a\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Button Morph to Email Subscription Form","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/button-morph-to-email-subscription-form.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/button-morph-to-email-subscription-form.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/button-morph-to-email-subscription-form.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/button-morph-to-email-subscription-form.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":4207,"url":"https:\/\/codemyui.com\/scan-text-coming-focus-animation\/","url_meta":{"origin":24870,"position":1},"title":"Scan Text Coming into Focus Animation","author":"Hima Vincent","date":"November 17, 2016","format":false,"excerpt":"In this text animation, we have a blurry text in the background and when the viewfinder moves over it, the text comes into focus. This animation was designed by Ahmad Shadeed. If you are having trouble with the pen, try the archived copy on GitHub Scan Text Coming into Focus\u2026","rel":"","context":"In \"distortion effect\"","block_context":{"text":"distortion effect","link":"https:\/\/codemyui.com\/tag\/distortion-effect\/"},"img":{"alt_text":"Scan Text Coming into Focus Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/scan-text-coming-into-focus-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/scan-text-coming-into-focus-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/scan-text-coming-into-focus-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/scan-text-coming-into-focus-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":4139,"url":"https:\/\/codemyui.com\/spooky-light-flickering-effect-text-css\/","url_meta":{"origin":24870,"position":2},"title":"Spooky Light Flickering Effect for Text in CSS","author":"Hima Vincent","date":"November 11, 2016","format":false,"excerpt":"Want to add some spooky effect to your webpage, then this Halloween inspired effect that you can apply to any block of text might be just the thing for you. Using pure CSS Ahmad Shadeed created this snippet. You can highlight a section of that text that will glow brighter\u2026","rel":"","context":"In \"distortion effect\"","block_context":{"text":"distortion effect","link":"https:\/\/codemyui.com\/tag\/distortion-effect\/"},"img":{"alt_text":"Spooky Light Flickering Effect for Text in CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/spooky-light-flickering-effect-for-text-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/spooky-light-flickering-effect-for-text-in-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/spooky-light-flickering-effect-for-text-in-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/spooky-light-flickering-effect-for-text-in-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29136,"url":"https:\/\/codemyui.com\/pinball-table-spring-loaded-plunger-inspired-email-signup-form\/","url_meta":{"origin":24870,"position":3},"title":"Pinball Table Spring-loaded Plunger Inspired Email Signup Form","author":"Saijo George","date":"January 7, 2020","format":false,"excerpt":"This pinball table spring-loaded plunger inspired email signup form animation was designed by Adam Kuhn using Splitting.js and will look great on any game themed websites. After entering the email address in the text field and clicking on the submit button, the spring-loaded plunger appears on the left and on\u2026","rel":"","context":"In \"email signup forms\"","block_context":{"text":"email signup forms","link":"https:\/\/codemyui.com\/tag\/email-signup-forms\/"},"img":{"alt_text":"Pinball Table Spring-loaded Plunger Inspired Email Signup Form","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Pinball-Table-Spring-loaded-Plunger-Inspired-Email-Signup-Form.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Pinball-Table-Spring-loaded-Plunger-Inspired-Email-Signup-Form.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Pinball-Table-Spring-loaded-Plunger-Inspired-Email-Signup-Form.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Pinball-Table-Spring-loaded-Plunger-Inspired-Email-Signup-Form.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":6491,"url":"https:\/\/codemyui.com\/push-notifications-newsletter-signup-button-form-animation\/","url_meta":{"origin":24870,"position":4},"title":"Push Notifications & Newsletter Signup Button to Form Animation","author":"Hima Vincent","date":"February 15, 2017","format":false,"excerpt":"With this awesome snippet designed by 14islands you can show 2 buttons side by side one for push notifications and the other one for email newsletters. When someone clicks on the push notification button it greys out and turns into a button to disable push notifications. When someone clicks on\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Push Notifications & Newsletter Signup Button to Form Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/push-notifications-newsletter-signup-button-to-form-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/push-notifications-newsletter-signup-button-to-form-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/push-notifications-newsletter-signup-button-to-form-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/02\/push-notifications-newsletter-signup-button-to-form-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":15366,"url":"https:\/\/codemyui.com\/ui-password-validation\/","url_meta":{"origin":24870,"position":5},"title":"UI for Password Validation","author":"Hima Vincent","date":"May 13, 2017","format":false,"excerpt":"Here is a simple UI for password validation designed by Sasha Tran. There are 3 criteria that the password should pass before you can submit it. 1 lowercase character 1 uppercase character 6 minimum characters You can customise these using JavaScript. As you type in the password on a login\u2026","rel":"","context":"In \"login form\"","block_context":{"text":"login form","link":"https:\/\/codemyui.com\/tag\/login-form\/"},"img":{"alt_text":"password validation UI","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/password-validation-ui.gif?fit=880%2C400&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/password-validation-ui.gif?fit=880%2C400&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/password-validation-ui.gif?fit=880%2C400&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/password-validation-ui.gif?fit=880%2C400&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24870","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=24870"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24870\/revisions"}],"predecessor-version":[{"id":25699,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/24870\/revisions\/25699"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/24871"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=24870"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=24870"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=24870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}