TĘCZOWY FORMULARZ KONTAKTOWY 1

Dziś jeszcze jeden post z serii HelpBlogger.

Tym razem jak zrobić formularz kontaktowy

na stronie statycznej.

Wchodzicie w układ bloga, następnie dodajecie do kolumny bocznej

gadżet formularza kontaktowego.

Następnie wchodzicie w motyw, w zaawansowane

i tam w arkusz CSS wklejacie poniższy kod z ramki poniżej...

#ContactForm1{display: none !important;}

Klikacie enter, zapisujecie i przechodzicie do stron w blogu,

gdzie musicie utworzyć stronę z tytułem kontakt.

Gadżet z układu powinien zniknąć.

Na utworzonej stronie pt. kontakt wchodzicie w HTML,
zaznaczacie, to co ja na granatowo

i wklejacie poniższy kod z poniższej ramki...

<style type="text/css"> .contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:0}hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}hr:before{content:"";display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#C4DD83;box-shadow:5em 0 0 0 #F4FCC9,10em 0 0 0 #FDCD78,15em 0 0 0 #eb99a8,20em 0 0 0 #D99DBF,25em 0 0 0 #C39EDC,30em 0 0 0 #679DE2,35em 0 0 0 #62C2E3,40em 0 0 0 #F4FCC9,45em 0 0 0 #FDCD78,50em 0 0 0 #eb99a8,55em 0 0 0 #D99DBF,60em 0 0 0 #C39EDC}.contactf-name,.contactf-email{float:left;width:49.25%}.contactf-name{margin-right:1.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:25px 0 0;padding:10px;font-size:15px;color:#ccc;border-color:#E8E8E8;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#eb99a8;border:0;border-bottom:2px solid #eb99a8;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #eb99a8;box-shadow:inset 0 -2px #eb99a8}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none !important;box-shadow:none !important;padding:0 !important;height:11px !important;width:11px !important;} </style> <div class="widget ContactForm" id="ContactForm22"> <div class="contact-form-widget"> <hr> <div class="form"> <form name="contact-form"> <div class="contactf-name"> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" size="30" type="text" value="Name" onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}'/></div> <div class="contactf-email"> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}'/></div> <div style="clear:both"> </div> <div class="contactf-message"> <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." rows="5" type="text" value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'>

Zapisujecie i cieszycie się tęczowym formularzem kontaktowym :)

Oczywiście kolory możecie pozmieniać według waszego uznania.

Nic nie stoi na przeszkodzie ;)

Już wkrótce, kolejne wzory formularzy kontaktowych.

Zapraszam Was cieplutko :D