Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Boris Kamp
Boris Kamp
16,660 Points

Bootstrap form + Wordpress, how to submit?

Hi guys!

Im working on my own bootstrap starter theme and working on redesigning an existing website at the same time. It's working out fine so far but now I encountered an issue I don't have any experience with. Im working on a client's website, a website of a cooking studio where people can get cooking lessons. He offers various lessons where you can signup for on the website, in total about 10. Some forms slightly differ in input info. I prefer not to use a plugin to do this because I want to use the bootstrap form css

my question, how should I recreate all this? and how can I make the inputted form data email to an email address? I have no experience with form submissions to email.

Thanks!

3 Answers

Kevin Korte
Kevin Korte
28,148 Points

Three options:

You can use a form plugin, and than look at the markup the form plugin provides, and basically create new CSS rules that target that plugin's markup, and copy and past the CSS values you need from bootstrap into those custom rules.

For instance, if bootstrap uses the class .form-input on a form input element, but the plugin uses a class or id of .plugin-input-class you'd just copy and paste the styles of boostraps .form-input class into a class or id you create to match the plugin's, like .plugin-input-class.

Another option is to set up pages to use custom templates in which case you would hard code the form into the custom template and you can than use bootstrap's markup, since you could control it. The form could submit to another theme file that uses something like (PHP Mailer)[https://github.com/PHPMailer/PHPMailer] to generate the email and do whatever you need to do.

The third, and long term best option would be to build your own custom plugin. Best of both world worlds from the two options above.

Andrew McCormick
Andrew McCormick
17,730 Points

I just wanted to vote for Kevin's first option. If you are not familiar with handling form submission, then use a plugin like custom contact forms in which you can add custom classed to every bit of the form. This will allow you to go through and add bootstrap form names to each piece.

Kevin Korte
Kevin Korte
28,148 Points

It's a good first step, and probably the fastest way to get going today. I did this for a simple contact form on a simple site. I used Jetpack's contact form but gave it bootstrap styles. Works fine and I didn't have to mess with PHP mailer for such a simple deal.

Boris Kamp
Boris Kamp
16,660 Points

Thanks for the replies guys! I will get going with this!