Hitskin.comIsto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
ArtigosProblema em no formulário customizado
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Problema em no formulário customizado
por vcapelli 22.02.20 23:44
Detalhes da questão
Endereço do fórum: https://sistema-forum.forumeiros.com
Versão do fórum: ModernBB
Descrição
Estou com um problema no meu formulário. Gerei ele pelo gerador, testei e deu tudo certo ai fui fazer algumas mudanças para ficar mais bonito e agora não está mais funcionando.
Se tiver como resolver o problema sem alterar muito esteticamente agradeço.
OBS.: Já permite formulários não oficiais a postarem no fórum.
- Código:
<!DOCTYPE html>
<html>
<!-- ->
/**
* Gerado em <ajuda.forumeiros.com>.
* Gerador (2.0) feito por Luiz Felipe G. <https://luizfelipe.dev>
*
* Se você tiver erros ou dúvidas, vá em: <ajuda.forumeiros.com>
*/
<!- -->
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"/>
<style type="text/css">
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-size: 17px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: normal;
line-height: 1.5;
color: #212121;
line-height: 1.5;
background: #fff;
}
/**
* Begin tipografia.
*/
a,
a:active,
a:link,
a:visited,
a:focus {
color: #D8B500;
text-decoration: none;
border-bottom: solid 1px transparent;
outline: 0;
}
a:hover {
border-bottom-color: #2688dc;
}
a.fa:hover {
border-bottom-color: transparent;
color: #1f6db0;
}
h3 {
font-size: 20px;
font-weight: 300;
margin-bottom: 10px;
display: block;
width: 100%;
padding-bottom: 3px;
border-bottom: 2px solid #375e7f;
}
textarea {
height: 90px;
box-sizing: border-box;
resize: vertical;
outline: none;
}
.btn {
border: solid 1px #e4e4e4;
background: linear-gradient(180deg, #fff 0%, #efefef 100%);
padding: .575rem 1.1rem;
border-radius: .175rem;
font-weight: 600;
color: #686a6b;
cursor: pointer;
display: block;
text-align: center;
margin-bottom: 5px;
width: 100%;
}
.btn:focus {
border-color: #375e7f;
box-shadow: inset 0 -5px 40px rgba(120, 120, 120, 0.1), inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(0, 0, 0, 0.1);
outline: none;
}
.btn:hover {
box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
}
.btn.btn-primary {
border-radius: 3px;
box-shadow: none;
color: #fff;
background: #D8B500;
font-size: 14px;
transition: linear all 125ms;
margin-top: 32%;
}
.btn.btn-primary:focus {
border-color: #375e7f;
box-shadow: inset 0 1px 2px rgba(39, 56, 28, 0.075), 0 0 0 0.2em rgba(39, 56, 28, 0.6);
outline: none;
}
.btn.btn-primary:hover {
background: #444;
}
.btn.btn-danger {
color: #fff;
border-color: #bd2c00;
background: #e7592e;
background: linear-gradient(180deg, #f86b40 0%, #bd2c00 100%);
}
.btn.btn-danger:focus {
border-color: #aa2c05;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(197, 53, 9, 0.66);
outline: none;
}
.btn-progress {
cursor: not-allowed;
opacity: .657;
}
.form-control {
background-color: #fff;
border: 1px solid #d4d4d4;
padding: 6px 8px;
margin: 5px 0 0;
display: block;
width: 100%;
font-size: 16px;
color: #555;
line-height: 20px;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
outline: none;
}
.form-control:focus {
border-color: #4b6b35;
box-shadow: inset 0 1px 2px rgba(75, 107, 53, 0.075), 0 0 0 0.2em rgba(75, 107, 53, 0.6);
outline: none;
}
input[type="text"]:disabled {
background: #dddddd;
cursor: not-allowed;
}
.card {
background-color: #E54732;
padding: 5px;
font-size: 10px;
color: #fff;
font-weight: 800;
border-radius: 5px;
float: left;
margin-right: 5px;
}
/*
* End tipografia.
**/
.wrapper {
width: 50%;
position: absolute;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.wrapper hgroup {
text-align: center;
}
.wrapper hgroup i.fa {
font-size: 4em;
}
.wrapper hgroup h1 {
font-weight: 300;
margin: 10px 0;
padding: 0;
color: #545454;
}
.wrapper form {
border: solid 1px #d4d4d4;
margin: 0 0 25px;
padding: 20px;
color: #555;
border-radius: 4px;
background-color: #fff;
}
.wrapper form .form-group label {
display: table;
}
.wrapper form .form-group .form-group-col {
float: left;
margin-right: 2%;
margin-top: 2%;
}
.form-group .form-group-col:first-child {
margin-left: 3%;
}
.wrapper footer {
border: solid 1px #d6d6d6;
border-radius: 3px;
padding: 13px;
text-align: center;
font-size: 16px;
color: #555;
margin-bottom: 2%;
}
.col-94 {
width: 94%;
}
.col-30 {
width: 30%;
}
.col-46 {
width: 46%;
}
/**
* FOR JS Styles:
*/
#login-form,
footer {
box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.16);
}
.title h2 {
font-weight: 300;
margin-bottom: 5px;
text-align: center;
}
.title h4 {
font-weight: 300;
margin-bottom: 15px;
text-align: center;
}
@media screen and (max-width: 900px) {
.wrapper {
width: 40%;
}
}
@media screen and (max-width: 600px) {
.wrapper {
width: 70%;
}
}
@media screen and (max-width: 500px) {
.wrapper {
width: 80%;
}
}
@media screen and (max-width: 400px) {
.wrapper {
width: 90%;
}
}
</style>
</head>
<body>
<main class="wrapper">
<form id="form-content">
<a href="/h2-menu" title="Voltar ao menu"><i class="fas fa-arrow-left" aria-hidden="true"></i></a>
<div class="title">
<h4>Preencha o formulário seguindo as instruções sem deixar nenhum campo vazio.</h4>
</div>
<h3>Dados do projeto</h3>
<div class="form-group" style="margin-bottom: 15%;">
<div class="form-group-col col-30">
<label for="campo3">Número do projeto:</label>
<input type="text" id="campo3" class="form-control" placeholder="" required/>
</div>
<div class="form-group-col col-30">
<label for="campo5">Seu nickname:</label>
<input type="text" id="campo5" class="form-control" placeholder="" required/>
</div>
<div class="form-group-col col-30">
<label for="campo12">Data do projeto:</label>
<input type="text" id="campo12" class="form-control" placeholder="" required/>
</div>
</div>
<h3>Corpo do Projeto</h3>
<div class="form-group">
<div class="form-group-col col-94">
<label for="campo6">Ementa:</label>
<textarea data-type="textarea" id="campo6" class="form-control" placeholder="Insira aqui a ementa do projeto." required></textarea>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="campo7">Texto-base:</label>
<textarea data-type="textarea" id="campo7" class="form-control" placeholder="Escreva aqui o projeto." required></textarea>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="campo10">Justificativa:</label>
<textarea data-type="textarea" id="campo10" class="form-control" placeholder="Justifique sobre o seu projeto." required></textarea>
</div>
</div>
<br/>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</main>
<!-- Javascript's -->
<!-- Não é recomendada a edição abaixo desta linha. -->
<script>
var instance = new Date();
var month =["janeiro","fevereiro","março", "abril","maio","junho", "julho","agosto","setembro", "outubro","novembro","dezembro"];
var day = (!! instance.getDate().toString()[1]) ? instance.getDate() : '0' + instance.getDate();
var month_index = instance.getMonth();
var year = instance.getFullYear();
var date = [ day, month[month_index], year ].join(" ");
document.getElementById('campo12').value = date;
</script>
<textarea style="display: none;" id="fa-generated-message">[center][size=24]PROJETO DE LEI N°. {{campo3}}/2020[/size][/center]
[center][size=18](Do Sr. Deputado {{campo5}})[/size][/center]
[right]Ementa: {{campo6}}[/right]
{{campo7}}
[center][size=24]JUSTIFICATIVA[/size][/center]
{{campo10}}
Brasília, {{campo12}}
{{campo5}}</textarea>
<input type="hidden" id="fa-generated-title" value="Projeto de Lei N°. {{campo3}}/2020 - {{campo6}}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://forumeiros.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
'use strict';
$(window).on('load', function () {
$('#fa-generated-form').on('submit', function (event) {
event.preventDefault();
$(this).find('button[type="submit"]').text('Postando...');
setTimeout(function () {
$.post('/post', {
subject: $('#fa-generated-title').val().trim(),
f: 7,
message: $('#fa-generated-message').val().trim(),
mode: 'newtopic',
tid: $('[name="tid"]:first').val(),
post: 1,
}).done(function () {
alert('Postado com sucesso. Você será redirecionado para o subfórum com o novo tópico...');
location.pathname = '/f7-';
}).fail(function () {
alert('Houve um erro! Tente novamente!');
});
}, 600);
});
});
}(jQuery));
</script>
</body>
</html>
vcapelli- ****
- Membro desde : 17/02/2018
Mensagens : 210
Pontos : 417 -
Re: Problema em no formulário customizado
por tikky 26.02.20 14:14
Olá @vcapelli,
O formulário não postava devido a alteração de um ID; altere para:
Cordialmente,
pedxz.
O formulário não postava devido a alteração de um ID; altere para:
- Código:
<!DOCTYPE html>
<html>
<!-- ->
/**
* Gerado em <ajuda.forumeiros.com>.
* Gerador (2.0) feito por Luiz Felipe G. <https://luizfelipe.dev>
*
* Se você tiver erros ou dúvidas, vá em: <ajuda.forumeiros.com>
*/
<!- -->
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"/>
<style type="text/css">
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-size: 17px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: normal;
line-height: 1.5;
color: #212121;
line-height: 1.5;
background: #fff;
}
/**
* Begin tipografia.
*/
a,
a:active,
a:link,
a:visited,
a:focus {
color: #D8B500;
text-decoration: none;
border-bottom: solid 1px transparent;
outline: 0;
}
a:hover {
border-bottom-color: #2688dc;
}
a.fa:hover {
border-bottom-color: transparent;
color: #1f6db0;
}
h3 {
font-size: 20px;
font-weight: 300;
margin-bottom: 10px;
display: block;
width: 100%;
padding-bottom: 3px;
border-bottom: 2px solid #375e7f;
}
textarea {
height: 90px;
box-sizing: border-box;
resize: vertical;
outline: none;
}
.btn {
border: solid 1px #e4e4e4;
background: linear-gradient(180deg, #fff 0%, #efefef 100%);
padding: .575rem 1.1rem;
border-radius: .175rem;
font-weight: 600;
color: #686a6b;
cursor: pointer;
display: block;
text-align: center;
margin-bottom: 5px;
width: 100%;
}
.btn:focus {
border-color: #375e7f;
box-shadow: inset 0 -5px 40px rgba(120, 120, 120, 0.1), inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(0, 0, 0, 0.1);
outline: none;
}
.btn:hover {
box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
}
.btn.btn-primary {
border-radius: 3px;
box-shadow: none;
color: #fff;
background: #D8B500;
font-size: 14px;
transition: linear all 125ms;
margin-top: 32%;
}
.btn.btn-primary:focus {
border-color: #375e7f;
box-shadow: inset 0 1px 2px rgba(39, 56, 28, 0.075), 0 0 0 0.2em rgba(39, 56, 28, 0.6);
outline: none;
}
.btn.btn-primary:hover {
background: #444;
}
.btn.btn-danger {
color: #fff;
border-color: #bd2c00;
background: #e7592e;
background: linear-gradient(180deg, #f86b40 0%, #bd2c00 100%);
}
.btn.btn-danger:focus {
border-color: #aa2c05;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(197, 53, 9, 0.66);
outline: none;
}
.btn-progress {
cursor: not-allowed;
opacity: .657;
}
.form-control {
background-color: #fff;
border: 1px solid #d4d4d4;
padding: 6px 8px;
margin: 5px 0 0;
display: block;
width: 100%;
font-size: 16px;
color: #555;
line-height: 20px;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
outline: none;
}
.form-control:focus {
border-color: #4b6b35;
box-shadow: inset 0 1px 2px rgba(75, 107, 53, 0.075), 0 0 0 0.2em rgba(75, 107, 53, 0.6);
outline: none;
}
input[type="text"]:disabled {
background: #dddddd;
cursor: not-allowed;
}
.card {
background-color: #E54732;
padding: 5px;
font-size: 10px;
color: #fff;
font-weight: 800;
border-radius: 5px;
float: left;
margin-right: 5px;
}
/*
* End tipografia.
**/
.wrapper {
width: 50%;
position: absolute;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.wrapper hgroup {
text-align: center;
}
.wrapper hgroup i.fa {
font-size: 4em;
}
.wrapper hgroup h1 {
font-weight: 300;
margin: 10px 0;
padding: 0;
color: #545454;
}
.wrapper form {
border: solid 1px #d4d4d4;
margin: 0 0 25px;
padding: 20px;
color: #555;
border-radius: 4px;
background-color: #fff;
}
.wrapper form .form-group label {
display: table;
}
.wrapper form .form-group .form-group-col {
float: left;
margin-right: 2%;
margin-top: 2%;
}
.form-group .form-group-col:first-child {
margin-left: 3%;
}
.wrapper footer {
border: solid 1px #d6d6d6;
border-radius: 3px;
padding: 13px;
text-align: center;
font-size: 16px;
color: #555;
margin-bottom: 2%;
}
.col-94 {
width: 94%;
}
.col-30 {
width: 30%;
}
.col-46 {
width: 46%;
}
/**
* FOR JS Styles:
*/
#login-form,
footer {
box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.16);
}
.title h2 {
font-weight: 300;
margin-bottom: 5px;
text-align: center;
}
.title h4 {
font-weight: 300;
margin-bottom: 15px;
text-align: center;
}
@media screen and (max-width: 900px) {
.wrapper {
width: 40%;
}
}
@media screen and (max-width: 600px) {
.wrapper {
width: 70%;
}
}
@media screen and (max-width: 500px) {
.wrapper {
width: 80%;
}
}
@media screen and (max-width: 400px) {
.wrapper {
width: 90%;
}
}
</style>
</head>
<body>
<main class="wrapper">
<form id="form-content">
<a href="/h2-menu" title="Voltar ao menu"><i class="fas fa-arrow-left" aria-hidden="true"></i></a>
<div class="title">
<h4>Preencha o formulário seguindo as instruções sem deixar nenhum campo vazio.</h4>
</div>
<h3>Dados do projeto</h3>
<div class="form-group" style="margin-bottom: 15%;">
<div class="form-group-col col-30">
<label for="campo3">Número do projeto:</label>
<input type="text" id="campo3" class="form-control" placeholder="" required/>
</div>
<div class="form-group-col col-30">
<label for="campo5">Seu nickname:</label>
<input type="text" id="campo5" class="form-control" placeholder="" required/>
</div>
<div class="form-group-col col-30">
<label for="campo12">Data do projeto:</label>
<input type="text" id="campo12" class="form-control" placeholder="" required/>
</div>
</div>
<h3>Corpo do Projeto</h3>
<div class="form-group">
<div class="form-group-col col-94">
<label for="campo6">Ementa:</label>
<textarea data-type="textarea" id="campo6" class="form-control" placeholder="Insira aqui a ementa do projeto." required></textarea>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="campo7">Texto-base:</label>
<textarea data-type="textarea" id="campo7" class="form-control" placeholder="Escreva aqui o projeto." required></textarea>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="campo10">Justificativa:</label>
<textarea data-type="textarea" id="campo10" class="form-control" placeholder="Justifique sobre o seu projeto." required></textarea>
</div>
</div>
<br/>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</main>
<!-- Javascript's -->
<!-- Não é recomendada a edição abaixo desta linha. -->
<script>
var instance = new Date();
var month =["janeiro","fevereiro","março", "abril","maio","junho", "julho","agosto","setembro", "outubro","novembro","dezembro"];
var day = (!! instance.getDate().toString()[1]) ? instance.getDate() : '0' + instance.getDate();
var month_index = instance.getMonth();
var year = instance.getFullYear();
var date = [ day, month[month_index], year ].join(" ");
document.getElementById('campo12').value = date;
</script>
<textarea style="display: none;" id="fa-generated-message">[center][size=24]PROJETO DE LEI N°. {{campo3}}/2020[/size][/center]
[center][size=18](Do Sr. Deputado {{campo5}})[/size][/center]
[right]Ementa: {{campo6}}[/right]
{{campo7}}
[center][size=24]JUSTIFICATIVA[/size][/center]
{{campo10}}
Brasília, {{campo12}}
{{campo5}}</textarea>
<input type="hidden" id="fa-generated-title" value="Projeto de Lei N°. {{campo3}}/2020 - {{campo6}}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://forumeiros.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
'use strict';
$(window).on('load', function () {
$('#form-content').on('submit', function (event) {
event.preventDefault();
$(this).find('button[type="submit"]').text('Postando...');
setTimeout(function () {
$.post('/post', {
subject: $('#fa-generated-title').val().trim(),
f: 1,
message: $('#fa-generated-message').val().trim(),
mode: 'newtopic',
tid: $('[name="tid"]:first').val(),
post: 1,
}).done(function () {
alert('Postado com sucesso. Você será redirecionado para o subfórum com o novo tópico...');
location.pathname = '/f1-';
}).fail(function () {
alert('Houve um erro! Tente novamente!');
});
}, 600);
});
});
}(jQuery));
</script>
</body>
</html>
Cordialmente,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Problema em no formulário customizado
por vcapelli 26.02.20 17:00
Pedxz escreveu:Olá @vcapelli,
O formulário não postava devido a alteração de um ID; altere para:
- Código:
<!DOCTYPE html>
<html>
<!-- ->
/**
* Gerado em <ajuda.forumeiros.com>.
* Gerador (2.0) feito por Luiz Felipe G. <https://luizfelipe.dev>
*
* Se você tiver erros ou dúvidas, vá em: <ajuda.forumeiros.com>
*/
<!- -->
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"/>
<style type="text/css">
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-size: 17px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: normal;
line-height: 1.5;
color: #212121;
line-height: 1.5;
background: #fff;
}
/**
* Begin tipografia.
*/
a,
a:active,
a:link,
a:visited,
a:focus {
color: #D8B500;
text-decoration: none;
border-bottom: solid 1px transparent;
outline: 0;
}
a:hover {
border-bottom-color: #2688dc;
}
a.fa:hover {
border-bottom-color: transparent;
color: #1f6db0;
}
h3 {
font-size: 20px;
font-weight: 300;
margin-bottom: 10px;
display: block;
width: 100%;
padding-bottom: 3px;
border-bottom: 2px solid #375e7f;
}
textarea {
height: 90px;
box-sizing: border-box;
resize: vertical;
outline: none;
}
.btn {
border: solid 1px #e4e4e4;
background: linear-gradient(180deg, #fff 0%, #efefef 100%);
padding: .575rem 1.1rem;
border-radius: .175rem;
font-weight: 600;
color: #686a6b;
cursor: pointer;
display: block;
text-align: center;
margin-bottom: 5px;
width: 100%;
}
.btn:focus {
border-color: #375e7f;
box-shadow: inset 0 -5px 40px rgba(120, 120, 120, 0.1), inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(0, 0, 0, 0.1);
outline: none;
}
.btn:hover {
box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
}
.btn.btn-primary {
border-radius: 3px;
box-shadow: none;
color: #fff;
background: #D8B500;
font-size: 14px;
transition: linear all 125ms;
margin-top: 32%;
}
.btn.btn-primary:focus {
border-color: #375e7f;
box-shadow: inset 0 1px 2px rgba(39, 56, 28, 0.075), 0 0 0 0.2em rgba(39, 56, 28, 0.6);
outline: none;
}
.btn.btn-primary:hover {
background: #444;
}
.btn.btn-danger {
color: #fff;
border-color: #bd2c00;
background: #e7592e;
background: linear-gradient(180deg, #f86b40 0%, #bd2c00 100%);
}
.btn.btn-danger:focus {
border-color: #aa2c05;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(197, 53, 9, 0.66);
outline: none;
}
.btn-progress {
cursor: not-allowed;
opacity: .657;
}
.form-control {
background-color: #fff;
border: 1px solid #d4d4d4;
padding: 6px 8px;
margin: 5px 0 0;
display: block;
width: 100%;
font-size: 16px;
color: #555;
line-height: 20px;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
outline: none;
}
.form-control:focus {
border-color: #4b6b35;
box-shadow: inset 0 1px 2px rgba(75, 107, 53, 0.075), 0 0 0 0.2em rgba(75, 107, 53, 0.6);
outline: none;
}
input[type="text"]:disabled {
background: #dddddd;
cursor: not-allowed;
}
.card {
background-color: #E54732;
padding: 5px;
font-size: 10px;
color: #fff;
font-weight: 800;
border-radius: 5px;
float: left;
margin-right: 5px;
}
/*
* End tipografia.
**/
.wrapper {
width: 50%;
position: absolute;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.wrapper hgroup {
text-align: center;
}
.wrapper hgroup i.fa {
font-size: 4em;
}
.wrapper hgroup h1 {
font-weight: 300;
margin: 10px 0;
padding: 0;
color: #545454;
}
.wrapper form {
border: solid 1px #d4d4d4;
margin: 0 0 25px;
padding: 20px;
color: #555;
border-radius: 4px;
background-color: #fff;
}
.wrapper form .form-group label {
display: table;
}
.wrapper form .form-group .form-group-col {
float: left;
margin-right: 2%;
margin-top: 2%;
}
.form-group .form-group-col:first-child {
margin-left: 3%;
}
.wrapper footer {
border: solid 1px #d6d6d6;
border-radius: 3px;
padding: 13px;
text-align: center;
font-size: 16px;
color: #555;
margin-bottom: 2%;
}
.col-94 {
width: 94%;
}
.col-30 {
width: 30%;
}
.col-46 {
width: 46%;
}
/**
* FOR JS Styles:
*/
#login-form,
footer {
box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.16);
}
.title h2 {
font-weight: 300;
margin-bottom: 5px;
text-align: center;
}
.title h4 {
font-weight: 300;
margin-bottom: 15px;
text-align: center;
}
@media screen and (max-width: 900px) {
.wrapper {
width: 40%;
}
}
@media screen and (max-width: 600px) {
.wrapper {
width: 70%;
}
}
@media screen and (max-width: 500px) {
.wrapper {
width: 80%;
}
}
@media screen and (max-width: 400px) {
.wrapper {
width: 90%;
}
}
</style>
</head>
<body>
<main class="wrapper">
<form id="form-content">
<a href="/h2-menu" title="Voltar ao menu"><i class="fas fa-arrow-left" aria-hidden="true"></i></a>
<div class="title">
<h4>Preencha o formulário seguindo as instruções sem deixar nenhum campo vazio.</h4>
</div>
<h3>Dados do projeto</h3>
<div class="form-group" style="margin-bottom: 15%;">
<div class="form-group-col col-30">
<label for="campo3">Número do projeto:</label>
<input type="text" id="campo3" class="form-control" placeholder="" required/>
</div>
<div class="form-group-col col-30">
<label for="campo5">Seu nickname:</label>
<input type="text" id="campo5" class="form-control" placeholder="" required/>
</div>
<div class="form-group-col col-30">
<label for="campo12">Data do projeto:</label>
<input type="text" id="campo12" class="form-control" placeholder="" required/>
</div>
</div>
<h3>Corpo do Projeto</h3>
<div class="form-group">
<div class="form-group-col col-94">
<label for="campo6">Ementa:</label>
<textarea data-type="textarea" id="campo6" class="form-control" placeholder="Insira aqui a ementa do projeto." required></textarea>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="campo7">Texto-base:</label>
<textarea data-type="textarea" id="campo7" class="form-control" placeholder="Escreva aqui o projeto." required></textarea>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="campo10">Justificativa:</label>
<textarea data-type="textarea" id="campo10" class="form-control" placeholder="Justifique sobre o seu projeto." required></textarea>
</div>
</div>
<br/>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</main>
<!-- Javascript's -->
<!-- Não é recomendada a edição abaixo desta linha. -->
<script>
var instance = new Date();
var month =["janeiro","fevereiro","março", "abril","maio","junho", "julho","agosto","setembro", "outubro","novembro","dezembro"];
var day = (!! instance.getDate().toString()[1]) ? instance.getDate() : '0' + instance.getDate();
var month_index = instance.getMonth();
var year = instance.getFullYear();
var date = [ day, month[month_index], year ].join(" ");
document.getElementById('campo12').value = date;
</script>
<textarea style="display: none;" id="fa-generated-message">[center][size=24]PROJETO DE LEI N°. {{campo3}}/2020[/size][/center]
[center][size=18](Do Sr. Deputado {{campo5}})[/size][/center]
[right]Ementa: {{campo6}}[/right]
{{campo7}}
[center][size=24]JUSTIFICATIVA[/size][/center]
{{campo10}}
Brasília, {{campo12}}
{{campo5}}</textarea>
<input type="hidden" id="fa-generated-title" value="Projeto de Lei N°. {{campo3}}/2020 - {{campo6}}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://forumeiros.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
'use strict';
$(window).on('load', function () {
$('#form-content').on('submit', function (event) {
event.preventDefault();
$(this).find('button[type="submit"]').text('Postando...');
setTimeout(function () {
$.post('/post', {
subject: $('#fa-generated-title').val().trim(),
f: 1,
message: $('#fa-generated-message').val().trim(),
mode: 'newtopic',
tid: $('[name="tid"]:first').val(),
post: 1,
}).done(function () {
alert('Postado com sucesso. Você será redirecionado para o subfórum com o novo tópico...');
location.pathname = '/f1-';
}).fail(function () {
alert('Houve um erro! Tente novamente!');
});
}, 600);
});
});
}(jQuery));
</script>
</body>
</html>
Cordialmente,
pedxz.
Está postando agora porém não está postando com a mensagem nos campos.
vcapelli- ****
- Membro desde : 17/02/2018
Mensagens : 210
Pontos : 417 -
Re: Problema em no formulário customizado
por tikky 26.02.20 17:16
Altere o código para:
- Código:
<!DOCTYPE html>
<html>
<!-- ->
/**
* Gerado em <ajuda.forumeiros.com>.
* Gerador (2.0) feito por Luiz Felipe G. <https://luizfelipe.dev>
*
* Se você tiver erros ou dúvidas, vá em: <ajuda.forumeiros.com>
*/
<!- -->
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"/>
<style type="text/css">
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-size: 17px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: normal;
line-height: 1.5;
color: #212121;
line-height: 1.5;
background: #fff;
}
/**
* Begin tipografia.
*/
a,
a:active,
a:link,
a:visited,
a:focus {
color: #D8B500;
text-decoration: none;
border-bottom: solid 1px transparent;
outline: 0;
}
a:hover {
border-bottom-color: #2688dc;
}
a.fa:hover {
border-bottom-color: transparent;
color: #1f6db0;
}
h3 {
font-size: 20px;
font-weight: 300;
margin-bottom: 10px;
display: block;
width: 100%;
padding-bottom: 3px;
border-bottom: 2px solid #375e7f;
}
textarea {
height: 90px;
box-sizing: border-box;
resize: vertical;
outline: none;
}
.btn {
border: solid 1px #e4e4e4;
background: linear-gradient(180deg, #fff 0%, #efefef 100%);
padding: .575rem 1.1rem;
border-radius: .175rem;
font-weight: 600;
color: #686a6b;
cursor: pointer;
display: block;
text-align: center;
margin-bottom: 5px;
width: 100%;
}
.btn:focus {
border-color: #375e7f;
box-shadow: inset 0 -5px 40px rgba(120, 120, 120, 0.1), inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(0, 0, 0, 0.1);
outline: none;
}
.btn:hover {
box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
}
.btn.btn-primary {
border-radius: 3px;
box-shadow: none;
color: #fff;
background: #D8B500;
font-size: 14px;
transition: linear all 125ms;
margin-top: 32%;
}
.btn.btn-primary:focus {
border-color: #375e7f;
box-shadow: inset 0 1px 2px rgba(39, 56, 28, 0.075), 0 0 0 0.2em rgba(39, 56, 28, 0.6);
outline: none;
}
.btn.btn-primary:hover {
background: #444;
}
.btn.btn-danger {
color: #fff;
border-color: #bd2c00;
background: #e7592e;
background: linear-gradient(180deg, #f86b40 0%, #bd2c00 100%);
}
.btn.btn-danger:focus {
border-color: #aa2c05;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(197, 53, 9, 0.66);
outline: none;
}
.btn-progress {
cursor: not-allowed;
opacity: .657;
}
.form-control {
background-color: #fff;
border: 1px solid #d4d4d4;
padding: 6px 8px;
margin: 5px 0 0;
display: block;
width: 100%;
font-size: 16px;
color: #555;
line-height: 20px;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
outline: none;
}
.form-control:focus {
border-color: #4b6b35;
box-shadow: inset 0 1px 2px rgba(75, 107, 53, 0.075), 0 0 0 0.2em rgba(75, 107, 53, 0.6);
outline: none;
}
input[type="text"]:disabled {
background: #dddddd;
cursor: not-allowed;
}
.card {
background-color: #E54732;
padding: 5px;
font-size: 10px;
color: #fff;
font-weight: 800;
border-radius: 5px;
float: left;
margin-right: 5px;
}
/*
* End tipografia.
**/
.wrapper {
width: 50%;
position: absolute;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.wrapper hgroup {
text-align: center;
}
.wrapper hgroup i.fa {
font-size: 4em;
}
.wrapper hgroup h1 {
font-weight: 300;
margin: 10px 0;
padding: 0;
color: #545454;
}
.wrapper form {
border: solid 1px #d4d4d4;
margin: 0 0 25px;
padding: 20px;
color: #555;
border-radius: 4px;
background-color: #fff;
}
.wrapper form .form-group label {
display: table;
}
.wrapper form .form-group .form-group-col {
float: left;
margin-right: 2%;
margin-top: 2%;
}
.form-group .form-group-col:first-child {
margin-left: 3%;
}
.wrapper footer {
border: solid 1px #d6d6d6;
border-radius: 3px;
padding: 13px;
text-align: center;
font-size: 16px;
color: #555;
margin-bottom: 2%;
}
.col-94 {
width: 94%;
}
.col-30 {
width: 30%;
}
.col-46 {
width: 46%;
}
/**
* FOR JS Styles:
*/
#fa-generated-form,
footer {
box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.16);
}
.title h2 {
font-weight: 300;
margin-bottom: 5px;
text-align: center;
}
.title h4 {
font-weight: 300;
margin-bottom: 15px;
text-align: center;
}
@media screen and (max-width: 900px) {
.wrapper {
width: 40%;
}
}
@media screen and (max-width: 600px) {
.wrapper {
width: 70%;
}
}
@media screen and (max-width: 500px) {
.wrapper {
width: 80%;
}
}
@media screen and (max-width: 400px) {
.wrapper {
width: 90%;
}
}
</style>
</head>
<body>
<main class="wrapper">
<form id="fa-generated-form">
<a href="/h2-menu" title="Voltar ao menu"><i class="fas fa-arrow-left" aria-hidden="true"></i></a>
<div class="title">
<h4>Preencha o formulário seguindo as instruções sem deixar nenhum campo vazio.</h4>
</div>
<h3>Dados do projeto</h3>
<div class="form-group" style="margin-bottom: 15%;">
<div class="form-group-col col-30">
<label for="campo3">Número do projeto:</label>
<input type="text" id="campo3" class="form-control" placeholder="" required/>
</div>
<div class="form-group-col col-30">
<label for="campo5">Seu nickname:</label>
<input type="text" id="campo5" class="form-control" placeholder="" required/>
</div>
<div class="form-group-col col-30">
<label for="campo12">Data do projeto:</label>
<input type="text" id="campo12" class="form-control" placeholder="" required/>
</div>
</div>
<h3>Corpo do Projeto</h3>
<div class="form-group">
<div class="form-group-col col-94">
<label for="campo6">Ementa:</label>
<textarea data-type="textarea" id="campo6" class="form-control" placeholder="Insira aqui a ementa do projeto." required></textarea>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="campo7">Texto-base:</label>
<textarea data-type="textarea" id="campo7" class="form-control" placeholder="Escreva aqui o projeto." required></textarea>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="campo10">Justificativa:</label>
<textarea data-type="textarea" id="campo10" class="form-control" placeholder="Justifique sobre o seu projeto." required></textarea>
</div>
</div>
<br/>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</main>
<!-- Javascript's -->
<!-- Não recomendada a edição abaixo desta linha. -->
<script>
var instance = new Date();
var month =["janeiro","fevereiro","março", "abril","maio","junho", "julho","agosto","setembro", "outubro","novembro","dezembro"];
var day = (!! instance.getDate().toString()[1]) ? instance.getDate() : '0' + instance.getDate();
var month_index = instance.getMonth();
var year = instance.getFullYear();
var date = [ day, month[month_index], year ].join(" ");
document.getElementById('campo12').value = date;
</script>
<textarea style="display: none;" id="fa-generated-message">[center][size=24]PROJETO DE LEI N°. {{campo3}}/2020[/size][/center]
[center][size=18](Do Sr. Deputado {{campo5}})[/size][/center]
[right]Ementa: {{campo6}}[/right]
{{campo7}}
[center][size=24]JUSTIFICATIVA[/size][/center]
{{campo10}}
Brasília, {{campo12}}
{{campo5}}</textarea>
<input type="hidden" id="fa-generated-title" value="Projeto de Lei N°. {{campo3}}/2020 - {{campo6}}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="https://forumeiros.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
'use strict';
$(window).on('load', function () {
$('#fa-generated-form').on('submit', function (event) {
event.preventDefault();
$(this).find('button[type="submit"]').text('Postando...');
setTimeout(function () {
$.post('/post', {
subject: $('#fa-generated-title').val().trim(),
f: 7,
message: $('#fa-generated-message').val().trim(),
mode: 'newtopic',
tid: $('[name="tid"]:first').val(),
post: 1,
}).done(function () {
alert('Postado com sucesso. Você será redirecionado para o subfórum com o novo tópico...');
location.pathname = '/f7-';
}).fail(function () {
alert('Houve um erro! Tente novamente!');
});
}, 600);
});
});
}(jQuery));
</script>
</body>
</html>
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
vcapelli- ****
- Membro desde : 17/02/2018
Mensagens : 210
Pontos : 417 -
Re: Problema em no formulário customizado
por tikky 26.02.20 18:07
Questão resolvidaEsta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área. |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Tópicos semelhantes» Problema com formulário
» Problema com formulário
» Formulário com problema
» Problema com um formulario.
» Problema em Formulário
» Problema com formulário
» Formulário com problema
» Problema com um formulario.
» Problema em Formulário
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos