STANDARD 0zł

 

 

- Liczba ankiet: 1
- Liczba pytan: 100
- Liczba respondentow: 50

 

 

Wybierz plan taryfowy!

 

PEŁEN CENNIK

 

STWÓRZ ANKIETĘ

 

SPRAWDŹ DEMO

PROGRAM PARTNERSKI

Własny CSS - jak dodać i jaką ma mieć strukturę

Formularze.eu pozwalają na nadawanie formularzom indywidualnego wyglądu przy użyciu standardu CSS, który powszechnie stosowany jest w Internecie. By „ostylować” formularz musimy wykonać następujące kroki.

  1. Stworzyć plik CSS
  2. Udostępnić powstały plik CSS w Internecie (wraz ze wszystkimi plikami, do których się on odwołuje np. obrazków)
  3. We właściwościach formularza określić jego URL  

Dodatkowy CSS dla formularza internetowego lub ankiety online

Oto przykładowy formularz w układzie stronicowym wykorzystujący własny CSS. Do edycji i pracy z CSS gorąco doradzamy używać narzędzia Firebug, które pozwala poznać strukturę formularza.

Plik CSS ma następującą treść:

body {
background-image:url("http://www.formularze.eu/demo/jacht.jpeg") ;
background-position: center center;
background-attachment:fixed;
color:#B3D7F0;
font-family:"Verdana","Arial",Helvetica,sans-serif;
font-size:10px;
margin:0;
overflow:auto;
padding:0;
width:100%;
}

html, body {
height:100%;
}

.singlePagePadding  {
opacity:0.9;
background:url("hex_navy.gif") repeat scroll 0 0 transparent;
}

.invalid {
background-color:#AAAAAA;
opacity:0.9;
}
.fieldWithDescription {
}

#field_1106 {
margin-top:12px;
}

Teraz wyjaśnijmy, co oznaczają poszególne wpisy.

  • Klasa „singlePagePading” pozwala skonfigurować wygląd „kratki”. W naszym przykładzie ustaliliśmy, że kartka będzie miała w tle obrazek (niebieskawe sześciokąty na szarym tle) oraz lekką przeźroczystość.
  • Klasa „fieldWithDescription” pozwala określić wygląd wszystkich pól, np. powiększyć czcionkę, zmienić jej kolor, tło, obramowanie, marginesy itd.
  • Klasa „invalid” pozwala określić jaki wygląd będą miały pola, jeśli zostaną źle wypełnione.W naszym przykładzie pola, które zostały źle wypełnione są szare i przeźroczyste.
  • Ostatni wpis w naszym pliku CSS „#field_1106" zwiększa górny margines pierwszego pola. W ten sposób chcieliśmy pokazać, że można zmienić wygląd pojedynczego pola, by tego dokonać musimy przy pomocy Firebuga sprawdzić jego identyfikator pola, a następnie w CSS się do niego odnieść. Identyfikatory składają się z przedrostka "field_" oraz identyfikatora pola.

Style CSS dla formularze o układzie zakładkowym zostaną opisane wkrótce.

Na wszelkie pytania dotyczące CSS z chęcią odpowiemy. Osoby, które chciałyby dołożenia klas lub identyfikatorów także zapraszamy do korespondencji, zazwyczaj w ciągu doby udaje nam się wprowadzić odpowiednie zmiany.

Joomlart