Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Bootstrap CSS for wordpress site

Hey folks,

I've quick query. can any have an idea of how to create Bootstrap style contact Form in wordpress. i want the style that treehouse is using for its login forms which you can when a user click on login button .

Any resources ?

Nick Pettit Zac Gordon Joe Bruno Jonathan Dickerson

6 Answers

Riley Bracken
Riley Bracken
16,762 Points

do you mean how do you add twitter bootstrap to wordpress?

samiff
samiff
31,206 Points

A contact form can be styled any way you like by editing the CSS. Depending on the plugin you use, a specific styelsheet may be used for the contact form alone. Otherwise, the styles will pull from your main stylesheet (selectors like form, label, input, etc.)

I'm Looking to Add a Contact form.for example

www.yourvancouvermortgagebroker.ca

There is a green application button that takes users to an apply page. I want to change that button so that it opens up a simple modal form using bootstrap like this:

http://bootstrap2modaldemo.scripting.com/

And one more example when you click on Login link in top nav on treehouse you will get bootstrap styled login Fields from bottom of the page.i looking to add that kind of details. Riley Bracken Sam Lucklore

Riley Bracken
Riley Bracken
16,762 Points

Did you read the documentation on the bootstrap site?

Here is the link to the modals currently in 2.3, how to use it etc. Look at the live demo version because I think that is what you are looking for.

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

Hi gopinath para,

You might find this blog post from Zac Gordon to be helpful: http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial

After following it through, you might have a better idea of how to build forms using CSS, as Sam Lucklore described.

Thanks Folks,Those resources are really helpfull. I Created the form by using contact form 7 which you will find on my development site :) http://gopinathpara.info But now the problem is with styling the contact form 7 for which i created a new discussion here

https://teamtreehouse.com/forum/editing-stylescss-of-contact-form7-plugin-in-wordpress

So any suggestion on this!!!!

Nick Pettit Sam Lucklore Riley Bracken