CSS kontaktform

CSS kontaktform

I denne tutorial vil jeg vise, hvordan du ret enkelt kan lave en pæn HTML/CSS kontaktform. Jeg vil bruge nogle nye CSS3 features, som runde hjørner og text shadow, såsom giver et ekstra wow i moderne browsers, men stadig er pæn i gamle browsere. Det er desværre ikke en funktionel form (endnu?), det er bare hvordan man koder designet til en.

Here er kontaktformen, som du vil lære at lave, og indbygningen af den.

Preview af kontaktform

Vi starter med en form

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" /> <!-- Måske iso-8859-1 -->
<title>Kontakt form</title>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form action="" id="kontaktform">

<h3>Kontakt mig</h3>

<p>
     <label for="navn">Navn</label> 
    <input type="text" name="name" id="navn" value="" />
</p>

<p>
    <label for="email">Email</label> 
    <input type="email" name="email" id="email" value="" />
</p>

<p>
	<textarea name="besked" id="besked" rows="10" cols="30"></textarea>
</p>

<p>
	<input type="submit" name="submit" id="submit" value="Send" />
</p>

</form>

</body>
</html>

Opret så filen style.css i samme mappe som din kontaktform fil (hvis ikke bliver du nødt til at rette i html koden).
Først starter vi med en global reset CSS, som nulstiller margins og paddings på alle elementer. (:focus fjerner en grim blå outline border agtig ting i browsers som Firefox og Safari)

* { margin: 0; padding: 0;} 
:focus { outline: none; }

Hvis du bruger denne form på en side hvor der er flere elementer, burde du ikke bruge *, men i stedet fx Eric Meyers Reset CSS

Før vi går videre, Download CSS Kontaktform (der er inkluderet billeder og PSD fil)

body, #kontaktform input, #kontaktform textarea { 
	font: 16px sans-serif; 
	color: #333;
}

#kontaktform {
	background: #ccc url(images/formgradient.png) repeat-x;
	border: 1px solid #aeaeae;
	margin: 50px auto 0; /* 50px fra toppen, 0 fra bunden og auto fra venstre og højre (center) */
	width: 420px; /* Bliver 500px med padding */
	padding: 40px 40px 0;
}

Først sætter vi alle skrifttyper til Arial i størrelse 16. Det næste er formen (husk vi gav formen id="kontaktform"). Vi sætter baggrunden til en gradient, men da den ikke er uendelig lang sætter vi også lige en baggrundsfarve 😉

#kontaktform h3 {
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 30px;
}

#kontaktform p { margin-bottom: 30px; position: relative; overflow: hidden;}

#kontaktform label {
	float: left;
	font-size: 18px;
	height: 41px;
	line-height: 41px; /* Samme som højden, centrer teksten */
}

#kontaktform h3 er “Kontakt mig” overskriften. Alle elementerne i formen er wrappet ind i <p> tags, som vi sætter til margin-bottom: 30px; for at adskille dem fra hinanden. Vi sætter position: relative;, fordi vi senere sætter fejlbeskeden til position: absolute;.

Input felterne

Nu skal vi style input felterne. Da alle tekstfelterne har type="text", er det oplagt at style alle felterne med type="text" i stedet for at give felterne en class. For at style alle tekst input felterne bruger vi input[type=text]. Det virker godt nok ikke i IE6, men er det ikke ligemeget?

#kontaktform input[type="text"], #kontaktform input[type="email"] { float: right;} /* Alle inputfelter med typen text og email */
#kontaktform input[type="text"], #kontaktform textarea {
	background: #fff url(images/input.png) repeat-x;
	border: 1px solid #cbcbcb;
	color: #aeaeae;
	padding: 10px 5px;
}

#kontaktform input[type="text"]:hover, #kontaktform input[type="text"]:focus,
#kontaktform input[type="email"]:hover, #kontaktform input[type="email"]:focus,
#kontaktform textarea:hover, #kontaktform textarea:focus {
	border: 1px solid #aeaeae;
	color: #333;
}
#kontaktform input[type="text"], #kontaktform input[type="email"] { width: 333px; }
#kontaktform textarea { width: 408px; overflow: auto; } /* Overflow fjerner scrollbar i IE */

#kontaktform input[type="submit"] { /* Alle inputfelter med typen submit */
	background: #dedede url(images/submit.png) repeat-x;
	border: 1px solid #aeaeae;
	color: #000;
	font-weight: bold;
	font-size: 18px;
	padding: 10px 0;
	width: 175px;
	cursor: pointer;
}
#kontaktform input[type="submit"]:hover { border: 1px solid #949494; }

Læs mere om CSS selectors på Smashing Magazine

Fejl besked

Der skal selvfølgelig også være en fejlbesked. Vil ikke gå så meget i dybden med den.

span.error {
	background: #ffebe8;
	border: 1px solid #C00;
	font-size: 14px;
	position: absolute;
	padding: 5px;
	top: 7px; right: 10px;

       /* CSS3 */
	opacity: 0.75;
        border-radius: 5px;
}

CSS3

Nu skal vi til det sjove, der kun virker i moderne browsers som Safari, Chrome og Firefox. Nemlig CSS3 features, som runde hjørner og tekst skygge.

Vi starter først med nogle runde hjørner på selve formen, input felterne og tekstfeltet

#kontaktform, #kontaktform input, #kontaktform textarea {
       border-radius: 10px;
}

Cool hva’? 😉 Lad os rykke videre til en næsten hvid tekst skygge på overskriften, labelsne og Send knappen.

#kontaktform h3, #kontaktform input#submit, #kontaktform label { 
        text-shadow: #f6f5f5 1px 1px 1px; /* Tekst skygge */
}

Læs mere om CSS3:

Download & Demo

Download Demo Downloaded 2,347 times

Så var så alt for i dag. Har du spørgsmål eller kommentarer, er du velkommen til at skrive en kommentar, så skal jeg nok prøve at give dig svar.

Posted in on

7 responses

  1. Pingback: CSS kontaktform – Del 2 | Jayj.dk

  2. hey

    Er under uddannelse som web-integrator, på media college i aalborg.
    og jeg vil bare lige sige mange tak for hjælpen, super god hjælp.
    og har helt klart lært noget ved det xD

    Reply

  3. Hej

    Tak for det meget nyttige info om runde hjørner 🙂 Jeg sidder og prøver at finde ud af om man mon kan lave kun nogle af hjørnerne runde. Ved du det?

    Mvh Camila

    Reply

    1. Ja, det kan du – Dog er -webkit og -moz måden forskellig.


      -webkit-border-top-left-radius
      -webkit-border-top-right-radius
      -webkit-border-bottom-left-radius
      -webkit-border-bottom-right-radius
      -moz-border-radius-topleft
      -moz-border-radius-topright
      -moz-border-radius-bottomleft
      -moz-border-radius-bottomright
      border-top-left-radius
      border-top-right-radius
      border-bottom-left-radius
      border-bottom-right-radius

      Reply

Leave a Reply