Cursos 24 Horas - Cursos 100% Online com Certificado

Formulário de contato com Jquery – Blogger/WordPress

8 Comentários Autor : Notícia e blog 16 junho 2010

contactable

Este é mais um formulário de contato que encontrei, muito bonito e de fácil instalação. Melhorando ainda mais os meios de contato do seu blog, quem possui o WordPress basta instalar um plugin que veremos abaixo e quem possui o Blogger basta utilizar a minha conversão do plugin, veja um demo

Instalando no Blogger

1) Acesse o painel do Blogger(blogger.com)

2) Vá em “Layout/Design”-> Editar HTML

3) Procure pelo seguinte:

</head>

Antes do código acima adicione:

<script src='http://www.google.com/jsapi'/>
<script type='text/javascript'>
google.load("jquery", "1.4");
</script>
<script src='http://jqueryjs.googlecode.com/svn-history/r6291/trunk/plugins/validate/jquery.validate.pack.js' type='text/javascript'/>
<script charset='utf8_decode' src='http://noticiaeblog.mynetcko.com/noticiaeblog/arquivos/php/formulario.php?email=fernandopasse@hotmail.com&amp;blog=Noticia e blog' type='text/javascript'/>

Obs.: Substitua o trecho em vermelho pelo seu e-mail de contato, e em azul pelo nome do seu blog.

4) Procure pelo seguinte:

]]></b:skin>

Antes do código acima adicione:

/* Contato
--------------------------------------*/
#content{background-color:#FDFDFD;border-left:2px solid #333;border-right:2px solid #333;position:relative;width:930px;height:100%;margin:0 auto;padding:10px;}
#contactable{background-image:url(http://imgur.com/0PfWr.png);color:#FFF;background-color:#333;cursor:pointer;height:102px;left:0;margin-left:-5px;overflow:hidden;position:absolute;text-indent:-100000px;top:102px;margin-top:10px;width:44px;z-index:100000;} #contactForm{background-color:#333;border:2px solid #FFF;color:#FFF;height:450px;left:0;margin-left:-434px;margin-top:-160px;overflow:hidden;padding-left:30px;position:fixed;top:200px;width:394px;z-index:99;}
form#contactForm input,textarea{background:#FFF none repeat scroll 0 0;outline-style:none;outline-width:medium;width:325px;border:1px solid #dfdfdf;font-family:georgia;font-size:1em;margin-bottom:10px;padding:5px;}
form#contactForm .submit{background:#F5410F none repeat scroll 0 0;outline-style:none;outline-width:medium;width:325px;border:3px solid #F52D0F;outline-color:0;font-size:1em;cursor:pointer;color:#FFF;text-transform:uppercase;font-weight:bolder;font-family:Helvetica;margin-top:10px;padding:5px;}
form#contactForm p{width:325px;font-size:.9em;}
#contactForm .red{color:#F5410F;}
#overlay{background-color:#666;display:none;height:100%;left:0;position:absolute;top:0;width:100%;z-index:0;margin:0;padding:0;}
form#contactForm #loading{background:url(http://imgur.com/v4Q5C.gif) no-repeat;width:55px;height:55px;display:none;margin:100px auto;} #callback{font-family:georgia;font-size:1.1em;color:#FFF;width:325px;display:none;margin:100px auto;}
.holder{padding-top:20px;margin:0 auto 0 20px;}
form#contactForm .disclaimer,form#contactForm label{margin-left:20px;}
.error,#name.error,#email.error,#comment.error{background-color:#EDBE9C;}

5) Procure pelo seguinte:

<body>

Abaixo dele adicione o seguinte:

<div id='contact'/>

6) Salve as alterações.

Instalação no WordPress

Baixe e instale o plugin Contactable no seguinte endereço: Theodin.co.uk

    8 Comentários

    DheTemplate disse...
    18 de junho de 2010 01:21 #

    Nice form and can be alternative Contact Us

    lukebell disse...
    27 de setembro de 2010 20:59 #

    Interessante seu artigo, mas eu uso o bloger e não achei "< body >" no meu html.
    achei apenas "< body expr:class='"loading" + data:blog.mobileClass' >"
    e colei seu codigo mesmo assim, mas não apareceu a caixa de dialogo.

    Neusard disse...
    4 de outubro de 2010 23:42 #

    também não encontrei o body no meu html está
    body expr:class='"loading" + data:blog.mobileClass'
    e coloquei logo a seguir e não funcionou pode me ajudar?

    koljoseph disse...
    5 de outubro de 2010 17:48 #

    eu fiz o mesmo ai o resutado foi igual a dos manos ai emcima nada

    Will_raven disse...
    30 de outubro de 2010 13:55 #

    o meu tbmm naum deu em nadaaa

    Psicologia Academica disse...
    16 de abril de 2011 08:43 #

    não funcionou, você poderia criar um form para nós leigos, mais sem comercial.

    Porque este que oferecem tem muitas propagandas e marketing.

    Grato!!

    Mega Dotados disse...
    27 de janeiro de 2012 14:04 #

    no meu blog nao funcionou mas eu uso outro
    http://www.contactme.com/contact_form?utm_source=footer&utm_medium=form&utm_term=icon&utm_content=get&utm_campaign=product&r=product-form-footer-get-logo

    Mariana disse...
    20 de fevereiro de 2012 12:06 #

    Após o código instalado, onde o formulário irá aparecer?

    Postar um comentário

    Deixe seu comentário aqui
    Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.