Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Algum cristão poderia me ajudar a inserir um form em uma imagem.
Exemplo: criei esta simples caixa de newsletter no photoshop e quero iserir os respectivos código para hospedr no meu site e realmente ficar ativa.
/applications/core/interface/imageproxy/imageproxy.php?img=http://img209.imageshack.us/img209/4090/ajaxnewsletterform.png&key=0bb0f50ccdd292e3bd2d8f85a50fc10c734acf8404ea5106a3204a2d009a6c85" alt="Imagem Postada" />
Sei criar o form e sei criar a imagem. Só não sei uní-los.
Ah... você deve estar pensando em converter do PS para HTML. Você terá que ter noção de CSS para poder realizar esta tarefa, além de muito tableless...
Este tutorial é ótimo: http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/
A imagem tem um form extremamente simples. Acesse o site a seguir e comece a criar até chegar a um resultado próximo: Real-time HTML Editor
Ah! Não podemos esquecer da função PHP (acabei me desvirtuando um pouco). Há vários tutoriais na web ensinando a criar sistemas de newsletter, além de muito código pronto: http://net.tutsplus.com/freebies/others/fantastic-ajax-newsletter-module/ e outros com dicas para melhorar o corpo do e-mail: http://net.tutsplus.com/tutorials/html-css-techniques/20-email-design-best-practices-and-resources-for-beginners/
Espero ter ajudado e até mais!
>
Você quer fazer um form igual a este da imagem?
Quero poder faze uma imagem como esta acima e aplicar um form nela, entendeu?
>
Ah... você deve estar pensando em converter do PS para HTML. Você terá que ter noção de CSS para poder realizar esta tarefa, além de muito tableless...
Este tutorial é ótimo: http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/
A imagem tem um form extremamente simples. Acesse o site a seguir e comece a criar até chegar a um resultado próximo: Real-time HTML Editor
Ah! Não podemos esquecer da função PHP (acabei me desvirtuando um pouco). Há vários tutoriais na web ensinando a criar sistemas de newsletter, além de muito código pronto: http://net.tutsplus.com/freebies/others/fantastic-ajax-newsletter-module/ e outros com dicas para melhorar o corpo do e-mail: http://net.tutsplus.com/tutorials/html-css-techniques/20-email-design-best-practices-and-resources-for-beginners/
Espero ter ajudado e até mais!
Converter psd para html eu já sei mas, quando tento colocar o form, tudo fica desalinhado.
Para quem possa me ajudar, fiz o uplod de um htmal já com imagens cortadas e seu respectivo PSD.
http://www.multiupload.com/8I8S3TLPJE
Se alguém colocar o form nesse arquivo acima eu analisarei e aprenderei.
Sinceramente, você não precisa de imagens para fazer o formulário que pretende... Pela imagem mostrada, apenas com CSS é perfeitamente possível...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulário</title>
<style type="text/css">
* {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
body { padding:20px; }
form fieldset {
width:500px;
padding:6px;
background-color:#f8f8f8;
border:1px solid #e4e4e4;
}
form fieldset label {
display:block;
height:22px;
line-height:22px;
text-indent:7px;
font-size:90%;
padding:3px 0 8px;
border-bottom:2px solid #e2e2e1;
}
form fieldset label input {
display:block;
float:right;
width:145px;
height:18px;
font-size:80%;
margin-right:225px;
background-color:#ffffa0;
border:2px inset #e5e5e5;
}
form fieldset button {
display:block;
width:65px;
height:24px;
margin-top:7px;
}
form fieldset br { display:none; }
</style>
</head>
<body>
<form action="arquivo-de-envio.alguma-coisa" method="post">
<fieldset>
<label for="email" title="E-mail">
E-mail:
<input type="text" name="email" id="email" title="E-mail" />
</label>
<br />
<button type="submit" title="Enviar">submit</button>
</fieldset>
</form>
</body>
</html>Outra coisa, não existe *"inserir um form em uma imagem"*, no máximo que você faria é aplicar uma imagem como **background** de um form, aí sim, mas como pode observar com o exemplo acima, não é necessário utilizar imagem nenhuma, basta apenas controlar tudo com CSS. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif
Obrigado.
Então reformulando minha pergunta: Como usar a imagem acima como background de um form?
Mas eu volto a insistir: por que querer utilizar uma imagem nesse caso se é possível fazer apenas com CSS? :mellow: Tudo bem, se você quer saber como se faz independentemente, o link que o Evandro passou irá lhe auxiliar, mas pense bem antes de utilizar imagens, verifique se é realmente necessário...
http://forum.imasters.com.br/public/style_emoticons/default/joia.gif
Você quer fazer um form igual a este da imagem?