1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

I Need Someone to Style a Contact Form For Me

Discussion in 'CSS' started by thecarpetscientist, Apr 28, 2014.

  1. #1
    I am building a website that needs a sidebar widget contact form. I prefer to use Contact Form 7. However, I need the form to be styled to match the colors and design of the site.

    I am willing to pay to have someone do this for me, if you can show me samples of your work.

    I have attached a file that shows a contact form similar to what I am looking for.

    Here is the link to the site I am building where the new contact form will go. It is going to be in the right sidebar on the Home page.

    http://carpetcleaninggreenvillesc.info
     

    Attached Files:

    thecarpetscientist, Apr 28, 2014 IP
  2. sarbjeet singh

    sarbjeet singh Greenhorn

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #2
    i can do this noble task for you. please reply if interested
     
    sarbjeet singh, Apr 28, 2014 IP
  3. sarbjeet singh

    sarbjeet singh Greenhorn

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    my email id is
     
    sarbjeet singh, Apr 29, 2014 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Pfft. This is so tiny I'd not even charge for it... though starting from a goofy picture instead of with semantic markup has led to it having one accessibility failing (the stupid 'false simplicity' of the search bar -- again placeholder is NOT a replacement for label) and some design elements that aren't exactly accessibility friendly; it's why dicking around drawing goofy pictures is not good web design.

    So the first step is going to be semantic markup -- which may dictate changes to the layout since most PSD jockeys don't know enough about HTML or CSS to be designing jack ****. Hell, it's even improper to caps "us" and "at" ...

    Such markup would go something like this:
    	<form id="siteSearch">
    		<fieldset>
    			<label for="siteSearchText">Search Site:</label>
    			<input type="text" id="siteSearchText" name="s" />
    			<input type="image" src="images/searchGlass.png" alt="Go" />
    		</fieldset>
    	</form>
    
    	<div id="contactUs">
    		<h2>Contact Us</h2>
    		<div class="call">
    			Call us at:
    			<span>864-752-8008</span>
    		</div>
    		<div class="email">
    			E-Mail us at:
    			<span>rodney@APTcarpetcleaning.com</span>
    		</div>
    	<!-- #contactUs --></div>
    
    	<form id="scheduleService">
    		<h2>Schedule Service Today</h2>
    		<fieldset class="serviceType">
    			<input
    				type="radio"
    				name="serviceType"
    				id="ss_new"
    				value="new"
    			/>
    			<label for="ss_new">New Service</label>
    			<span>&nbsp;</span>
    			<input
    				type="radio"
    				name="serivceType"
    				id="scheduleService_existing"
    				value="existing"
    			/>
    			<label for="ss_existing">Current Customer</label>
    		</fieldset>
    		<fieldset class="userInfo">
    			<label for="ss_firstName">First Name</label>
    			<input type="text" id="ss_firstName" name="firstName" />
    			<br />
    			<label for="ss_lastName">Last Name</label>
    			<input type="text" id="ss_lastName" name="lastName" />
    			<br />
    			<label for="ss_phone">Phone Number</label>
    			<input type="text" id="ss_phone" name="phone" />
    			<br />
    			<label for="ss_zip">Zip Code</label>
    			<input type="text" id="ss_zip" name="zip" />
    			<br />
    			<label for="ss_eMail">E-Mail Address</label>
    			<input type="text" id="ss_eMail" name="email" />
    		</fieldset>
    		<div class="submitsAndHiddens">
    			<input type="submit" value="submit" class="submit" />
    			<!-- any input[hidden] go here -->
    		</div>
    	<!-- #scheduleService --></form>
    Code (markup):
    That's +/- 5% of what the final markup would look like.

    Now that we have proper semantic markup of the two forms we start styling... gimme a few minutes and I'll toss that together and put a live demo up on my server.
     
    deathshadow, Apr 29, 2014 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    ... and here it is:
    http://www.cutcodedown.com/for_others/thecarpetscientist/template.html

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/thecarpetscientist/

    is unlocked for easy access to the gooey bits and pieces. The markup did see a few minor changes, so you'll want to use that copy not what I posted above.

    It's not 100%, the artifacting on your source image was pretty heavy so I was left guessing as to colors and how edges were interacting, so I just took summed hues and applied them with box-shadow. Likewise I fixed the accessibility crap on the search by providing an actual LABEL, and the whole form is elastic (ideal for putting into an elastic column) -- beware of that, as on systems with a different default font size it will auto-expand to fit.

    VERY heavy on CSS3, so naturally it won't look identical in IE8/lower -- IMHO right now that's a "OH WELL" moment. I would say don't bother bending over backwards to support decade out of date browsers. The forms still work, the layout is intact -- they don't get some drop-shadows, gradients and rounded corners, who cares! At this point we need to draw that line in the sand -- I'm not saying don't support those older browsers, just don't waste time fretting minor appearance bits and pieces that have nothing to do with the page actually being useful to users.

    It's also designed to be semi-fluid, but would need some media queries to 'pretty things up' below certain widths.

    Hope this helps.
     
    Last edited: Apr 29, 2014
    deathshadow, Apr 29, 2014 IP