ArtigosFormulário estilo ao Jotform
4 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Formulário estilo ao Jotform
por Guilherme3f 18.10.16 23:13
Detalhes da questão
Endereço do fórum: http://teste-kmz.forumeiros.com/forum
Versão do fórum: PunBB
Descrição
Olá gostaria de colocar um formulario da jotform em meu forum é possivel?
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Formulário estilo ao Jotform
por Cepheus 19.10.16 13:04
Não sei como esse formulário trabalha, pois nunca usei esse sistema jotform.
"Talvez futuramente possa analisar"
Mas se você não tem o conhecimento necessário para gerir ele, recomendo que use o gerador de formulário da própria forumeiros:
https://ajuda.forumeiros.com/h15-
Até mais.
"Talvez futuramente possa analisar"
Mas se você não tem o conhecimento necessário para gerir ele, recomendo que use o gerador de formulário da própria forumeiros:
https://ajuda.forumeiros.com/h15-Até mais.
Cepheus- Membro
- Membro desde : 21/03/2014
Mensagens : 514
Pontos : 1085 -
Re: Formulário estilo ao Jotform
por Guilherme3f 19.10.16 14:36
Tem como eu gerar um formulario aqui e ficar igual o da jotform?
https://form.jotformz.com/62916453193662
https://form.jotformz.com/62916453193662
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Formulário estilo ao Jotform
por Luiz 19.10.16 14:38
Poderia ceder um print desse formulário, para podermos ver como é?
Até.
Até.
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Formulário estilo ao Jotform
por Luiz 19.10.16 14:55
Sim, é possível através de CSS.
Crie um formulário usando o gerador do FdF.
Leia este tópico para te auxiliar.
https://ajuda.forumeiros.com/t78600-tutorial-criar-formularios-de-postagem
Após criar, mande o código aqui, eu faço o CSS pra você.
Até mais.
Crie um formulário usando o gerador do FdF.
Leia este tópico para te auxiliar.
https://ajuda.forumeiros.com/t78600-tutorial-criar-formularios-de-postagem
Após criar, mande o código aqui, eu faço o CSS pra você.
Até mais.
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Formulário estilo ao Jotform
por Guilherme3f 19.10.16 15:22
aqui está
- Código:
<script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajuda.forumeiros.com/29110.js"></script>
<script src="http://ajuda.forumeiros.com/28074.js"></script>
<style>
#generated_form .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#generated_form .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
#generated_form .image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
#generated_form .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
#generated_form .image { width: 300px; }
#generated_form h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 400;
margin: .8em 0 .2em;
}
#generated_form dl {
margin-bottom: 10px;
font-size: 1.1em;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
#generated_form dt {
width: 30%;
padding-top: 5px;
border: none;
float: left;
}
#generated_form dd {
padding: 5px;
padding-right: 5px;
margin-left: 30%;
vertical-align: middle;
}
#generated_form dl:hover dt {
color: #666;
}
#generated_form input {
font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333333;
padding: 2px;
vertical-align: middle;
padding-left: 4px;
}
#generated_form input[disabled] {
background-color:#ddd;
cursor:pointer;
}
#generated_form select {
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
cursor: default;
vertical-align: middle;
width:auto;
max-width:100%;/* Bug IE */
padding: 1px;
}
#generated_form textarea {
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
width: 300px;
height: 100px;
padding: 2px;
padding-left: 4px;
cursor: text;
}
#generated_form input[type=text], #generated_form input[type=fields_list] {
width: 300px;
cursor: text;
}
</style>
<form onsubmit="submit_form();" action="/posting.forum" id="generated_form" method="post" enctype="multipart/form-data">
<input type="hidden" name="form_mode" value="0">
<h1 data-type="field"> DADOS PESSOAIS:<br><br><br></h1>
<dl><dt>Nome:</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field1" required="required"></dd>
</dl>
<dl><dt>Idade:</dt>
<dd><input type="number" min="8" max="40" data-type="field" value="" step="1" id="field2"></dd>
</dl>
<dl><dt>Onde mora?</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field3" required="required"></dd>
</dl>
<dl><dt>Skype:</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field4" required="required"></dd>
</dl>
<h1 data-type="field"> SA:MP<br><br><br></h1>
<dl><dt>Nick Atual:</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field6" required="required"></dd>
</dl>
<dl><dt>Nick já usado:</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field7" required="required"></dd>
</dl>
<dl><dt>Há quanto tempo joga sa:mp?</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field8" required="required"></dd>
</dl>
<dl><dt>Já foi de alguma família?Qual?</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field9" required="required"></dd>
</dl>
<h1 data-type="field"> AUTO-AVALIAÇÃO<br><br><br></h1>
<dl>
<dt>X1 em servidor RPG:</dt>
<dd><select data-type="field" id="field11"><option value="Péssimo">Péssimo</option><option value="
Ruim">
Ruim</option><option value="
Razoável">
Razoável</option><option value="
Bom">
Bom</option><option value="
Muito Bom">
Muito Bom</option><option value="
Hard">
Hard</option><option value=""></option></select></dd>
</dl>
<dl>
<dt>X1 em servidor A/D</dt>
<dd><select data-type="field" id="field13"><option value="Péssimo">Péssimo</option><option value="
Ruim">
Ruim</option><option value="
Razoável">
Razoável</option><option value="
Bom">
Bom</option><option value="
Muito Bom">
Muito Bom</option><option value="
Hard">
Hard</option><option value=""></option></select></dd>
</dl>
<dl>
<dt>TDM</dt>
<dd><select data-type="field" id="field14"><option value="Péssimo">Péssimo</option><option value="
Ruim">
Ruim</option><option value="
Razoável">
Razoável</option><option value="
Bom">
Bom</option><option value="
Muito Bom">
Muito Bom</option><option value="
Hard">
Hard</option><option value=""></option></select></dd>
</dl>
<dl>
<dt>C-Bug</dt>
<dd><select data-type="field" id="field15"><option value="Péssimo">Péssimo</option><option value="
Ruim">
Ruim</option><option value="
Razoável">
Razoável</option><option value="
Bom">
Bom</option><option value="
Muito Bom">
Muito Bom</option><option value="
Hard">
Hard</option><option value=""></option></select></dd>
</dl>
<dl>
<dt>Esconder Skin:</dt>
<dd><select data-type="field" id="field16"><option value="
Péssimo">
Péssimo</option><option value="
Ruim">
Ruim</option><option value="
Razoável">
Razoável</option><option value="
Bom">
Bom</option><option value="
Muito Bom">
Muito Bom</option><option value="
Hard">
Hard</option><option value=""></option></select></dd>
</dl>
<h1 data-type="field"> RESPONDA!<br><br><br></h1>
<dl><dt>Foi indicado por algum membro da família?</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field18" required="required"></dd>
</dl>
<dl><dt>Video mostrando seu x1:</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field20" required="required" maxlength="Url do video"></dd>
</dl>
<dl>
<dt>Por que deseja entrar para Alkware?</dt>
<dd><textarea data-type="field" id="field21" maxlength="12" required="required"></textarea></dd>
</dl>
<dl>
<dt>Por que devemos aceitar você?</dt>
<dd><textarea data-type="field" id="field22" maxlength="12" required="required"></textarea></dd>
</dl>
<input type="hidden" name="f" value="1">
<input type="hidden" name="subject" value="O script não enviou o título" template="">
<input type="hidden" name="description" value="O script não enviou a descrição" template="">
<textarea name="message" style="display:none"></textarea>
<textarea id="message-template-bbcode-0" style="display:none"></textarea>
<input type="hidden" name="mode" value="newtopic">
<input type="hidden" name="lt" value="0">
<input type="submit" name="post" class="button2" value="Enviar">
</form>
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Formulário estilo ao Jotform
por Cepheus 19.10.16 17:09
troque sua pagina por:
- Código:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://jscolor.com/jscolor/jscolor.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="http://ajuda.forumeiros.com/29110.js"></script> <script src="http://ajuda.forumeiros.com/28074.js"></script> <style>
#generated_form .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#generated_form .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
#generated_form .image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
#generated_form .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
#generated_form .image { width: 300px; }
#generated_form h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 400;
margin: .8em 0 .2em;
}
#generated_form dl {
margin-bottom: 10px;
font-size: 1.1em;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
#generated_form dt {
width: 30%;
padding-top: 5px;
border: none;
float: left;
}
#generated_form dd {
padding: 5px;
padding-right: 5px;
margin-left: 30%;
vertical-align: middle;
}
#generated_form dl:hover dt {
color: #666;
}
#generated_form input {
font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333333;
padding: 2px;
vertical-align: middle;
padding-left: 4px;
}
#generated_form input[disabled] {
background-color:#ddd;
cursor:pointer;
}
#generated_form select {
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
cursor: default;
vertical-align: middle;
width:auto;
max-width:100%;/* Bug IE */
padding: 1px;
}
#generated_form textarea {
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
width: 300px;
height: 100px;
padding: 2px;
padding-left: 4px;
cursor: text;
}
#generated_form input[type=text], #generated_form input[type=fields_list] {
width: 300px;
cursor: text;
}
body{background-color: #000000;}
#generated_form{
padding:0 40px ;
background-color: #050505;
max-width: 510px;
margin: 0 auto;
color: #F2F2F5;
}
#generated_form h1 {
font-family: Muli, sans-serif;
font-size: 1.714em;
font-weight: 400;
text-align: center;
margin: .8em 0 .2em;
border-bottom: 1px solid #e3e3e3;
padding: 24px 0;
}
#generated_form h1 br, #generated_form h1 br + br {
display: none
}
#generated_form dl {
font-weight: normal;
font-size: 0.95em;
font-family: Muli, sans-serif;
position:relative;
}
#generated_form dl dt:after {
content:"*";
margin-left: 5px;
color: red;
}
#generated_form input, #generated_form textarea {
background-color: #8F8F8F;
color: #F2F2F5;
padding: 0.4em;
border-color: #C9C9C9 !important;
outline: none;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
width: 100% !important;
border: 1px solid #848484;
box-shadow: none !important;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#generated_form select, #generated_form input, #generated_form textarea{
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
:required#generated_form select:invalid, #generated_form input:invalid, #generated_form textarea:invalid,
{
border: 1px solid #e15353!important;
-moz-box-shadow: 0 0 3px #e15353;
-webkit-box-shadow: 0 0 3px #e15353;
box-shadow: 0 0 3px #e15353;
}
#generated_form select {
color: #ffffff;
-webkit-appearance: menulist-button;
background-color: rgba(248, 248, 248, 0);
color: #F2F2F5;
padding: 0.4em;
border-color: #C9C9C9 !important;
outline: none;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
width: 100% !important;
border: 1px solid #848484;
box-shadow: none !important;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#generated_form input.button2 {
width: 100px!important;
margin:0 auto!important;
display: block;
cursor: pointer;
color: #ffffff !important;
background: #222222;
box-shadow: none;
text-shadow: none;
border: 0;
}
#generated_form input.button2:hover {
background: #171717;
}
#generated_form dl:hover dt {
color: #fff;
}
</style>
<form enctype="multipart/form-data" method="post" id="generated_form" action="/posting.forum" onsubmit="submit_form();">
<input type="hidden" value="0" name="form_mode" />
<h1 data-type="field">
DADOS PESSOAIS:<br /><br /><br />
</h1>
<dl><dt>Nome:</dt> <dd><input type="text" required="required" id="field1" value="Valor padrão" data-type="field" /></dd> </dl> <dl><dt>Idade:</dt> <dd><input type="number" id="field2" step="1" value="" data-type="field" max="40" min="8" /></dd> </dl> <dl><dt>Onde mora?</dt> <dd><input type="text" required="required" id="field3" value="Valor padrão" data-type="field" /></dd> </dl> <dl><dt>Skype:</dt> <dd><input type="text" required="required" id="field4" value="Valor padrão" data-type="field" /></dd> </dl>
<h1 data-type="field">
SA:MP<br /><br /><br />
</h1>
<dl><dt>Nick Atual:</dt> <dd><input type="text" required="required" id="field6" value="Valor padrão" data-type="field" /></dd> </dl> <dl><dt>Nick já usado:</dt> <dd><input type="text" required="required" id="field7" value="Valor padrão" data-type="field" /></dd> </dl> <dl><dt>Há quanto tempo joga sa:mp?</dt> <dd><input type="text" required="required" id="field8" value="Valor padrão" data-type="field" /></dd> </dl> <dl><dt>Já foi de alguma família?Qual?</dt> <dd><input type="text" required="required" id="field9" value="Valor padrão" data-type="field" /></dd> </dl>
<h1 data-type="field">
AUTO-AVALIAÇÃO<br /><br /><br />
</h1>
<dl> <dt>X1 em servidor RPG:</dt> <dd><select id="field11" data-type="field"><option value="Péssimo">Péssimo</option><option value="
Ruim">Ruim</option><option value="
Razoável">Razoável</option><option value="
Bom">Bom</option><option value="
Muito Bom">Muito Bom</option><option value="
Hard">Hard</option><option value=""></option></select></dd> </dl> <dl> <dt>X1 em servidor A/D</dt> <dd><select id="field13" data-type="field"><option value="Péssimo">Péssimo</option><option value="
Ruim">Ruim</option><option value="
Razoável">Razoável</option><option value="
Bom">Bom</option><option value="
Muito Bom">Muito Bom</option><option value="
Hard">Hard</option><option value=""></option></select></dd> </dl> <dl> <dt>TDM</dt> <dd><select id="field14" data-type="field"><option value="Péssimo">Péssimo</option><option value="
Ruim">Ruim</option><option value="
Razoável">Razoável</option><option value="
Bom">Bom</option><option value="
Muito Bom">Muito Bom</option><option value="
Hard">Hard</option><option value=""></option></select></dd> </dl> <dl> <dt>C-Bug</dt> <dd><select id="field15" data-type="field"><option value="Péssimo">Péssimo</option><option value="
Ruim">Ruim</option><option value="
Razoável">Razoável</option><option value="
Bom">Bom</option><option value="
Muito Bom">Muito Bom</option><option value="
Hard">Hard</option><option value=""></option></select></dd> </dl> <dl> <dt>Esconder Skin:</dt> <dd><select id="field16" data-type="field"><option value="
Péssimo">Péssimo</option><option value="
Ruim">Ruim</option><option value="
Razoável">Razoável</option><option value="
Bom">Bom</option><option value="
Muito Bom">Muito Bom</option><option value="
Hard">Hard</option><option value=""></option></select></dd> </dl>
<h1 data-type="field">
RESPONDA!<br /><br /><br />
</h1>
<dl><dt>Foi indicado por algum membro da família?</dt> <dd><input type="text" required="required" id="field18" value="Valor padrão" data-type="field" /></dd> </dl> <dl><dt>Video mostrando seu x1:</dt> <dd><input type="text" maxlength="Url do video" required="required" id="field20" value="Valor padrão" data-type="field" /></dd> </dl> <dl> <dt>Por que deseja entrar para Alkware?</dt> <dd><textarea required="required" maxlength="12" id="field21" data-type="field"></textarea></dd> </dl> <dl> <dt>Por que devemos aceitar você?</dt> <dd><textarea required="required" maxlength="12" id="field22" data-type="field"></textarea></dd> </dl> <input type="hidden" value="1" name="f" /> <input type="hidden" template="" value="O script não enviou o título" name="subject" /> <input type="hidden" template="" value="O script não enviou a descrição" name="description" /> <textarea style="display:none" name="message"></textarea> <textarea style="display:none" id="message-template-bbcode-0"></textarea> <input type="hidden" value="newtopic" name="mode" /> <input type="hidden" value="0" name="lt" /> <input type="submit" value="Enviar" class="button2" name="post" />
</form>
Cepheus- Membro
- Membro desde : 21/03/2014
Mensagens : 514
Pontos : 1085 -
Re: Formulário estilo ao Jotform
por Guilherme3f 19.10.16 17:41
você é censurado ficou identico!rs
Vlw irmao,mais quando eu envio aparece isso!
Vlw irmao,mais quando eu envio aparece isso!
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Formulário estilo ao Jotform
por Cepheus 19.10.16 18:01
Provavelmente na hora de criar o formulário você não configurou o campo do titulo do tópico e o campo de mensagem, por isso o erro.
Veja o vídeo explicando como criar o formulário: https://ajuda.forumeiros.com/t78600-tutorial-criar-formularios-de-postagem#623902 (Assista até o final)
Depois cole o novo código do formulário aqui para que seja feita a inserção do css anterior na sua nova pagina.
Veja o vídeo explicando como criar o formulário: https://ajuda.forumeiros.com/t78600-tutorial-criar-formularios-de-postagem#623902 (Assista até o final)
Depois cole o novo código do formulário aqui para que seja feita a inserção do css anterior na sua nova pagina.
Cepheus- Membro
- Membro desde : 21/03/2014
Mensagens : 514
Pontos : 1085 -
Re: Formulário estilo ao Jotform
por Guilherme3f 19.10.16 19:42
- Código:
<script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajuda.forumeiros.com/29110.js"></script>
<script src="http://ajuda.forumeiros.com/28074.js"></script>
<style>
#generated_form .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#generated_form .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
#generated_form .image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
#generated_form .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
#generated_form .image { width: 300px; }
#generated_form h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 400;
margin: .8em 0 .2em;
}
#generated_form dl {
margin-bottom: 10px;
font-size: 1.1em;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
#generated_form dt {
width: 30%;
padding-top: 5px;
border: none;
float: left;
}
#generated_form dd {
padding: 5px;
padding-right: 5px;
margin-left: 30%;
vertical-align: middle;
}
#generated_form dl:hover dt {
color: #666;
}
#generated_form input {
font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333333;
padding: 2px;
vertical-align: middle;
padding-left: 4px;
}
#generated_form input[disabled] {
background-color:#ddd;
cursor:pointer;
}
#generated_form select {
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
cursor: default;
vertical-align: middle;
width:auto;
max-width:100%;/* Bug IE */
padding: 1px;
}
#generated_form textarea {
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
width: 300px;
height: 100px;
padding: 2px;
padding-left: 4px;
cursor: text;
}
#generated_form input[type=text], #generated_form input[type=fields_list] {
width: 300px;
cursor: text;
}
</style>
<form onsubmit="submit_form();" action="/posting.forum" id="generated_form" method="post" enctype="multipart/form-data">
<input type="hidden" name="form_mode" value="0">
<dl><dt>Titulo do topico</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field0" required="required" ></dd>
</dl>
<h1 data-type="field">DADOS PESSOAIS<br><br><br></h1>
<dl><dt>Nome</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field2" required="required"></dd>
</dl>
<dl><dt>Data de nascimento</dt>
<dd><input type="date" data-type="field" id="field3"></dd>
</dl>
<dl><dt>Onde mora?</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field4" required="required"></dd>
</dl>
<dl><dt>Skype?</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field5" required="required"></dd>
</dl>
<h1 data-type="field">SA:MP<br><br><br></h1>
<dl><dt>Nick Atual:</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field7" required="required"></dd>
</dl>
<dl><dt>Nick Já utilizado:</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field8" required="required"></dd>
</dl>
<dl><dt>Há quanto joga sa:mp:</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field9" required="required"></dd>
</dl>
<dl><dt>Já foi de alguma família?Qual?</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field10" required="required"></dd>
</dl>
<h1 data-type="field">AUTO-AVALIAÇÃO<br><br><br></h1>
<dl>
<dt>X1 em servidor RPG:</dt>
<dd><select data-type="field" id="field12"><option value="Péssimo">Péssimo</option><option value="
Ruim">
Ruim</option><option value="
Razoável">
Razoável</option><option value="
Bom">
Bom</option><option value="
Ótimo">
Ótimo</option><option value="
Hard">
Hard</option><option value="
">
</option></select></dd>
</dl>
<dl>
<dt>X1 em servidor A/D:</dt>
<dd><select data-type="field" id="field13"><option value="Péssimo">Péssimo</option><option value="
Ruim">
Ruim</option><option value="
Razoável">
Razoável</option><option value="
Bom">
Bom</option><option value="
Ótimo">
Ótimo</option><option value="
Hard">
Hard</option><option value="
">
</option></select></dd>
</dl>
<dl>
<dt>TDM:</dt>
<dd><select data-type="field" id="field14"><option value="Péssimo">Péssimo</option><option value="
Ruim">
Ruim</option><option value="
Razoável">
Razoável</option><option value="
Bom">
Bom</option><option value="
Ótimo">
Ótimo</option><option value="
Hard">
Hard</option><option value="
">
</option></select></dd>
</dl>
<dl>
<dt>C-Bug:</dt>
<dd><select data-type="field" id="field15"><option value="Péssimo">Péssimo</option><option value="
Ruim">
Ruim</option><option value="
Razoável">
Razoável</option><option value="
Bom">
Bom</option><option value="
Ótimo">
Ótimo</option><option value="
Hard">
Hard</option><option value="
">
</option></select></dd>
</dl>
<dl>
<dt>Esconder Skin:</dt>
<dd><select data-type="field" id="field16"><option value="Péssimo">Péssimo</option><option value="
Ruim">
Ruim</option><option value="
Razoável">
Razoável</option><option value="
Bom">
Bom</option><option value="
Ótimo">
Ótimo</option><option value="
Hard">
Hard</option><option value="
">
</option></select></dd>
</dl>
<h1 data-type="field">RESPONDA!<br><br><br></h1>
<dl><dt>Foi indicado por alguém da família?</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field18" required="required"></dd>
</dl>
<dl><dt>Mostre um video mostrando seu x1:</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field19" required="required"></dd>
</dl>
<dl>
<dt>Por que deseja entrar para Alkware?</dt>
<dd><textarea data-type="field" style="margin-top: 0px; margin-bottom: 0px; height: 128px;" id="field20" required="required"></textarea></dd>
</dl>
<dl>
<dt>Por que devemos aceitar você?</dt>
<dd><textarea data-type="field" style="margin-top: 0px; margin-bottom: 0px; height: 128px;" id="field21" required="required"></textarea></dd>
</dl>
<p data-type="field">O video ajuda bastante,recomento que poste-o</p>
<input type="hidden" name="f" value="4">
<input type="hidden" name="subject" value="O script não enviou o título" template="{field0}">
<input type="hidden" name="description" value="O script não enviou a descrição" template="">
<textarea name="message" style="display:none"></textarea>
<textarea id="message-template-bbcode-0" style="display:none">[size=18][b]DADOS PESSOAIS[/b][/size]
[b]Nome:[/b] {field2}
[b]Data de nascimento:[/b] {field3}
[b]Onde mora?:[/b] {field4}
[b]Skype:[/b] {field5}
[size=18][b]SA:MP[/b][/size]
[b]Nick atual:[/b] {field7}
[b]Nick's recentemente usados:[/b] {field8}
[b]Joga SA:MP há quanto tempo?[/b] {field9}
[b]Já participou de alguma outra família?Qual?[/b] {field10}
[size=18][b]AUTO-AVALIAÇÃO[/b][/size]
[b]X1 em Servidor RPG:[/b] {field12}
[b]x1 em Servidor A/D:[/b] {field13}
[b]TDM:[/b] {field14}
[b]C-bug:[/b] {field15}
[b]Esconder a "Skin":[/b] {field16}
[size=18][b]Responda![/b][/size]
[b]Foi indicado por alguém da família?[/b] {field18}
[b]Mostre um video mostrando seu x1:[/b] {field19}
[b]Por que deseja participar da Alkware?[/b] {field20}
[b]Porque devemos aceitar você?[/b] {field21}</textarea>
<input type="hidden" name="mode" value="newtopic">
<input type="hidden" name="lt" value="0">
<input type="submit" name="post" class="button2" value="Enviar">
</form>
Última edição por Guilherme3f em 19.10.16 19:56, editado 1 vez(es)
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Formulário estilo ao Jotform
por Cepheus 19.10.16 21:58
Aqui está:
- Código:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="http://jscolor.com/jscolor/jscolor.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajuda.forumeiros.com/29110.js"></script>
<script src="http://ajuda.forumeiros.com/28074.js"></script>
<style>
#generated_form .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -600px; width: 60px; height: 20px;}
#generated_form .more { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px 2px; width: 12px; height: 20px; cursor:pointer;}
#generated_form .image .part { background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat -235px -548px; width: 60px; height: 20px;}
#generated_form .remove { float: left;background: url(http://i46.tinypic.com/2wrdc42.jpg) no-repeat 0px -286px;padding-left: 16px;width: 12px; height: 20px; cursor:pointer;position: relative;top:3px;}
#generated_form .image { width: 300px; }
#generated_form h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 400;
margin: .8em 0 .2em;
}
#generated_form dl {
margin-bottom: 10px;
font-size: 1.1em;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}
#generated_form dt {
width: 30%;
padding-top: 5px;
border: none;
float: left;
}
#generated_form dd {
padding: 5px;
padding-right: 5px;
margin-left: 30%;
vertical-align: middle;
}
#generated_form dl:hover dt {
color: #666;
}
#generated_form input {
font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333333;
padding: 2px;
vertical-align: middle;
padding-left: 4px;
}
#generated_form input[disabled] {
background-color:#ddd;
cursor:pointer;
}
#generated_form select {
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
cursor: default;
vertical-align: middle;
width:auto;
max-width:100%;/* Bug IE */
padding: 1px;
}
#generated_form textarea {
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
width: 300px;
height: 100px;
padding: 2px;
padding-left: 4px;
cursor: text;
}
#generated_form input[type=text], #generated_form input[type=fields_list] {
width: 300px;
cursor: text;
}
body{background-color: #000000;}
#generated_form{
padding:0 40px ;
background-color: #050505;
max-width: 510px;
margin: 0 auto;
color: #F2F2F5;
}
#generated_form h1 {
font-family: Muli, sans-serif;
font-size: 1.714em;
font-weight: 400;
text-align: center;
margin: .8em 0 .2em;
border-bottom: 1px solid #e3e3e3;
padding: 24px 0;
}
#generated_form h1 br, #generated_form h1 br + br {
display: none
}
#generated_form dl {
font-weight: normal;
font-size: 0.95em;
font-family: Muli, sans-serif;
position:relative;
}
#generated_form dl dt:after {
content:"*";
margin-left: 5px;
color: red;
}
#generated_form input, #generated_form textarea {
background-color: #8F8F8F;
color: #F2F2F5;
padding: 0.4em;
border-color: #C9C9C9 !important;
outline: none;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
width: 100% !important;
border: 1px solid #848484;
box-shadow: none !important;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#generated_form select, #generated_form input, #generated_form textarea{
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
:required#generated_form select:invalid, #generated_form input:invalid, #generated_form textarea:invalid,
{
border: 1px solid #e15353!important;
-moz-box-shadow: 0 0 3px #e15353;
-webkit-box-shadow: 0 0 3px #e15353;
box-shadow: 0 0 3px #e15353;
}
#generated_form select {
color: #ffffff;
-webkit-appearance: menulist-button;
background-color: rgba(248, 248, 248, 0);
color: #F2F2F5;
padding: 0.4em;
border-color: #C9C9C9 !important;
outline: none;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
width: 100% !important;
border: 1px solid #848484;
box-shadow: none !important;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#generated_form input.button2 {
width: 100px!important;
margin:0 auto!important;
display: block;
cursor: pointer;
color: #ffffff !important;
background: #222222;
box-shadow: none;
text-shadow: none;
border: 0;
}
#generated_form input.button2:hover {
background: #171717;
}
#generated_form dl:hover dt {
color: #fff;
}
</style>
<form onsubmit="submit_form();" action="/posting.forum" id="generated_form" method="post" enctype="multipart/form-data">
<input type="hidden" name="form_mode" value="0">
<dl><dt>Titulo do topico</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field0" required="required" ></dd>
</dl>
<h1 data-type="field">DADOS PESSOAIS<br><br><br></h1>
<dl><dt>Nome</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field2" required="required"></dd>
</dl>
<dl><dt>Data de nascimento</dt>
<dd><input type="date" data-type="field" id="field3"></dd>
</dl>
<dl><dt>Onde mora?</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field4" required="required"></dd>
</dl>
<dl><dt>Skype?</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field5" required="required"></dd>
</dl>
<h1 data-type="field">SA:MP<br><br><br></h1>
<dl><dt>Nick Atual:</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field7" required="required"></dd>
</dl>
<dl><dt>Nick Já utilizado:</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field8" required="required"></dd>
</dl>
<dl><dt>Há quanto joga sa:mp:</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field9" required="required"></dd>
</dl>
<dl><dt>Já foi de alguma família?Qual?</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field10" required="required"></dd>
</dl>
<h1 data-type="field">AUTO-AVALIAÇÃO<br><br><br></h1>
<dl>
<dt>X1 em servidor RPG:</dt>
<dd><select data-type="field" id="field12"><option value="Péssimo">Péssimo</option><option value="
Ruim">
Ruim</option><option value="
Razoável">
Razoável</option><option value="
Bom">
Bom</option><option value="
Ótimo">
Ótimo</option><option value="
Hard">
Hard</option><option value="
">
</option></select></dd>
</dl>
<dl>
<dt>X1 em servidor A/D:</dt>
<dd><select data-type="field" id="field13"><option value="Péssimo">Péssimo</option><option value="
Ruim">
Ruim</option><option value="
Razoável">
Razoável</option><option value="
Bom">
Bom</option><option value="
Ótimo">
Ótimo</option><option value="
Hard">
Hard</option><option value="
">
</option></select></dd>
</dl>
<dl>
<dt>TDM:</dt>
<dd><select data-type="field" id="field14"><option value="Péssimo">Péssimo</option><option value="
Ruim">
Ruim</option><option value="
Razoável">
Razoável</option><option value="
Bom">
Bom</option><option value="
Ótimo">
Ótimo</option><option value="
Hard">
Hard</option><option value="
">
</option></select></dd>
</dl>
<dl>
<dt>C-Bug:</dt>
<dd><select data-type="field" id="field15"><option value="Péssimo">Péssimo</option><option value="
Ruim">
Ruim</option><option value="
Razoável">
Razoável</option><option value="
Bom">
Bom</option><option value="
Ótimo">
Ótimo</option><option value="
Hard">
Hard</option><option value="
">
</option></select></dd>
</dl>
<dl>
<dt>Esconder Skin:</dt>
<dd><select data-type="field" id="field16"><option value="Péssimo">Péssimo</option><option value="
Ruim">
Ruim</option><option value="
Razoável">
Razoável</option><option value="
Bom">
Bom</option><option value="
Ótimo">
Ótimo</option><option value="
Hard">
Hard</option><option value="
">
</option></select></dd>
</dl>
<h1 data-type="field">RESPONDA!<br><br><br></h1>
<dl><dt>Foi indicado por alguém da família?</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field18" required="required"></dd>
</dl>
<dl><dt>Mostre um video mostrando seu x1:</dt>
<dd><input type="text" data-type="field" value="Valor padrão" id="field19" required="required"></dd>
</dl>
<dl>
<dt>Por que deseja entrar para Alkware?</dt>
<dd><textarea data-type="field" style="margin-top: 0px; margin-bottom: 0px; height: 128px;" id="field20" required="required"></textarea></dd>
</dl>
<dl>
<dt>Por que devemos aceitar você?</dt>
<dd><textarea data-type="field" style="margin-top: 0px; margin-bottom: 0px; height: 128px;" id="field21" required="required"></textarea></dd>
</dl>
<p data-type="field">O video ajuda bastante,recomento que poste-o</p>
<input type="hidden" name="f" value="4">
<input type="hidden" name="subject" value="O script não enviou o título" template="{field0}">
<input type="hidden" name="description" value="O script não enviou a descrição" template="">
<textarea name="message" style="display:none"></textarea>
<textarea id="message-template-bbcode-0" style="display:none">[size=18][b]DADOS PESSOAIS[/b][/size]
[b]Nome:[/b] {field2}
[b]Data de nascimento:[/b] {field3}
[b]Onde mora?:[/b] {field4}
[b]Skype:[/b] {field5}
[size=18][b]SA:MP[/b][/size]
[b]Nick atual:[/b] {field7}
[b]Nick's recentemente usados:[/b] {field8}
[b]Joga SA:MP há quanto tempo?[/b] {field9}
[b]Já participou de alguma outra família?Qual?[/b] {field10}
[size=18][b]AUTO-AVALIAÇÃO[/b][/size]
[b]X1 em Servidor RPG:[/b] {field12}
[b]x1 em Servidor A/D:[/b] {field13}
[b]TDM:[/b] {field14}
[b]C-bug:[/b] {field15}
[b]Esconder a "Skin":[/b] {field16}
[size=18][b]Responda![/b][/size]
[b]Foi indicado por alguém da família?[/b] {field18}
[b]Mostre um video mostrando seu x1:[/b] {field19}
[b]Por que deseja participar da Alkware?[/b] {field20}
[b]Porque devemos aceitar você?[/b] {field21}</textarea>
<input type="hidden" name="mode" value="newtopic">
<input type="hidden" name="lt" value="0">
<input type="submit" name="post" class="button2" value="Enviar">
</form>
Cepheus- Membro
- Membro desde : 21/03/2014
Mensagens : 514
Pontos : 1085 -
Re: Formulário estilo ao Jotform
por Guilherme3f 19.10.16 22:08
oque eu coloco em LINK_DA_PAGINA? /H2-?
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Formulário estilo ao Jotform
por Guilherme3f 19.10.16 23:08
Guilherme3f escreveu:oque eu coloco em LINK_DA_PAGINA? /H2-?
aqui tambem ficou bugado irmão pode me ajudar?
https://i.servimg.com/u/f97/18/96/12/41/aki11.png
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Formulário estilo ao Jotform
por Luiz 19.10.16 23:28
Olá.
Por se tratar de uma página externa ao seu fórum, a tag "meta", com configuração para "utf-8" não funciona.
Isso já foi dito pelo Shek, enfim...
Parra corrigir isso, nas configurações da página HTML (onde você coloca o código), na opção "Usar o topo de sua página", marque sim.
Por se tratar de uma página externa ao seu fórum, a tag "meta", com configuração para "utf-8" não funciona.
Isso já foi dito pelo Shek, enfim...
Parra corrigir isso, nas configurações da página HTML (onde você coloca o código), na opção "Usar o topo de sua página", marque sim.
Luiz- Membro Entusiasta
- Membro desde : 23/04/2016
Mensagens : 6645
Pontos : 7451 -
Re: Formulário estilo ao Jotform
por Guilherme3f 19.10.16 23:30
Mas na outra que o cepheus fez,não deu isso!
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Formulário estilo ao Jotform
por Cepheus 19.10.16 23:42
Troque a pagina pela ultima que postei:
https://ajuda.forumeiros.com/t107138-formulario-estilo-ao-jotform#749224
Repare que existe este trecho no inicio.
Se na sua pagina não houver adicione.
OBS: Evite criar dublo post, você só precisa alterar sua postagem e acrescentar novas informações.
Até mais.
https://ajuda.forumeiros.com/t107138-formulario-estilo-ao-jotform#749224
Repare que existe este trecho no inicio.
- Código:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Se na sua pagina não houver adicione.
OBS: Evite criar dublo post, você só precisa alterar sua postagem e acrescentar novas informações.
Até mais.
Última edição por Cepheus em 19.10.16 23:48, editado 1 vez(es)
Cepheus- Membro
- Membro desde : 21/03/2014
Mensagens : 514
Pontos : 1085 -
Re: Formulário estilo ao Jotform
por Guilherme3f 19.10.16 23:45
Vlw irmão,arrumou mais e agora?Como faço com o LINK_DA_PAGINA?oque adiciono nela?por que não ta aparecendo quando cliko em novo topico.
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Formulário estilo ao Jotform
por Cepheus 19.10.16 23:56
Qual o endereço correto do seu fórum?
Pois aqui está a funcionar: http://teste-kmz.forumeiros.com/f1-seu-primeiro-forum
ao clicar em novo tópico está redirecionando para o formulário.
Qual seria o endereço correto onde está aplicando a alteração?
Lembrando que o LINK_DA_PAGINA, você deve adicionar o link da pagina do formulário.
Exemplo: http://teste-kmz.forumeiros.com/h2-inscriçao
Pode ser o link completo, ou apenas o que está após a barra, isso tanto faz.
/h2-inscriçao
Até!
Pois aqui está a funcionar: http://teste-kmz.forumeiros.com/f1-seu-primeiro-forum
ao clicar em novo tópico está redirecionando para o formulário.
Qual seria o endereço correto onde está aplicando a alteração?
Lembrando que o LINK_DA_PAGINA, você deve adicionar o link da pagina do formulário.
Exemplo: http://teste-kmz.forumeiros.com/h2-inscriçao
Pode ser o link completo, ou apenas o que está após a barra, isso tanto faz.
/h2-inscriçao
Até!
Cepheus- Membro
- Membro desde : 21/03/2014
Mensagens : 514
Pontos : 1085 -
Re: Formulário estilo ao Jotform
por Guilherme3f 20.10.16 1:20
Consegui..
Muito obrigado irmão,você é censurado!
Muito obrigado irmão,você é censurado!
Guilherme3f- **
- Membro desde : 13/10/2016
Mensagens : 93
Pontos : 115 -
Re: Formulário estilo ao Jotform
por Cream 20.10.16 2:58
 | Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas". |
Cream- Membro Entusiasta
- Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644 -
Tópicos semelhantes» Personalizar formulário (JotForm)
» Estilo CSS
» Reputação estilo IPS
» [FAQ] Folha de estilo css
» Estilo de fonte !!!
» Estilo CSS
» Reputação estilo IPS
» [FAQ] Folha de estilo css
» Estilo de fonte !!!
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos