Title: Style
Last modified: December 24, 2018

---

# Style

 *  Resolved [mchai888](https://wordpress.org/support/users/mchai888/)
 * (@mchai888)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/style-22/)
 * Hi,
 * Have a style wish list, please see the images in the link.
 * Thank you.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fstyle-22%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [Rodrigo D’Agostino](https://wordpress.org/support/users/dt4ils/)
 * (@dt4ils)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/style-22/#post-11025721)
 * This is something you can create by yourself. Use the `Title placement: Display
   as placeholder` option and then style the form fields from there.
 *  [thethemefoundry](https://wordpress.org/support/users/thethemefoundry/)
 * (@thethemefoundry)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/style-22/#post-11026597)
 * Hey there, [@mchai888](https://wordpress.org/support/users/mchai888/) 👋
 * Following [@dt4ils](https://wordpress.org/support/users/dt4ils/) advice — after
   setting **Title placement** to **Display as placeholder**, inserting the following
   code to **Additional CSS** section in Customizer should give your inputs the 
   look you’re after.
 *     ```
       .happyforms-part--label-as_placeholder input:focus~label .label {
         position: relative;
         top: -19px;
         padding: 0 10px;
         background-color: #fff;
       }
       ```
   
 * Hope this helps! 🙂
 *  Thread Starter [mchai888](https://wordpress.org/support/users/mchai888/)
 * (@mchai888)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/style-22/#post-11028092)
 * Thank you @dt4il and [@thethemefoundry](https://wordpress.org/support/users/thethemefoundry/).
 * It works when the field has focus. The title, however, does not stay put when
   the field is out of focus (both the title and text is inside the placeholder).
 * The link is updated with demo and comments.
 * (Fun to ‘play’ with HappyForms!)
 *  [thethemefoundry](https://wordpress.org/support/users/thethemefoundry/)
 * (@thethemefoundry)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/style-22/#post-11029027)
 * Got it, [@mchai888](https://wordpress.org/support/users/mchai888/)!
 * In that case, adding the following snippet in addition to previous one should
   preserve the state when out of focus.
 *     ```
       .happyforms-part--label-as_placeholder.happyforms-part--filled input~label .label {
         position: relative;
         top: -19px;
         padding: 0 10px;
         background-color: #fff;
       }
       ```
   
 * And just a quick heads up: We’re taking a few days off until New Year’s. So if
   you don’t hear back from us right away, just know we will get back to you Jan
   2. 🙂
 *  Thread Starter [mchai888](https://wordpress.org/support/users/mchai888/)
 * (@mchai888)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/style-22/#post-11038445)
 * Happy New Year greetings to all.
 * [@thethemefoundry](https://wordpress.org/support/users/thethemefoundry/),
 * Thank you for the out-of-focus code. The code works on Short Text field. However,
   it is not working on Email, Long Text and Dropbox fields (have not tested on 
   all fields). The on-focus code is not working on Long Text field.
 *  [thethemefoundry](https://wordpress.org/support/users/thethemefoundry/)
 * (@thethemefoundry)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/style-22/#post-11043215)
 * Happy New Year, [@mchai888](https://wordpress.org/support/users/mchai888/)! 🎆
 * To make this work on Dropdown part, modifying the last snippet we shared to this
   should do the job.
 *     ```
       .happyforms-part--label-as_placeholder.happyforms-part--filled input~label .label,
       .happyforms-part--select.happyforms-part--filled label .label {
         position: relative;
         top: -19px;
         padding: 0 10px;
         background-color: #fff;
       }
       ```
   
 * As for the Email part — it turns out there’s a little bug 🐛 causing this. We’ll
   fix it up and release an update later this week. Be sure to stay up to date, 
   the above snippets will work with Email part then.
 * Thanks! 🙂
 *  Thread Starter [mchai888](https://wordpress.org/support/users/mchai888/)
 * (@mchai888)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/style-22/#post-11053701)
 * [@thethemefoundry](https://wordpress.org/support/users/thethemefoundry/),
 * The Dropdown is working. The Email is also working. Your are super. Thanks.
 *  [thethemefoundry](https://wordpress.org/support/users/thethemefoundry/)
 * (@thethemefoundry)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/style-22/#post-11054160)
 * Glad we could help!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Style’ is closed to new replies.

 * ![](https://ps.w.org/happyforms/assets/icon-256x256.png?rev=2778164)
 * [Happyforms - Form Builder for WordPress: Drag & Drop Contact Forms, Surveys, Payments & Multipurpose Forms](https://wordpress.org/plugins/happyforms/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/happyforms/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/happyforms/)
 * [Active Topics](https://wordpress.org/support/plugin/happyforms/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/happyforms/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/happyforms/reviews/)

## Tags

 * [style](https://wordpress.org/support/topic-tag/style/)

 * 8 replies
 * 3 participants
 * Last reply from: [thethemefoundry](https://wordpress.org/support/users/thethemefoundry/)
 * Last activity: [7 years, 6 months ago](https://wordpress.org/support/topic/style-22/#post-11054160)
 * Status: resolved