{"id":4224,"date":"2016-11-14T11:11:37","date_gmt":"2016-11-14T01:11:37","guid":{"rendered":"http:\/\/codemyui.com\/?p=4224"},"modified":"2018-05-17T09:51:46","modified_gmt":"2018-05-16T23:51:46","slug":"button-morph-email-subscription-form","status":"publish","type":"post","link":"https:\/\/codemyui.com\/button-morph-email-subscription-form\/","title":{"rendered":"Button Morph to Email Subscription Form"},"content":{"rendered":"<p>This is an <a href=\"https:\/\/codemyui.com\/tag\/email-signup-forms\/\">email subscription form<\/a> designed by <a href=\"http:\/\/twitter.com\/shadeed9\" target=\"_blank\" rel=\"noopener\">Ahmad Shadeed<\/a> where you accept the user&#8217;s email address as the <a href=\"https:\/\/codemyui.com\/category\/input-field\/\">input<\/a>. It starts off with a <a href=\"https:\/\/codemyui.com\/category\/button\/\">button<\/a> that you can use as a <a href=\"https:\/\/codemyui.com\/tag\/cta\/\">Call To Action<\/a> element on your landing page and when you click on it, it morphs to a <a href=\"https:\/\/codemyui.com\/tag\/text-field\/\">text field<\/a> where you can enter an email address and a submit button. <\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/5935da4564d627d5d942a99dfdcc6814\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Button Morph to Email Input Snippet<\/h2>\n<p class='codepen'  data-height='494' data-theme-id='0' data-slug-hash='rVpXmB' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen Subscribe Form #1 by Ahmad Shadeed (@shadeed) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This is an email subscription form designed by Ahmad Shadeed where you accept the user&#8217;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 text field where you can&hellip;<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/button-morph-email-subscription-form\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":4229,"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":[94913,40156984,13170349,4920130],"class_list":["post-4224","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-button","tag-email-signup-forms","tag-input-field","tag-text-field","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/button-morph-to-email-subscription-form.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":14347,"url":"https:\/\/codemyui.com\/rounded-button-email-notification\/","url_meta":{"origin":4224,"position":0},"title":"Rounded Button to Email Notification","author":"Hima Vincent","date":"April 11, 2017","format":false,"excerpt":"We have seen a few different button morphing to email form\/push notification field, etc, this is another take on it designed by Danny Iovane. Great when you have limited space to play around with on your web page, you can use this button to reveral the email form on click.\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/email-notification-button.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/email-notification-button.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/email-notification-button.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/email-notification-button.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25454,"url":"https:\/\/codemyui.com\/single-field-email-registration-form-validation\/","url_meta":{"origin":4224,"position":1},"title":"Single Field Email Registration Form with Validation","author":"Saijo George","date":"February 16, 2018","format":false,"excerpt":"Here is a simple email registration form designed by Derek Torsani on Dribbble and converted to code by Elior Tabeka. There is a single text filed and on activating it by clicking on it the inactive OK button appears and on successful validation of the input as an email address,\u2026","rel":"","context":"In \"email signup forms\"","block_context":{"text":"email signup forms","link":"https:\/\/codemyui.com\/tag\/email-signup-forms\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/02\/single-field-email-registration-form-with-validation.gif?fit=440%2C220&ssl=1&resize=350%2C250","width":350,"height":250},"classes":[]},{"id":29147,"url":"https:\/\/codemyui.com\/bouncy-subscription-button-to-email-field-microinteraction\/","url_meta":{"origin":4224,"position":2},"title":"Bouncy Subscription Button to Email Field MicroInteraction","author":"Saijo George","date":"January 7, 2020","format":false,"excerpt":"This fancy CTA button has a sweet micro-interaction on click, it animates into a text field asking the user to enter their email effectively acting as an email subscription form. It was designed by Valery Alikin. If you are having trouble with the pen, try the archived copy on GitHub\u2026","rel":"","context":"In \"email signup forms\"","block_context":{"text":"email signup forms","link":"https:\/\/codemyui.com\/tag\/email-signup-forms\/"},"img":{"alt_text":"Bouncy Subscription Button to Email Field MicroInteraction","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Bouncy-Subscription-Button-to-Email-Field-MicroInteraction.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\/Bouncy-Subscription-Button-to-Email-Field-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Bouncy-Subscription-Button-to-Email-Field-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Bouncy-Subscription-Button-to-Email-Field-MicroInteraction.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25374,"url":"https:\/\/codemyui.com\/button-email-optin-dropdown\/","url_meta":{"origin":4224,"position":3},"title":"Button with Email Optin Dropdown","author":"Saijo George","date":"January 29, 2018","format":false,"excerpt":"This email optin form appears as a button and when you click on it, the text field asking for your email address is revealed. It was designed by Adam Rasheed. If you are having trouble with the pen, try the archived copy on GitHub Email Optin Dropdown Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Button with Email Optin Dropdown","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/button-with-email-optin-dropdown.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/button-with-email-optin-dropdown.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/button-with-email-optin-dropdown.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/01\/button-with-email-optin-dropdown.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":4753,"url":"https:\/\/codemyui.com\/speech-bubble-themed-contact-form\/","url_meta":{"origin":4224,"position":4},"title":"Speech Bubble Themed Contact Form","author":"Hima Vincent","date":"December 6, 2016","format":false,"excerpt":"Speech bubbles (also called speech balloons \/ chat bubbles) are a graphic convention used in comic books and cartoons to allow words to be understood as something the character has spoken out loud. In this contact form designed by Valentin, we see a chat bubble that has 2 input fields\u2026","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Speech Bubble Themed Contact Form","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/speech-bubble-themed-contact-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\/12\/speech-bubble-themed-contact-form.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/speech-bubble-themed-contact-form.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/speech-bubble-themed-contact-form.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":12446,"url":"https:\/\/codemyui.com\/search-icon-search-bar-morph\/","url_meta":{"origin":4224,"position":5},"title":"Search Icon To Search Bar Morph","author":"Hima Vincent","date":"March 9, 2017","format":false,"excerpt":"This fancy search icon will morph into a search field on click, it was designed by Gregor Adams. If you are having trouble with the pen, try the archived copy on GitHub Seach Input Animation Snippet","rel":"","context":"In \"click\u00a0animation\"","block_context":{"text":"click\u00a0animation","link":"https:\/\/codemyui.com\/tag\/click-animation\/"},"img":{"alt_text":"Search Icon To Search Bar Morph","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/search-icon-to-search-bar-morph.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/search-icon-to-search-bar-morph.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/search-icon-to-search-bar-morph.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/search-icon-to-search-bar-morph.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/4224","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=4224"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/4224\/revisions"}],"predecessor-version":[{"id":25992,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/4224\/revisions\/25992"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/4229"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=4224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=4224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=4224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}