Title: Advanced styling
Last modified: September 1, 2016

---

# Advanced styling

 *  [Macle](https://wordpress.org/support/users/macle/)
 * (@macle)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/advanced-styling/)
 * Hi,
 * i searched in the web a tutorial e.g. about using a background image like that(
   with Contact Form 7) for positioning the form fields:
 * [Sample](https://dribbble.com/shots/549790-contact-form/attachments/40645)
 * Nothing to found…
 * Somebody a helping hand?
 * In a perfect world responsive included… 😉
 * Thanx a lot!
 * Mac
 * [https://wordpress.org/plugins/contact-form-7/](https://wordpress.org/plugins/contact-form-7/)

Viewing 1 replies (of 1 total)

 *  [ckone](https://wordpress.org/support/users/ckone/)
 * (@ckone)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/advanced-styling/#post-7465514)
 * Wow, good looking contact page!
 * I would imagine you will have to code some hard CSS to get this going. I am not
   strong at it so I can only speak how I did it with my own background. You will
   have to do some homework as well.
 * You can include HTML in your form generating window.
 *     ```
       <div class="something">
       [text message id:msg]
   
       [text name id:name]
       [email senderemail id:email]
       </div>
       ```
   
 * You can then define the “something” class to include the background. Using id
   such as msg, name and email you can define the height of the input, transparent
   background or fill it with a background. If you choose, you can edit the theme
   CSS but I find it easier to localize CSS in this case. You can include your CSS
   at the beginning of the form, such that:
 *     ```
       <style>
       .something {background:......}
       input[type="text"] {background: transparent; border: none;}
       #msg { }
       #name { }
       #email { }
       </style>
       <div class="something">
       [text message id:msg]
   
       [text name id:name]
       [email senderemail id:email]
       </div>
       ```
   
 * This is how I formatted my contact form, with background and custom input box
   height and background.
 * Also note that this may not work with all themes, so please test it out slowly,
   one style at a time. Good luck.

Viewing 1 replies (of 1 total)

The topic ‘Advanced styling’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

## Tags

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

 * 1 reply
 * 2 participants
 * Last reply from: [ckone](https://wordpress.org/support/users/ckone/)
 * Last activity: [10 years, 2 months ago](https://wordpress.org/support/topic/advanced-styling/#post-7465514)
 * Status: not resolved