?
Solved

Bootstrap - convert contact form

Posted on 2014-02-21
25
Medium Priority
?
399 Views
Last Modified: 2014-02-25
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
0
Comment
Question by:nsitedesigns
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 13
  • 12
25 Comments
 
LVL 58

Assisted Solution

by:Gary
Gary earned 2000 total points
ID: 39877477
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
 

Author Comment

by:nsitedesigns
ID: 39877489
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
 
LVL 58

Expert Comment

by:Gary
ID: 39877507
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
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 

Author Comment

by:nsitedesigns
ID: 39877541
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
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39877571
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
 
LVL 58

Expert Comment

by:Gary
ID: 39886447
You've accepted an answer but I don't see the changes online?
0
 

Author Comment

by:nsitedesigns
ID: 39886502
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
 
LVL 58

Expert Comment

by:Gary
ID: 39886512
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
 

Author Comment

by:nsitedesigns
ID: 39886559
let me roll up my sleeves and give it another go.

i was pretty burned out when i tried it the first time.
0
 

Author Comment

by:nsitedesigns
ID: 39886603
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
 
LVL 58

Expert Comment

by:Gary
ID: 39886707
That looks fine. To add some spacing add this css
#cntctfrm td {
padding:5px 0
}
0
 

Author Comment

by:nsitedesigns
ID: 39886836
That helped but the form doesn't size down for cell phones too well.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39886848
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
 

Author Comment

by:nsitedesigns
ID: 39887023
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
 
LVL 58

Expert Comment

by:Gary
ID: 39887076
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
 

Author Comment

by:nsitedesigns
ID: 39887147
Where do I put col-md-6 -
0
 

Author Comment

by:nsitedesigns
ID: 39887151
To the SUBMIT add this class
pull-right

Did this but the button is butted up against the field now.  Grrrrr
0
 

Author Comment

by:nsitedesigns
ID: 39887155
to clarify, it is only butted up against  the field in full desktop view.  I tell ya, this bootstrap sucks
0
 
LVL 58

Expert Comment

by:Gary
ID: 39887169
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
 
LVL 58

Expert Comment

by:Gary
ID: 39887178
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
 
LVL 58

Expert Comment

by:Gary
ID: 39887191
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
 

Author Comment

by:nsitedesigns
ID: 39887236
Now that my friend is one fine-looking form!

My next step is to get it to work!
0
 

Author Comment

by:nsitedesigns
ID: 39887239
wish I could give you more points.....
0
 
LVL 58

Expert Comment

by:Gary
ID: 39887257
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
 

Author Comment

by:nsitedesigns
ID: 39887279
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question