I Need Someone to Style a Contact Form For Me

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

 

i can do this noble task for you. please reply if interested

 

my email id is

 

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.

 

... 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.