Solved

need to style a form just like this comp

Posted on 2011-02-23
9
536 Views
Last Modified: 2012-05-11
I need a little help with coding this form.
http://eyelasikaustin.nuartisan.net/contactus.html
This is the psd of the form its short and sweet.
Can some one help me mark this up so that it looks like the form on this page?
0
Comment
Question by:jbrashear72
  • 5
  • 3
9 Comments
 
LVL 3

Expert Comment

by:thecrew
ID: 34962332
Do you have a starting point or base form already made or are you wanting someone to write the whole thing for you?
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 34962355
I have this below.
<div class="wpcf7" id="wpcf7-f1-p95-o1"><form action="/contact/#wpcf7-f1-p95-o1" method="post" class="wpcf7-form">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="1" />
<input type="hidden" name="_wpcf7_version" value="2.4.3" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1-p95-o1" />
</div>

<p>Your Name (required)<br />
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-text wpcf7-validates-as-required" size="40" /></span> </p>
<p>Your Email (required)<br />
    <span class="wpcf7-form-control-wrap your-email"><input type="text" name="your-email" value="" class="wpcf7-text wpcf7-validates-as-email wpcf7-validates-as-required" size="40" /></span> </p>
<p>Phone<br />
    <span class="wpcf7-form-control-wrap your-phone"><input type="text" name="your-phone" value="" class="wpcf7-text" size="40" /></span> </p>
<p>City<br />

    <span class="wpcf7-form-control-wrap your-city"><input type="text" name="your-city" value="" class="wpcf7-text" size="40" /></span> </p>
<p>Message<br />
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10"></textarea></span> </p>
<p><input type="submit" value="Send" class="wpcf7-submit" /><img class="ajax-loader" style="visibility: hidden;" alt="Sending ..." src="http://eyelasik.austinfx.com/wp-content/plugins/contact-form-7/images/ajax-loader.gif" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>

Open in new window

0
 
LVL 4

Accepted Solution

by:
jmnf earned 500 total points
ID: 34964766
Here it is as a file, only html with form and css (internal stylesheet), the rest is up to you. elegant-form.html
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 34965592
that is awesome! I added it to my CMS and it sorta broke:
http://alpha.eyelasikaustin.com/contact/
What do you think?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 3

Author Comment

by:jbrashear72
ID: 34965709
I managed to get it to fit in the page but for some reason the CSS has changed the footer styles:
http://alpha.eyelasikaustin.com/contact/
Look at the last line of text compaired to:
http://alpha.eyelasikaustin.com
0
 
LVL 4

Expert Comment

by:jmnf
ID: 34965809
Opened your site in:

firefox 3.6 - showed fine
google chrome 8 -showed fine
opera 11 - button is square, background-color is flat not degraded
ms-ie8 - button is square and shows scrollbar

to fix the scrollbar you need to add overflow: hidden inside textarea

to fix square button in opera add following line after -webkit-border-radius:

border-radius: 30px;

to fix background-color gradation in opera, or to fix square button in ms-ie8 (or any previous ms-ie version) you have to change .circle class to use image like this:

.circle
{
	position: absolute;
	top: 604px;
	left: 346px;
	display: block;
	width: 60px;
	height: 60px;

	border: 0px;
	background-color: transparent;
	background-image: url(roundOKimage.png);
	background-repeat: no-repeat;

	color: #ffffff;
	z-index: 100;
	cursor: pointer;
}

Open in new window


image has to be 60x60 pixels with transparency for better effect
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 34965912
Did you see the Footer Text?
Home Pratice details About the Eye Team Our Surgeons Procedures Office Policies Contact Us FAQ © 2011 Eye LASIK Austin, all rights reserved

Look at tat on the contact page compared to the other site pages.
One of the styles we added is altering it.
0
 
LVL 4

Expert Comment

by:jmnf
ID: 34966022
right, now i get it.

make sure you change the line at the top of the styles (right after <style> with an asterisk that reads
and change <style> to <style type="text/css">

*

and change it to

form *

space between form and 1
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 34966116
Man you are a life saver.. Thank you for all your help. I wish I could lear CSS the way you know it.
I am amazed!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Blog posts not showing up on Blog page 7 51
Remove greater than sign 3 43
Change CSS to show Notification Bar 9 17
Target h5 of a div 3 7
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

910 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

20 Experts available now in Live!

Get 1:1 Help Now