At the beginning there is such a form:
After the focus, it becomes:
I made a block with the position:relative form, with the focus I increased the width and length, then I created a block with two elements of the input and button forms. Gave this block absolute positioning, placed as needed. As a result, with focus, I show this block with form elements, and when blur I remove it. But there was such a problem that I cannot click on the elements of the form themselves, because then the blur event occurs and the form collapses, the elements naturally disappear.
PS It is necessary to open the whole screen, but it’s hard to see, this is a piece of layout. PSS Do not look at the adaptive, it is not required here :)
var textarea = document.querySelector('.send_place textarea'); console.log(textarea); textarea.addEventListener('focus', function(event) { if (event.target.tagName == 'TEXTAREA' || event.target.tagName == 'INPUT' || event.target.tagName == 'BUTTON') { var hiddenTextareaElements = document.querySelector('.hidden_send_place'); hiddenTextareaElements.style.display = 'block'; var deletteLinks = document.querySelector('.footer_number_email'); deletteLinks.style.display = 'none'; event.stopPropagation(); } }); textarea.addEventListener('blur', function(event) { if (event.target.tagName == 'TEXTAREA' || event.target.tagName == 'INPUT' || event.target.tagName == 'BUTTON') { var hiddenTextareaElements = document.querySelector('.hidden_send_place'); hiddenTextareaElements.style.display = 'none'; var deletteLinks = document.querySelector('.footer_number_email'); deletteLinks.style.display = 'block'; event.stopPropagation(); } }); footer { background-color: #f5f5f5; padding-top: 18px; border-top: 1px solid #ccc; padding-bottom: 60px } footer .footer_links { float: left } footer .footer_links ul { list-style: none } footer .footer_links ul li a { color: #474747; font-size: 14px; text-decoration: none; line-height: 20px } footer .footer_links ul li a:hover { text-decoration: underline } footer .footer_album_links_copyright { text-align: center; float: left; margin-left: 200px } footer .footer_album_links_copyright .footer_album_links ul li { display: inline-block; margin-left: 10px } footer .footer_album_links_copyright .footer_album_links ul li:first-child { margin-left: 0 } footer .footer_album_links_copyright .footer_album_links ul li:first-child a { position: relative } footer .footer_album_links_copyright .footer_album_links ul li:first-child a:after { content: '-'; position: absolute; font-size: 14px; color: #474747; top: -3px; right: -9px } footer .footer_album_links_copyright .footer_album_links ul li:last-child a { position: relative } footer .footer_album_links_copyright .footer_album_links ul li:last-child a:before { content: '-'; position: absolute; font-size: 14px; color: #474747; top: -3px; left: -9px } footer .footer_album_links_copyright .footer_album_links ul li a { color: #474747; font-size: 14px; text-decoration: none; line-height: 20px } footer .footer_album_links_copyright .footer_album_links ul li a:hover { text-decoration: underline } footer .footer_album_links_copyright .copyright { margin-top: 40px } footer .footer_album_links_copyright .copyright p { font-size: 16px } footer .footer_album_links_copyright .copyright p span { font-weight: 700; text-transform: uppercase } footer .footer_contacts { float: right; text-align: right } footer .footer_contacts .footer_contact_send h6 { line-height: 20px; font-size: 12px } footer .footer_contacts .footer_contact_send .send_place { margin-top: 8px; position: relative } footer .footer_contacts .footer_contact_send .send_place i { position: static; display: inline-block; color: #cfd4ed; transform: translateY(-4px) rotate(180deg); cursor: auto } footer .footer_contacts .footer_contact_send .send_place textarea { height: 24px; border: 1px solid #cfd4ed; border-radius: 3px; resize: none; width: 82px } footer .footer_contacts .footer_contact_send .send_place textarea:focus { height: 66px; padding-bottom: 24px; width: 300px; padding-left: 20px; padding-top: 10px } footer .footer_contacts .footer_contact_send .send_place .hidden_send_place { position: absolute; bottom: 2px; right: 0; width: 300px; display: none } footer .footer_contacts .footer_contact_send .send_place .hidden_send_place input { height: 20px; border: 1px solid #ff7519; padding-left: 20px; position: absolute; left: 21px; bottom: 0 } footer .footer_contacts .footer_contact_send .send_place .hidden_send_place button { width: 86px; height: 20px; border: 1px solid #ff7519; position: absolute; color: #ff7519; font-size: 14px; right: 0; bottom: 0 } footer .footer_contacts .footer_number_email { margin-top: 10px } footer .footer_contacts .footer_number_email a { text-decoration: none; color: #294ca5; font-size: 14px } footer .footer_contacts .footer_number_email a:last-child { border-left: 1px solid #294ca5; margin-left: 10px; padding-left: 10px } <footer class="clearfix"> <div class="container"> <div class="footer_links"> <ul> <li><a href="#">Как работать на портале (справка)</a></li> <li><a href="#">Торговые инструменты</a></li> <li><a href="#">Рекламные площади</a></li> <li><a href="#">Партнерская программа</a></li> </ul> </div> <div class="footer_album_links_copyright"> <div class="footer_album_links"> <ul> <li><a href="#">Правила публикации товаров</a></li> <li><a href="#">Пользовательское соглашение</a></li> <li><a href="#">Политика конфиденциальности</a></li> </ul> </div> <div class="copyright"> <p>© 2017 <span>neftemoll.ru.</span> Все права защищены.</p> </div> </div> <div class="footer_contacts"> <div class="footer_contact_send"> <h6>Обратная связь</h6> <div class="send_place"> <i class="icon-duble-arrow"></i> <textarea></textarea> <div class="hidden_send_place"> <input type="text" placeholder="Ваш E-mail" required> <button>Отравить</button> </div> </div> </div> <div class="footer_number_email"> <a href="tel:880007777777">(8)-800-777-77-77</a> <a href="mailto:corporation@mail.ru">corporation@mail.ru</a> </div> </div> </div> </footer> 
