Results 1 to 3 of 3

Thread: CSS Forms

  1. #1
    Join Date
    Jun 2012
    Posts
    33
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Lightbulb CSS Forms

    Hi,

    I have a contact form using PHP and CSS at this link: http://www.kent-telephones.ismywebsi...uk/contact.php

    What I want it to do is when "other" is selected in the drop down menu then a text box to specify will appear. Is it possible to do this using CSS and how do I do it. below is my code and my attempt at doing it in a different colour. I Apologise for my code, it is probably a bit messy.

    CSS

    Code:
    /*Form*/
    
    #contactform {
    	width:360px;
    	height:auto;
    	float:left;
    	margin:10px;
    	overflow:hidden;
    }
    
    #contactform p {
    	text-align:left;
    }
    
    #formdetails {
    	height:auto;
    	overflow:hidden;
    }
    
    #formdetails input {
    	border: 1px solid #aaa;
    	width:200px;
    	float:right;
    	margin-right:50px;
    	margin-top:3px;
    }
    
    #formdetails label {
    	float:left;
    	margin-top:3px;
    }
    
    #formdetails3 {
    	width:180px;
    	float:left;
    	height:auto;
    	overflow:hidden;
    }
    
    #formdetails4 {
    	overflow:hidden;
    }
    
    #formhide {
    	width:180px;
    	float:left;
    	display:none;
    	height:auto;
    	overflow:hidden;
    }
    
    #formhide > #formdetails3 option[value='other'] {
    	display:inline;
    }
    
    #formmessage {
    	margin-top:10px;
    	width:360px;
    }
    
    #formmessage textarea{
    	width:250px;
    	height:100px;
    }


    PHP

    PHP Code:
    <form action="" method="POST" class="form">
              
                  <div id="formdetails">
              
                    <p>
                    <label for="name" class="textbox">
                    Name: *
                    </label>
                    
                    <input type="text" name="name" value="<?php echo $_POST['name']; ?>">
                    </p>
                
                                                
                    <p>
                    <label for="email" class="textbox">
                    Email: *
                    </label>
                    
                    <input type="text" name="email" value="<?php echo $_POST['email']; ?>">
                    </p>
                    
                    
                    <p>
                    <label for="phone" class="textbox">
                    Telephone: *
                    </label>
                    
                    <input type="text" name="phone" maxlength="11" value="<?php echo $_POST['phone']; ?>">
                    </p>
                    
                </div>
                
                <div id="formdetails2">  
                            
                    <p>
                    <label>
                    Prefered Method of contact:
                    </label><br/>
                    
                    <input type="radio" name="prefered" value="telephone">Telephone 
                    <input type="radio" name="prefered" value="email">Email 
                    <input type="radio" name="prefered" value="email">Either
                    </p>
                
                </div>
                
                <div id="formdetails4">
                <div id="formdetails3">      
                            
                    <p>
                    <label>
                    How did you find us?
                    </label><br/>
                              
                    <select name="method" id="method">
                    <option value="google" selected="selected">Google</option>
                    <option value="youfindlocal">YouFindLocal</option>
                    <option value="applegate">Applegate</option>
                    <option value="other">Other</option>
                    </select>
                    </p>
                
                </div>
                </div>
                    
                    
                <div id="formhide">    
                    <p>
                    <label>
                    Please specify:
                    </label>
                      <input type="text" name="specify" value="">
                      </p>
                </div>        
                
               
                
                <div id="formmessage">
                                                   
                    <p>
                    <label for="message">
                    Message: *
                    </label><br/>
                    
                    <textarea name="message" class="message"><?php echo $_POST['message']; ?></textarea>
                    </p>
                
                </div>
                
                <div id="formsubmit">    
                    
                    <p>
                    <input type="submit" name="submit" value="Send Email" class="submit">
                    </p>
                
                </div>
                    
            </form>
                        
                        
                        </div>

    Thank you,

    Gemma

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Personally,I would just add those 'other' options to the select list you are using.It would be so much easier,unless you have a lot toadd or there is another reason to not go that way??
    Thanks,

    Bud

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 313 Times in 311 Posts
    Blog Entries
    12

    Default

    Sounds like a job for JavaScript - maybe these examples will help;

    Using jQuery: http://jsfiddle.net/Qe6G4/ and http://jsfiddle.net/vyc7N/

    Without jQuery: http://www.webdeveloper.com/forum/sh...er-is-Selected
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Forms ?? how to?
    By DIYPARTYHIRE in forum Looking for such a script or service
    Replies: 3
    Last Post: 09-14-2010, 04:25 AM
  2. forms
    By silver163 in forum JavaScript
    Replies: 4
    Last Post: 10-15-2009, 01:59 AM
  3. PHP forms
    By Macca in forum PHP
    Replies: 3
    Last Post: 03-13-2009, 12:41 AM
  4. add up forms?
    By jimbomac in forum PHP
    Replies: 4
    Last Post: 09-01-2006, 04:23 PM
  5. Forms
    By Shattered Plastic in forum HTML
    Replies: 6
    Last Post: 09-08-2004, 09:40 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •