Bootstrap - convert contact form

Is there a recommended way for me to put this form in bootstrap so it is responsive?

Form Page
http://www.wiplastic.com/contact.html

Beta Bootstrap Page
http://nsitedesigns.com/nsitedesigns/wiplastic_scott/index.html
http://nsitedesigns.com/nsitedesigns/wiplastic_scott/wiplastic2.css
nsitedesignsAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
Remove the cols on the textarea and set the width to 100%
On your container div change
col-sm-8
to
col-sm-12
Add the class form-control to all your inputs and you will have a fairly nice looking form.

Also check out BS's default button styling - get rid of the ugly grey submit
0
 
GaryConnect With a Mentor Commented:
You can use col-xs-offset-3 to push the contact stuff over (if that is what you want), everything else is just a simple col spacing, same with the rest of the layout
What exactly is the problem?
<div class="row col-xs-offset-3">
<label class="col-xs-3">Name</label>
<span class="col-xs-9"><input type=text class="form-control" value=""></span>
</div>

Open in new window


http://jsfiddle.net/52VtD/3018/
0
 
nsitedesignsAuthor Commented:
The contact form part was done in php.  Not sure how to get the fields to resize or if that is going to be a problem  or not.  Really green when it comes to bootstrap and I outsourced the php form.

p.s.  Keep answering my questions Cathal and you will really get a lot of points today!  Thanks for all your help!
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
GaryCommented:
Oops didn't save my fiddle
Here's the correct one, you'll notice the textbox is resizing to the screen
http://jsfiddle.net/52VtD/3019/
0
 
nsitedesignsAuthor Commented:
Here is beta of contact page
http://nsitedesigns.com/nsitedesigns/wiplastic_scott/contact2.html

Maybe what I am having problems with is that the div class that surrounds the content is in bootstrap.css so that isn't something that I am supposed to touch.  I removed the trio image from right column so now, I also need to widen this div but again, it is not something I am supposed to dink around with. UGH!
0
 
GaryCommented:
You've accepted an answer but I don't see the changes online?
0
 
nsitedesignsAuthor Commented:
that is true.  The answer seemed to make sense (hence the points) but I could not get it to work.  I was embarrased to say so.  So, now the cat is out of the bag.
0
 
GaryCommented:
Did you make the suggestions I made. Forget the first suggestion just the second one
Remove the cols on the textarea and set the width to 100%
On your container div change
col-sm-8
to
col-sm-12
Add the class form-control to all your inputs and you will have a fairly nice looking form.

These are just simple changes to your HTML
0
 
nsitedesignsAuthor Commented:
let me roll up my sleeves and give it another go.

i was pretty burned out when i tried it the first time.
0
 
nsitedesignsAuthor Commented:
I tossed the original version.  Got frustrated.  Here is new link to work off of.

http://nsitedesigns.com/nsitedesigns/wiplastic_scott/contact2.html

1.Remove the cols on the textarea and set the width to 100%
a. By "text area", did you mean the text before the form such as, "Contact Us
We look forward to working with you in creating your custom extruded plastic product. Online requests will be addressed in three business days. View map....." ?  I don't see any cols.

2. On your container div change  col-sm-8 to col-sm-12
a.  The div that houses the form is : <div class="content col-xs-12 col-sm-9">
b.  The <div class = "container"> does not have any column settings

3.  Add class form-control to all inputs.
a. I did this and now all fields are all butted up against each other.  no breathing room.
0
 
GaryCommented:
That looks fine. To add some spacing add this css
#cntctfrm td {
padding:5px 0
}
0
 
nsitedesignsAuthor Commented:
That helped but the form doesn't size down for cell phones too well.
0
 
GaryCommented:
Because you are using tables - you should be using BS's col layout.
The table gives no abiity to shift the label and textbox around.

e.g.

<span class="col-sm-3"><label for="uName">Name</label></span>
<span class="col-sm-9">
<input type="text" class="form-control" name="uName" id="uName">
</span>

Open in new window

0
 
nsitedesignsAuthor Commented:
I found this site that provides an example.  This is what I have now.

http://nsitedesigns.com/nsitedesigns/wiplastic_scott/contact4.html

1. not sure how to add a box field (for comments).  I tried to modify the size of the field like I would if it were a table and it didn't take.

2. how do i push the left margin over?  geez, feel like i am learning css all over again!
0
 
GaryCommented:
For comments you just use a textarea like you were before.

Here
<div class="content col-xs-12 col-sm-9">
<div class="col-xs-12 col-sm-8">

change col-sm-8 to col-sm-12

To the FORM add
class="col-sm-12"

To the SUBMIT add this class
pull-right

You may want to break some of your fields down into two columns for larger displays using col-md-6 - look a bit silly at full width on a desktop screen
0
 
nsitedesignsAuthor Commented:
Where do I put col-md-6 -
0
 
nsitedesignsAuthor Commented:
To the SUBMIT add this class
pull-right

Did this but the button is butted up against the field now.  Grrrrr
0
 
nsitedesignsAuthor Commented:
to clarify, it is only butted up against  the field in full desktop view.  I tell ya, this bootstrap sucks
0
 
GaryCommented:
Change the bolded to 12
<div class="content col-xs-12 col-sm-9">
<div class="col-sm-12 to col-sm-8">
<h1>Contact Us</h1>


Taking your City/State fields for example
<div class="form-group col-md-6">
<label for="exampleInputCity">City</label>
<input id="exampleInputCity" class="form-control" type="city">
</div>
<div class="form-group col-md-6">
<label for="exampleInputState">State</label>
<input id="exampleInputState" class="form-control" type="state">
</div>
0
 
GaryCommented:
For each DIV group you have remove the bolded
<div class="form-group">
<label for="exampleInputCaptcha">Captcha</label>
<input id="exampleInputCaptcha" class="form-control col-sm-12" type="captcha">
</div>
0
 
GaryCommented:
Here's all your code fixed up.

<div class="content col-xs-12 col-sm-9">
<div class="col-sm-12">
<h1>Contact Us</h1>
<p> We look forward to working with you in creating your custom extruded plastic product. Online requests will be addressed in three business days. <a target="_blank" href="http://goo.gl/maps/GB7wv">View map</a>.</p>
<p>Wisconsin Plastic Products, Inc.<br>
  1045 Lindoerfer Road<br>
  PO Box 580<br>
  Plymouth, Wisconsin<br>
  Tele: (920) 893-4500<br>
  Fax:  (920) 893-4502</p>

			<form onsubmit="return check();" method="post" action="cntct.php" id="cntctfrm" name="cntctfrm">
				<div class="form-group col-xs-12">
				  <label for="exampleInputName">Name</label>
				  <input type="name" id="exampleInputName" class="form-control"></div>
                
                
				<div class="form-group col-xs-12">
				  <label for="exampleInputCompany">Company</label>
				  <input type="company" id="exampleInputCompany" class="form-control"></div>
                  
                  <div class="form-group col-xs-12">
				  <label for="exampleInputAddress">Address</label>
				  <input type="address" id="exampleInputAddress" class="form-control"></div>
                  
                  <div class="form-group col-sm-6">
				  <label for="exampleInputCity">City</label>
				  <input type="city" id="exampleInputCity" class="form-control"></div>
                  
                  <div class="form-group col-sm-6">
				  <label for="exampleInputState">State</label>
				  <input type="state" id="exampleInputState" class="form-control"></div>
                  
                  <div class="form-group col-sm-4">
				  <label for="exampleInputZip">Zip</label>
				  <input type="zip" id="exampleInputZip" class="form-control"></div>
                  
                  <div class="form-group col-md-8">
				  <label for="exampleInputTelephone">Telephone</label>
				  <input type="telephone" id="exampleInputTelephone" class="form-control"></div>
                  <div class="form-group col-md-12">
				  <label for="exampleInputEmail">Email</label>
				  <input type="email" id="exampleInputEmail" class="form-control"></div>
                  

                  
              <div class="form-group col-xs-12">
			    <label for="exampleInputComments">Comments/Questions</label>
			    <textarea id="exampleInputComments" class="form-control"></textarea></div>
                
                  <div class="form-group col-xs-12">
				  <label for="exampleInputCaptcha">Captcha</label>
				  <input type="captcha" id="exampleInputCaptcha" class="form-control"></div>
                  
          <div class=" col-xs-12">
  <button class="btn btn-success btn-default pull-right" type="submit">Submit</button>
</div>
			</form>


</div>


      </div>

Open in new window

0
 
nsitedesignsAuthor Commented:
Now that my friend is one fine-looking form!

My next step is to get it to work!
0
 
nsitedesignsAuthor Commented:
wish I could give you more points.....
0
 
GaryCommented:
You can buy me a beer when you're in Dublin!

Theres a small mistake on the telephone div - it should be                  
<div class="form-group col-sm-8">
				  <label for="exampleInputTelephone">Telephone</label>
				  <input type="telephone" id="exampleInputTelephone" class="form-control"></div>

Open in new window

0
 
nsitedesignsAuthor Commented:
Thanks.  I didn't notice a problem.  But then again, I am so THRILLED that it is looking as good as it does right now.

I am on version 5 of this form (working on the captcha).  : )

http://nsitedesigns.com/nsitedesigns/wiplastic_scott/contact5.html

p.s. My brother spent time in ireland for work.  He said he missed a juicy burger the most.  I'll have to bring one along!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.