sexta-feira, 25 de maio de 2012

Colocando background no formulário de contato

Tumblr_m1l70410de1r26xdco1_500_large
Pois é gente quem é vivo sempre aparece né?  (risos) .. Hoje eu trouxe a minha cara de pau junto (?) pois vou ensinar um tutorial que havia prometido a séculos , mais por ser tão fácil eu acabava deixando o assunto de lado.
Enfim hoje vocês vão aprender como colocar um background no formulário de contato assim como o meu ( clique para ver um exemplo ).

Pra fazer um formulário como o meu é só seguir este tutorial (clique). Mais também funciona caso seu formulário seja de outro site, ok?

http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif 1° Você precisa criar uma imagem que servira como o fundo (background) do seu formulário. Eu fiz alguns exemplos caso alguém queira usar ... 

- Rosa
Azul

 Quem quiser deixar mais personalizado pode usar usar minha página de (enviar um post) como inspiração!

http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif 2° Agora hospede a imagem em algum site que faça isso gratuitamente por exemplo: imgur.com

http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif 3°Antes do código do seu formulário coloque este:


<div style="background:url(URL DO SEU backgound) no-repeat;padding-right:20px;padding-left:20px;padding-top:30px;padding-bottom:10px;">



Não esqueça de colocar a url do seu background no lugar indicado! 

 Como pegar a url de uma imagem? clique em cima da imagem com o botão direito do mouse e selecione '' copiar url da imagem ''. Só isso

Note que o background e o formulário estão meio desajustados, então altere os números grifados em azul até colocar tudo em seu lugar!

padding-right: equivale á margem direita;
padding-left: equivale á margem esquerda; 
padding-top: equivale á margem de cima;
padding-bottom: equivale a margem de baixo

http://i11.photobucket.com/albums/a168/evelynregly/minigifs/miniok.gif 4° Após fazer os ajustes necessários após o código do formulário adicione a tag </div> pronto agora é só visualizar e se estiver tudo ok salve.
Espero que tenham gostado do tutorial de hoje ;D

40 comentários :

  1. Otimo tutorial Jackie,eu tava louca para saber como é que faz.

    Mais quando a coragem aparecer eu faço lá no meu blog kkkkk

    Beijooos
    caandydream.tk

    ResponderExcluir
  2. Adorei o tutu Jackie bem util...
    É troquei o nome do blog de novo pq o antigo tava sendo muito copiado :(

    xoxo <3 World Glitter

    ResponderExcluir
  3. Obaaaa!!!
    Que bom que você postou o tutorial Jackie.Estava louca por ele.
    BEIJO
    http://blog-moderninho.blogspot.com/

    ResponderExcluir
  4. Eu adorei!!!! Vou colocar um formulário no meu e fazer esse tutorial kawaii ^^
    :k:Beijus<3
    http://reinokawaii.blogspot.com

    ResponderExcluir
  5. Legal, acho que vou usar lá no blog ^^'
    http://bittersweetandcolorful.blogspot.com.br/

    ResponderExcluir
  6. Oh!
    Vou tentar algum dia!
    http://famousfashionchik.blogspot.com

    ResponderExcluir
  7. Amei, estava precisando muito...
    Obrigado!
    Beijos!

    ResponderExcluir
  8. Oii, q legal q fico o seu..

    all-fashion-blog.blogspot.com.br

    ResponderExcluir
  9. Ótimo tuto! sempre quis saber como colocar um fundo como aquele seu de enviar um post! bjs ~> imnanda.blogspot.com

    ResponderExcluir
  10. Jackie, quando fui colocar o plano de fundo no form, me dei de cara com um problema: não consigo deixar o plano de fundo do form transparente! ele é branco, então quando ponho a imagem de fundo alinhadinha no form, ela não aparece! me ajuda, pf! o que faço?

    ResponderExcluir
  11. Perfeeeeito, quando for usar o formulário de contato concerteza irei usar essa sua dica!
    adoooooooooooooooorei esse tutorial.
    beeijos

    http://www.asgarotasdonl.blogspot.com.br/

    ResponderExcluir
  12. ha Jackie com mais um de seus Tutuus'
    e sem fala que acho seu formulário LINDO ..
    ve se não some por muito tempo do blog viu mocinha rsrs .. Beijoooos

    ResponderExcluir
  13. Amei o tutorial ! Muito útil :D

    http://mundodatwotwoka.blogspot.com.br/

    ResponderExcluir
  14. Amei *o* Favoritei :3
    Jackie obg por act o ping pong, as perguntas são essas abaixo, peço que responda lá no meu blog se não for muito encomodo:

    Um sonho?
    Uma amiga?
    Um país?
    Um medo?
    Uma paixão?
    Um animal?
    Brigadeiro ou Nutella?
    Café ou chocolate quente?
    Rock ou Sertanejo?
    Estação do ano?
    Música?
    Um filme?
    Um seriado?
    Cantar ou dançar?
    Um livro?
    Uma frase?
    Saudades de?

    Muito obrigada mesmo (: bj
    Morangos Também Falam

    ResponderExcluir
  15. Fiz agora, olha!!!!
    http://www.planetadablogueira.com/p/contato_10.html

    Adorei o tutorial!! beijinhos.

    ResponderExcluir
  16. Muito legal, o seu ficou lindo :d:bjs
    http://blogbondmais.blogspot.com/

    ResponderExcluir
  17. Ficou muito lindo!! Parabéns!!

    www.jubspimenta.blogspot.com

    ResponderExcluir
  18. :a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n:

    ResponderExcluir
  19. Ahhhh é bem útil se eu soubesse criar um formulário kkk me ajuda? beijos Let's Go

    ResponderExcluir
  20. Ah que legal,vou tentar fazer :h: !!!

    ResponderExcluir
  21. heey ta sabendo da novidade ? Agora sou parceiro da loja Kawaii Shop, roupas, acessórios, sapatos, importados, um mais lindo que o outro! e em breve teremos um sorteio de um lindo Kit acesse meu blog e saiba da novidade em breve !

    - Visite meu Blog: http://gah-principe-hype.blogspot.com/ veja as novidades bjs bjs

    ResponderExcluir
  22. Não consegui ajustar do tamanho do formulario.
    Mais do de fazer ja deu uma forcinha,como que eu sei qual o tamanho do formulario e da imagem?

    ResponderExcluir
  23. Amei o post tava precisando de um desses para ficar mais bonitinho!

    http://meninadomundopink.blogspot.com.br

    ResponderExcluir
  24. Oi Jackie! Achei esse tutorial bem útil, se eu usar te darei todos os créditos!
    Bjs
    http://isa-pequena.blogspot.com.br/

    ResponderExcluir
  25. Oi!
    tudo bem? seu blog esta lindo!!!
    mas hj queria t convidar a "participar" de uma postagem q acabei de fazer.
    olha só:
    http://oblogdapp.blogspot.com.br/2012/05/desenhos-feitos-pra-voce.html
    é uma postagem falando que eu desenho qualquer coisa que pedirem! e eu queria q vc pedisse pra eu desenhar algo pra vc... pode ser uma menininha, um bicho fofinho, uma coisa que represente seu blog...
    espero seu comentario lá!!!
    beijinhos

    ResponderExcluir
  26. Ótimo tutorial. Eu não sabia que tinha como colocar backgrounds no fundo do fomulário de contato.
    http://i-teenbr.net.tc

    ResponderExcluir
  27. Jackie aceita parceria?
    http://fashionemcores.com

    ResponderExcluir
  28. @Gaby LimaHoooy guria é só vc dar uma lida nesse post que eu estou indicando um tutorial que pode te ajudar a criar um formulário de contado ;D

    ResponderExcluir
  29. Sim sim, Jackie, eu uso o jotform.com | vou tentar fazer de novo, mas não estou conseguindo!! beijinhos e obg pela atenção! ~> imnanda.blogspot.com

    ResponderExcluir
  30. oi então tah, eu aceito parceria, vou colocar vc lá

    ResponderExcluir
  31. Ótimo tutu Jackie ^^ Ah, e as imagens que você não conseguiu ver no meu blog, eu não sei o que aconteceu, do nada deu aquele problema... A Sabrina do mycandyspace.blogspot.com também não conseguiu... O que pode ter acontecido ?
    Bejooos ->by-jade.blogspot.com

    ResponderExcluir
  32. oi ficou bem legal eu fiz no meu site e esta um maximo, seu blog e o melhor que eu ja vi tem varios tutoriais para deixar meu blog em bonitinho obr..

    ResponderExcluir
  33. Amei o Tutorial Jackie! Você poderia me dizer como deixo o formulário e o background centralizados? Obrigad@!

    ResponderExcluir
    Respostas
    1. Precisa mexer nas larguras do código do background (right e left)

      Excluir

.