Skocz do zawartości
BonQu

Formularz Kontaktowy html5 css3

Przez BonQu, w xHTML / CSS / Javascript

Polecane posty

BonQu    0

BonQu
Napisano

Witam. Mam tutaj dwa kody

1.html

2.css

 

do formularza kontaktowego.

 

Wszystko fajnie działa ale jednak ostatni przycisk "Wyślij formularz" wyrzuca błąd. Weteranów kodowania proszę o pomoc. Z góry dzięki.

 <form action="action" method="post" enctype="multipart/form-data" id="contact-frm">
            <fieldset>
                <legend>Formularz kontaktowy</legend>
                <ul>
                    <li>
                        <label for="name">Imię i nazwisko <strong class="asterisk">*</strong></label>
                        <input type="text" name="name" id="name" placeholder="Twoje imię i nazwisko" />
                    </li>
                    <li>
                        <label for="email">Adres e-mail <strong class="asterisk">*</strong></label>
                        <input type="email" name="email" id="email" placeholder="Twój adres e-mail np. j.kowalski@gmail.com" />
                    </li>
                    <li>
                        <label for="phone">Telefon kontaktowy</label>
                        <input type="tel" name="phone" id="phone" placeholder="Dozwolone znaki: cyfry, spacje" />
                    </li>
                    <li>
                        <label for="subject">Wybierz temat <strong class="asterisk">*</strong></label>
                        <select id="subject" name="subject">
                            <option value="1">Wykonanie strony internetowej</option>
                            <option value="2">Pozycjonowanie strony internetowej</option>
                            <option value="3">Inny</option>
                        </select>
                    </li>
                    <li>
                        <label for="message">Treść wiadomości <strong class="asterisk">*</strong></label>
                        <textarea name="message" id="message" rows="5" cols="20" placeholder="Wpisz tutaj treść swojej wiadomości..."></textarea>
                    </li>
                    <li class="options-set">
                        <p class="frm-label">Preferowana forma kontaktu</p>
                        <ul>
                            <li>
                                <label><input type="checkbox" name="contact-email" /> E-mail</label>
                            </li>
                            <li>
                                <label><input type="checkbox" name="contact-phone" /> Telefon</label>
                            </li>
                        </ul>
                    </li>
                    <li class="options-set-inline">
                        <p class="frm-label">Posiadasz już stronę www?</p>
                        <ul>
                            <li>
                                <label><input type="radio" name="site" value="y" /> Tak</label>
                            </li>
                            <li>
                                <label><input type="radio" name="site" value="n" /> Nie</label>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <p class="frm-label">Załączniki</p>
                        <input type="file" />
                    </li>
                </ul>
            </fieldset>
            <p class="frm-actions wrapper">
                <input type="submit" name="send" value="Wyślij formularz" />
            </p>
        </form>

i

 

css


#contact-frm {
    background: #eee;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 25px 60px;
    font-size: 13px;
    line-height: 18px;
    margin: 0 auto 18px;
    overflow: hidden;
    padding-top: 18px;
    width: 600px;
}

#contact-frm fieldset {
    border-bottom: 1px solid #fff;
    -khtml-box-shadow: 0 3px 3px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,.25);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.25);
    box-shadow: 0 3px 3px rgba(0,0,0,.25);
    overflow: hidden;
    padding: 0 18px;
    position: relative;
    z-index: 1
}

#contact-frm legend {
    color: #1e90ff;
    font-size: 24px;
    line-height: 1;
    margin: 0;
    text-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 1px rgba(0,0,0,.75);
    text-transform: uppercase;
}

#contact-frm fieldset ul {
    list-style: none;
    margin: 0;
}

#contact-frm fieldset > ul {
    border-top: 1px dotted #1e90ff;
    margin: 6px 0 12px;
    padding-top: 12px;
}

#contact-frm fieldset > ul > li {
    overflow: hidden;
    padding: 6px 2px;
    line-height: 24px;
}

#contact-frm fieldset > ul > li:nth-child(odd) {
    background: rgba(255,255,255,.35);
}

#contact-frm fieldset > ul > li > label,
.frm-label {
    color: #0f467c;
    display:  block;
    float: left;
    margin: 0 10px 0 0;
    width: 200px;
}

#contact-frm label {
    cursor: pointer;
}

.asterisk {
    color: #ff3f3f;
    font-weight: bold;
    padding-left: 1px;
}

#contact-frm input:focus,
#contact-frm button:focus,
#contact-frm select:focus,
#contact-frm textarea:focus {
    outline: 0 none !important;
}

#contact-frm input[type="email"],
#contact-frm input[type="text"],
#contact-frm input[type="tel"],
#contact-frm input[type="password"],
#contact-frm select,
#contact-frm textarea {
    border: 1px solid #ccc;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: #999;
    display: inline-block;
    float: left;
    font: 12px/14px Calibri, 'Helvetica Neu', Arial, Helvetica, sans-serif;
    padding: 2px;
    margin: 0;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;
    vertical-align: baseline;
    width: 250px;
}

#contact-frm select {
    width: 260px;
}

#contact-frm input[type="email"],
#contact-frm input[type="text"],
#contact-frm input[type="tel"],
#contact-frm input[type="password"],
#contact-frm textarea {
    padding: 3px 4px;
}

#contact-frm textarea {
    height: 72px;
    min-height: 72px;
    min-width: 250px;
    max-width: 400px;
    overflow: auto;
}

::-webkit-input-placeholder {
    color: #999;
}

:-moz-placeholder {
    color: #999;
}

#contact-frm [class^="options-set"] ul {
    margin-left: 210px;
}

#contact-frm input[type="checkbox"],
#contact-frm input[type="radio"] {
    margin: 0 3px 0 0;
    position: relative;
    top: 2px;
    vertical-align: baseline;
}

#contact-frm input[type="radio"] {
    top: 1px;
}

#contact-frm input[type="email"]:focus,
#contact-frm input[type="text"]:focus,
#contact-frm input[type="tel"]:focus,
#contact-frm input[type="password"]:focus,
#contact-frm select:focus,
#contact-frm textarea:focus {
    border-color: #1E90FF;
    -khtml-box-shadow: 0 0 4px #1E90FF;
    -moz-box-shadow: 0 0 4px #1E90FF;
    -webkit-box-shadow: 0 0 4px #1E90FF;
    box-shadow: 0 0 4px #1E90FF;
    color:  #444;
}

#contact-frm input[type="file"] {
    font: 12px/normal Calibri, 'Helvetica Neu', Arial, Helvetica, sans-serif;
}

#contact-frm .options-set-inline li {
    display: inline;
    margin-right: 10px;
}

#contact-frm .options-set-inline li:last-child {
    margin-right: 0;
}

#contact-frm .frm-actions {
    background: #ddd;
    padding: 18px 20px;
    margin: 0;
    text-align: right;
    overflow: hidden;
}

#contact-frm input[type="submit"]::-moz-focus-inner {
    border: 0 none !important;
    padding: 0;
    margin: 0;
}

#contact-frm input[type="submit"] {
    -webkit-appearance: button;
    background-color: #0f467c;
    background-image: -o-linear-gradient(bottom, rgb(15,70,124) 0%, rgb(30,143,255) 50%);
    background-image: -moz-linear-gradient(bottom, rgb(15,70,124) 0%, rgb(30,143,255) 50%);
    background-image: -ms-linear-gradient(bottom, rgb(15,70,124) 0%, rgb(30,143,255) 50%);
    background-image: -webkit-linear-gradient(bottom, rgb(15,70,124) 0%, rgb(30,143,255) 50%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(15,70,124)),
        color-stop(0.5, rgb(30,143,255)));

    background-image: linear-gradient(bottom, rgb(15,70,124) 0%, rgb(30,143,255) 50%);
    border: 1px solid #0f467c;
    color: #fff !important;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -khtml-box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
    cursor: pointer;
    display: inline-block;
    font: bold 13px/18px Calibri, 'Helvetica Neu', Arial, Helvetica, sans-serif;
    margin: 0;
    overflow: hidden;
    padding: 5px 18px 4px;
    position: relative;
    text-align: center;
    text-decoration: none !important;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.75);
    text-transform: uppercase;
    vertical-align: middle;
    width: auto;
}

#contact-frm input[type="submit"]:hover {
    text-shadow: 1px 1px 1px rgba(0,0,0,0.75);
}

#contact-frm input[type="submit"]:active {
    top: 1px;
    left: 1px;
}

#contact-frm input[type="submit"]:hover {
    background: #082644 none;
}

#contact-frm input[type="submit"]:focus {
    text-shadow: 0 1px 1px rgba(0,0,0,0.75);
}

Z góry informuje że kod nie jest mój!



Zamykam. :) już wiem jaki jestem głupi ;D

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Gość mpm1122   

Gość mpm1122
Napisano

A jak to chcesz niby wysłać? Zapodaj kod PHP... Patrząc na ten kod to zapewne chcesz oferować usługi samemu nie znając się na rzeczy.

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Gość nrm   

Gość nrm
Napisano

Najważniejsze, że dał CSSa :D Równie dobrze mógł wkleić listę wczorajszych zakupów w Tesco :D

  • Upvote 3

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

PapaSmerf    497

PapaSmerf
Napisano

Najważniejsze, że dał CSSa :D Równie dobrze mógł wkleić listę wczorajszych zakupów w Tesco :D

 

I treść błędu :D

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

BonQu    0

BonQu
Napisano

A jak to chcesz niby wysłać? Zapodaj kod PHP... Patrząc na ten kod to zapewne chcesz oferować usługi samemu nie znając się na rzeczy.

 

kod html

 

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Gość mpm1122   

Gość mpm1122
Napisano

 

kod html

 

 

No to życzę powodzenia :) Aby przez sam kod html zrobić w pełni funkcjonalny formularz kontaktowy.

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Gość   

Gość
Napisano

Przez kod html to sobie mozesz ale tylko wyslac zmienne do skryptu php.

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

BonQu    0

BonQu
Napisano (edytowany)

ten prosty formularz w html ma wygenerować wiadomość email i poprzez zainstalowany program do obsługi poczty email wysłać go np. outlock express czy mozilla thunderbird..

 

działa tak samo jak kod:

 

mailto:email@email.com

tylko dane wpisujemy wcześniej...

Edytowano przez BonQu (zobacz historię edycji)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się
Przejdź do listy tematów xHTML / CSS / Javascript
×