Ir para conteúdo
Fórum Script Brasil
  • 0

Formulario de Contato


djonatanpk

Pergunta

Bom Dia Galera

Estou estudando um pouco sobre Html5 css3 e JS e baxei um template pronto e estou editando ele quero criar o formulário de contato, por isso estou com um pouco de duvida do que precisa ser alterado vou posta abaixo o codigo HTML.

tem a pagina de contato e em todas as outras paginas também tem o formulario de contato

Pagina de contato

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Djonatan Pablo Kruger - Desenvolvimento de Sistemas, Consultoria, Treinamenento, Marketing Digital</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen"> 
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> 
    <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">   
    
    &lt;script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>
    &lt;script src="js/cufon-yui.js" type="text/javascript"></script> 
    &lt;script src="js/cufon-replace.js" type="text/javascript"></script> 
    &lt;script src="js/NewsGoth_400.font.js" type="text/javascript"></script>
    &lt;script src="js/NewsGoth_700.font.js" type="text/javascript"></script>
    &lt;script src="js/NewsGoth_Lt_BT_italic_400.font.js" type="text/javascript"></script>
    &lt;script src="js/Vegur_400.font.js" type="text/javascript"></script> 
    &lt;script src="js/FF-cash.js" type="text/javascript"></script>
    
</head>
<body id="page5">
    <div class="extra">
        <!--==============================header=================================-->
        <header>
            <div class="row-top">
                <div class="main">
                    <div class="wrapper">
                        <h1><a href="index.html">djonatanpk</a></h1>
                    </div>
                </div>
            </div>
            <div class="menu-row">
                <div class="menu-bg">
                    <div class="main">
                        <nav class="indent-left">
                            <ul class="menu wrapper">
                                <li><a href="index.html">Home</a></li>
                                <li><a href="company.html">Quem Somos</a></li>
                                <li><a href="services.html">Nossos Serviços</a></li>
                                <li><a href="projects.html">Nossos Projetos</a></li>
                                <li class="active"><a href="contact.html">Contato</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="row-bot">
                <div class="center-shadow">
                </div>
            </div>
        </header>
        
        <!--==============================content================================-->
        <section id="content"><div class="ic"></div>
            <div class="content-bg">
                <div class="main">
                    <div class="container_12">
                        <div class="wrapper">
                            <article class="grid_8">
                                <h3>Formulario de Contato</h3>
                                <form id="contact-form2" method="post" enctype="multipart/form-data">                    
                                    <fieldset>
                                          <label><span class="text-form">Nome:</span><input name="p1" type="text" /></label>
                                          <label><span class="text-form">Email:</span><input name="p2" type="text" /></label>                              
                                          <div class="wrapper">
                                            <div class="text-form">Mensagem:</div>
                                            <div class="extra-wrap">
                                                <textarea></textarea>
                                                <div class="clear"></div>
                                                <div class="buttons2">
                                                    <a href="#" onClick="document.getElementById('contact-form2').reset()">Limpar</a>
                                                    <a href="#" onClick="document.getElementById('contact-form2').submit()">Enviar</a>
                                                </div> 
                                            </div>
                                          </div>                            
                                    </fieldset>                        
                                </form>
                            </article>    
                            <article class="grid_4">
                                <h3>Informaçoes de Contato</h3>
                                <figure class="img-indent-bot img-border">
                                    <iframe width="298" height="179" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com.br/maps?f=q&source=s_q&hl=pt-BR&geocode=&q=R.+Gerv%C3%A1sio+Prawvsky,+Massaranduba+-+Santa+Catarina&aq=0&o que=r.+gerMassaranduba+-+Santa+Catarina&sll=-26.600941,-49.066873&sspn=0.01061,0.017767&ie=UTF8&hq=&hnear=R.+Gerv%C3%A1sio+Prawvsky+-+Massaranduba+-+Santa+Catarina&t=m&z=14&ll=-26.59697,-49.062638&output=embed"></iframe><br /><small><a href="http://maps.google.com.br/maps?f=q&source=embed&hl=pt-BR&geocode=&q=R.+Gerv%C3%A1sio+Prawvsky,+Massaranduba+-+Santa+Catarina&aq=0&o que=r.+gerMassaranduba+-+Santa+Catarina&sll=-26.600941,-49.066873&sspn=0.01061,0.017767&ie=UTF8&hq=&hnear=R.+Gerv%C3%A1sio+Prawvsky+-+Massaranduba+-+Santa+Catarina&t=m&z=14&ll=-26.59697,-49.062638" style="color:#0000FF;text-align:left"></a></small>
                                </figure>
                                <dl>
                                    <dt class="indent-bot">BRASIL<br>Santa Catarina - Massaranduba, Benjamin Constant, R. Gervásio Prawvsky</dt>
                                    <dd><span>Celular</span> +55 47 9689 2709 </dd>
                                    <dd><span>Skype</span> djonatan.kruger </dd>
                                    <dd><span>MSN</span> djonatan@brturno.com.br </dd>
                                    <dd><span>Email:</span><a href="#">djonatan@brturbo.com.br</a></dd>
                                </dl>
                            </article>                        
                        </div>
                    </div>
                </div>
                <div class="block"></div>
            </div>
        </section>
    </div>
    
    <!--==============================footer=================================-->
    <footer>
        <div class="padding">
            <div class="main">
                <div class="container_12">
                    <div class="wrapper">
                        <article class="grid_8">
                            <h4>Formulario de Contato</h4>
                            <form id="contact-form" method="post">
                                <fieldset>
                                    <label><input name="email" value="Email" onBlur="if(this.value=='') this.value='Email'" onFocus="if(this.value =='Email' ) this.value=''" /></label>
                                    <label><input name="subject" value="Assunto" onBlur="if(this.value=='') this.value='Assunto'" onFocus="if(this.value =='Assunto' ) this.value=''" /></label>
                                    <textarea onBlur="if(this.value=='') this.value='Mensagem'" onFocus="if(this.value =='Mensagem' ) this.value=''">Mensagem</textarea>
                                    <div class="buttons">
                                        <a href="#" onClick="document.getElementById('contact-form').reset()">Limpar</a>
                                        <a href="#" onClick="document.getElementById('contact-form').submit()">Enviar</a>
                                    </div>                                            
                                </fieldset>           
                            </form>
                        </article>
                        <article class="grid_4">
                            <h4 class="indent-bot">Siga Nos:</h4>
                            <ul class="list-services border-bot img-indent-bot">
                                <li><a href="#">Facebook</a></li>
                                <li><a class="item-1" href="#">Twitter</a></li>
                                <li><a class="item-2" href="#">Picassa</a></li>
                                <li><a class="item-3" href="#">YouTube</a></li>
                            </ul>
                            <p class="p1">Djonatanpk.com.br © 2012 </p>
                            <p class="p1">Todos os Direitos Reservados</p>
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    &lt;script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
Pagina Index
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Djonatan Pablo Kruger - Desenvolvimento de Sistemas, Consultoria, Treinamenento, Marketing Digital</title>
    <meta charset="utf-8">
    <!--<meta charset="utf-8"> -->
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">   
    &lt;script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>
    &lt;script src="js/cufon-yui.js" type="text/javascript"></script>
    &lt;script src="js/cufon-replace.js" type="text/javascript"></script>
    &lt;script src="js/NewsGoth_400.font.js" type="text/javascript"></script>
    &lt;script src="js/NewsGoth_700.font.js" type="text/javascript"></script>
    &lt;script src="js/NewsGoth_Lt_BT_italic_400.font.js" type="text/javascript"></script>
    &lt;script src="js/Vegur_400.font.js" type="text/javascript"></script> 
    &lt;script src="js/FF-cash.js" type="text/javascript"></script>
    &lt;script src="js/jquery.featureCarousel.js" type="text/javascript"></script>     
    &lt;script type="text/javascript">
      $(document).ready(function() {
        $("#carousel").featureCarousel({
            autoPlay:7000,
            trackerIndividual:false,
            trackerSummation:false,
            topPadding:50,
            smallFeatureWidth:.9,
            smallFeatureHeight:.9,
            sidePadding:0,
            smallFeatureOffset:0
        });
      });
    </script>
</head>
<body id="page1">
    <div class="extra">
        <!--==============================header=================================-->
        <header>
            <div class="row-top">
                <div class="main">
                    <div class="wrapper">
                        <h1><a href="index.html">djonatanpk</a></h1>
                    </div>
                </div>
            </div>
            <div class="menu-row">
                <div class="menu-bg">
                    <div class="main">
                        <nav class="indent-left">
                            <ul class="menu wrapper">
                                <li class="active"><a href="index.html">Home</a></li>
                                <li><a href="company.html">Quem Somos</a></li>
                                <li><a href="services.html">Nossos Serviços</a></li>
                                <li><a href="projects.html">Nossos Projetos</a></li>
                                <li><a href="contact.html">Contato</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="row-bot">
                <div class="center-shadow">
                    <div class="carousel-container">
                      <div id="carousel">
                        <div class="carousel-feature">
                          <a href="#"><img class="carousel-image" alt="" src="images/gallery-img1.png"></a>                          
                        </div>
                        <div class="carousel-feature">
                          <a href="#"><img class="carousel-image" alt="" src="images/gallery-img3.png"></a>
                        </div>
                        <div class="carousel-feature">
                          <a href="#"><img class="carousel-image" alt="" src="images/gallery-img2.png"></a>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </header>
        
        <!--==============================content================================-->
        <section id="content"><div class="ic"></div>
            <div class="main">
                <div class="container_12">
                    <div class="wrapper">
                        <article class="grid_8">
                            <h3>Bem Vindo!</h3>
                            <em class="text-1 margin-bot">Olá sou Djonatan Pablo Kruger,Confira abaixo algumas das soluções 
                            que posso trazer para você ou sua empresa.<br>
                            Este site é melhor visualizado em 1280X1024.</em>
                            <div class="wrapper p4">
                                <article class="grid_4 alpha">
                                    <div class="wrapper p1">
                                        <figure class="img-indent2"><img src="images/page1-img1.png" alt="" /></figure>
                                        <div class="extra-wrap">
                                            <div class="indent-top">
                                                <h4>Marketing Digital<em>Apareça para o Mundo</em></h4>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="prev-indent-bot"> Email Marketing, Redes Socias, Hotsites<br>
                                    Mantenha seus Clientes informados de tudo o que você esta fazendo, tenha dados estatisticos 
                                    sobre suas campanhas</p>
                                    <a class="link-1" href="services.html">Saiba Mais</a>
                                </article>
                                <article class="grid_4 omega">
                                    <div class="wrapper p1">
                                        <figure class="img-indent2"><img src="images/page1-img2.png" alt="" /></figure>
                                        <div class="extra-wrap">
                                            <div class="indent-top">
                                                <h4>Desenvolvimeto<em>Personalizado</em></h4>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="prev-indent-bot">Precisando de uma solução sob-medida? Trabalho com os mais novos 
                                    padrões de desenvolvimento. Tecnologias como JAVA, PHP, HTML5, CSS3, MYSQL, POSTGRESQL ...</p>
                                    <a class="link-1" href="#">Saiba Mais</a>
                                </article>
                            </div>
                            <div class="wrapper">
                                <article class="grid_4 alpha">
                                    <div class="wrapper p1">
                                        <figure class="img-indent2"><img src="images/page1-img3.png" alt="" /></figure>
                                        <div class="extra-wrap">
                                            <div class="indent-top">
                                                <h4>Web Design<em>Você 24 horas</em></h4>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="prev-indent-bot">Desenvolvimento de Sites, Hotsites, Sistemas WEB. Soluções 
                                    sob-medida, Você, sua Empresa ou sua Marca ao alcance do mundo</p>
                                    <a class="link-1" href="#">Saiba Mais</a>
                                </article>
                                <article class="grid_4 omega">
                                    <div class="wrapper p1">
                                        <figure class="img-indent2"><img src="images/page1-img4.png" alt="" /></figure>
                                        <div class="extra-wrap">
                                            <div class="indent-top">
                                                <h4>Suporte Remoto<em>HelpDesk</em></h4>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="prev-indent-bot">Concentre-se no cresimento da sua empresa. Podemos Auxiliar 
                                    seu departamento de TI, com poderosas ferramentas, consultoria e treinamento</p>
                                    <a class="link-1" href="#">Saiba Mais</a>
                                </article>
                            </div>
                        </article>
                        <article class="grid_4">
                            <h3>Testemunho de Clientes</h3>
                            <div class="wrapper p3">
                                <figure class="img-indent"><a href="#"><img class="img-border" src="images/page1-img5.jpg" alt="" /></a></figure>
                                <div class="extra-wrap">
                                    <span class="text-2">Espaço Reservado</span>
                                    <h4 class="p2">Para Voçê</h4>
                                    <p class="prev-indent-bot">Sejá nosso parceiro, traga sua opinião, nos conte como foi sua 
                                    experiacia ao se juntar a nós</p>
                                    
                                </div>
                            </div>
                            <div class="wrapper p3">
                                <figure class="img-indent"><a href="#"><img class="img-border" src="images/page1-img6.jpg" alt="" /></a></figure>
                                <div class="extra-wrap">
                                    <span class="text-2">Espaço Reservado</span>
                                    <h4 class="p1">Para sua Empresa</h4>
                                    <p class="prev-indent-bot">A nossa solução foi produtiva para sua empresa? Expresse sua 
                                    opnião aqui.</p>
                                   
                                </div>
                            </div>
                            <div class="wrapper">
                                <figure class="img-indent"><a href="#"><img class="img-border" src="images/page1-img7.jpg" alt="" /></a></figure>
                                <div class="extra-wrap">
                                    <span class="text-2">Espaço Reservado</span>
                                    <h4 class="prev-indent-bot">Para sua Marca</h4>
                                    <p class="prev-indent-bot">Sua marca é muito importante para nós, compartilhe conosco 
                                    como esta sendo sua experiencia a trazer ela junto a nós</p>
                                    
                                </div>
                            </div>
                        </article>
                    </div>
                </div>
            </div>
            <div class="block"></div>
        </section>
    </div>
    
    <!--==============================footer=================================-->
    <footer>
        <div class="padding">
            <div class="main">
                <div class="container_12">
                    <div class="wrapper">
                        <article class="grid_8">    <h4>Formulario de Contato</h4>
                            <form id="contact-form" action="enviar.php" method="post">
                                <fieldset>
                                    <label><input name="email" value="Email" onBlur="if(this.value=='') this.value='Email'" onFocus="if(this.value =='Email' ) this.value=''" /></label>
                                    <label><input name="subject" value="Assunto" onBlur="if(this.value=='') this.value='Assunto'" onFocus="if(this.value =='Assunto' ) this.value=''" /></label>
                                    <textarea onBlur="if(this.value=='') this.value='Mensagem'" onFocus="if(this.value =='Mensagem' ) this.value=''">Mensagem</textarea>
                                    <div class="buttons">
                                        <a href="#" onClick="document.getElementById('contact-form').reset()">Limpar</a>
                                        <a href="#" onClick="document.getElementById('contact-form').submit()">Enviar</a>
                                    </div>                                            
                                </fieldset>           
                            </form>
                        </article>
                        <article class="grid_4">
                            <h4 class="indent-bot">Siga Nos:</h4>
                            <ul class="list-services border-bot img-indent-bot">
                                <li><a href="#">Facebook</a></li>
                                <li><a class="item-1" href="#">Twitter</a></li>
                                <li><a class="item-2" href="#">Picassa</a></li>
                                <li><a class="item-3" href="#">YouTube</a></li>
                            </ul>
                            <p class="p1">Djonatanpk.com.br © 2012 </p>
                            <p class="p1">Todos os Direitos Reservados</p>
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    &lt;script type="text/javascript"> Cufon.now(); </script>
</body>
</html>

Quem poder ajudar eu agradeço

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

Modifique tudo oque estiver abaixo de

<h3>Formulario de contato</h3>
até
</form>
<h3>Formulario de Contato</h3>
                                <form id="contact-form2" method="post" enctype="multipart/form-data">                    
                                    <fieldset>
                                          <label><span class="text-form">Nome:</span><input name="p1" type="text" /></label>
                                          <label><span class="text-form">Email:</span><input name="p2" type="text" /></label>                              
                                          <div class="wrapper">
                                            <div class="text-form">Mensagem:</div>
                                            <div class="extra-wrap">
                                                <textarea></textarea>
                                                <div class="clear"></div>
                                                <div class="buttons2">
                                                    <a href="#" onClick="document.getElementById('contact-form2').reset()">Limpar</a>
                                                    <a href="#" onClick="document.getElementById('contact-form2').submit()">Enviar</a>
                                                </div>
                                            </div>
                                          </div>                            
                                    </fieldset>                        
                                </form>

Qualquer duvida postai!

Flwss!

Editado por lucke
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,1k
×
×
  • Criar Novo...