Solved

Bootstrap - convert contact form

Posted on 2014-02-21
25
379 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
  • 13
  • 12
25 Comments
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Author Comment

by:nsitedesigns
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
You've accepted an answer but I don't see the changes online?
0
 

Author Comment

by:nsitedesigns
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
That looks fine. To add some spacing add this css
#cntctfrm td {
padding:5px 0
}
0
 

Author Comment

by:nsitedesigns
Comment Utility
That helped but the form doesn't size down for cell phones too well.
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Where do I put col-md-6 -
0
 

Author Comment

by:nsitedesigns
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Now that my friend is one fine-looking form!

My next step is to get it to work!
0
 

Author Comment

by:nsitedesigns
Comment Utility
wish I could give you more points.....
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now