InícioAdicionar logotipo ao formulário personalizado
3 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 • Compartilhe
Adicionar logotipo ao formulário personalizado
por luquinhasda10 02.08.23 5:46
Detalhes da questão
Endereço do fórum: http://policiatte.forumeiros.com
Versão do fórum: ModernBB
Descrição
Detalhes da questão
Endereço do fórum: http://policiatte.forumeiros.com
Versão do fórum: ModernBB
Descrição
Criei um formulário gostaria que tivesse esse emblema como cabeçalho do formulário: https://i.imgur.com/CdQMzIC.png
E gostaria que quando postasse a resposta fosse para o tópico de número 1.
Estou com dificuldades para isso.
- Formulário:
- Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modelo I: Entrada de Membros</title>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
background-image: radial-gradient(circle, #4b0303, #4b0303, #4b0303, #4b0303, #4b0303);;
}
.box{
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: black;
padding: 15px;
border-radius: 15px;
width: 20%;
}
fieldset{
border: 3px solid #a30006;
}
legend{
border: 1px solid #a30006;
padding: 10px;
text-align: center;
background-color: #a30006;
border-radius: 8px;
}
.inputBox{
position: relative;
}
.inputUser{
background: none;
border: none;
border-bottom: 1px solid white;
outline: none;
color: white;
font-size: 15px;
width: 100%;
letter-spacing: 2px;
}
.labelInput{
position: absolute;
top: 0px;
left: 0px;
pointer-events: none;
transition: .5s;
}
.inputUser:focus ~ .labelInput,
.inputUser:valid ~ .labelInput{
top: -20px;
font-size: 12px;
color: dodgerblue;
}
#data_nascimento{
border: none;
padding: 8px;
border-radius: 10px;
outline: none;
font-size: 15px;
}
#submit{
background-image: linear-gradient(to right,rgb(81 15 15), rgb(80 16 16));
width: 100%;
border: none;
padding: 15px;
color: black;
font-size: 15px;
cursor: pointer;
border-radius: 10px;
}
#submit:hover{
background-image: linear-gradient(to right,rgb(47 1 16), rgb(81 15 15))
}
</style>
</head>
<body>
<div class="box">
<form action="">
<fieldset>
<legend><b>Entrada de Membros</b></legend>
<br>
<div class="inputBox">
<input type="text" name="nome" id="nome" class="inputUser" required>
<label for="nome" class="labelInput">Nick do integrante</label>
</div>
<br><br>
<label for="data_nascimento"><b>Registro:</b></label>
<input type="date" name="data_nascimento" id="data_nascimento" required>
<br><br>
<input type="submit" name="submit" id="submit">
</fieldset>
</form>
</div>
</body>
</html>
luquinhasda10- ***
- Membro desde : 04/07/2020
Mensagens : 167
Pontos : 236 -
Re: Adicionar logotipo ao formulário personalizado
por Musashi 02.08.23 12:54
Bom dia, @luquinhasda10,
Troque o seu HTML fornecido acima por esse seguinte HTML:
Lembrando: Quando você for pesquisar a seguinte palavra em seu código: Number.
Será onde você deverá está adicionado o número do tópico que o mesmo deseja que seja encaminhado a respostas, juntamente com o direcionamento do usuário para o tópico que enviou a resposta:
Onde tem os números marcados, será o número que você estará colocando no local dos parâmetros que houver o código mencionado anteriormente.
Caso não tenha funcionado, responda esse tópico que estaremos tentando resolver em um outro tipo de método!
(Aguardo respostas).
Atenciosamente,
Musashi!
Troque o seu HTML fornecido acima por esse seguinte HTML:
- Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="https://i.imgur.com/CdQMzIC.png">
<title>Modelo I: Entrada de Membros</title>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
background-image: radial-gradient(circle, #4b0303, #4b0303, #4b0303, #4b0303, #4b0303);;
}
.box{
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: black;
padding: 15px;
border-radius: 15px;
width: 20%;
}
fieldset{
border: 3px solid #a30006;
}
legend{
border: 1px solid #a30006;
padding: 10px;
text-align: center;
background-color: #a30006;
border-radius: 8px;
}
.inputBox{
position: relative;
}
.inputUser{
background: none;
border: none;
border-bottom: 1px solid white;
outline: none;
color: white;
font-size: 15px;
width: 100%;
letter-spacing: 2px;
}
.labelInput{
position: absolute;
top: 0px;
left: 0px;
pointer-events: none;
transition: .5s;
}
.inputUser:focus ~ .labelInput,
.inputUser:valid ~ .labelInput{
top: -20px;
font-size: 12px;
color: dodgerblue;
}
#data_nascimento{
border: none;
padding: 8px;
border-radius: 10px;
outline: none;
font-size: 15px;
}
#submit{
background-image: linear-gradient(to right,rgb(81 15 15), rgb(80 16 16));
width: 100%;
border: none;
padding: 15px;
color: black;
font-size: 15px;
cursor: pointer;
border-radius: 10px;
}
#submit:hover{
background-image: linear-gradient(to right,rgb(47 1 16), rgb(81 15 15))
}
</style>
</head>
<body>
<div class="box">
<form id="form-content">
<fieldset>
<legend><b>Entrada de Membros</b></legend>
<br>
<div class="inputBox">
<input type="text" name="nome" id="nome" class="inputUser" required>
<label for="nome" class="labelInput"><b>Nick do integrante</b></label>
</div>
<br><br>
<label for="data_nascimento"><b>Registro:</b></label>
<input type="date" name="data_nascimento" id="data_nascimento" required>
<br><br>
<input type="submit" name="submit" id="submit">
</fieldset>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
(function ($) {
"use strict";
$(function () {
$("#form-content").on("submit", function (event) {
var data = {
data_nascimento: $("#data_nascimento").val(),
nome: $("#nome")
};
event.preventDefault();
setTimeout(function () {
$.post("/post", {
t: Number,
message: [
`[b]TÍTULO[/b]
[b]nome:[/b] ${data.nome}
[b]Registro:[/b] ${data.data_nascimento}`,
].join("\n"),
mode: "reply",
tid: $('[name="tid"]:first').val(),
post: 1,
attach_sig: "on",
})
.done(function () {
alert("Postagem realizada com sucesso! Aguarde o redirecionamento para o tópico...");
location.href = "/tNumber-" + location.host + "/tNumber-?view=newest";
})
.fail(function () {
alert("Ocorreu um erro! Tente novamente, se o problema persistir, entre em contato com um administrador do fórum.");
});
}, 600);
});
});
})(jQuery);
</script>
</body>
</html>
Lembrando: Quando você for pesquisar a seguinte palavra em seu código: Number.
Será onde você deverá está adicionado o número do tópico que o mesmo deseja que seja encaminhado a respostas, juntamente com o direcionamento do usuário para o tópico que enviou a resposta:
Ex.: https://ajuda.forumeiros.com/t117675
Onde tem os números marcados, será o número que você estará colocando no local dos parâmetros que houver o código mencionado anteriormente.
Caso não tenha funcionado, responda esse tópico que estaremos tentando resolver em um outro tipo de método!
(Aguardo respostas).
Atenciosamente,
Musashi!
Musashi- Membro
- Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762 -
Re: Adicionar logotipo ao formulário personalizado
por luquinhasda10 04.08.23 15:24
olá! bom dia.
havia especificado tb: "Criei um formulário gostaria que tivesse esse emblema como cabeçalho do formulário: https://i.imgur.com/CdQMzIC.png"
havia especificado tb: "Criei um formulário gostaria que tivesse esse emblema como cabeçalho do formulário: https://i.imgur.com/CdQMzIC.png"
luquinhasda10- ***
- Membro desde : 04/07/2020
Mensagens : 167
Pontos : 236 -
Re: Adicionar logotipo ao formulário personalizado
por Musashi 04.08.23 15:36
Bom dia, @luquinhasda10,
Peço perdão por não ter adicionado esse pedido.
Pode me mostrar onde exatamente o mesmo deseja que tenha essa imagem?!
:
(Aguardo respostas).
Atenciosamente,
Musashi!
Peço perdão por não ter adicionado esse pedido.
Pode me mostrar onde exatamente o mesmo deseja que tenha essa imagem?!
:(Aguardo respostas).
Atenciosamente,
Musashi!
Musashi- Membro
- Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762 -
luquinhasda10- ***
- Membro desde : 04/07/2020
Mensagens : 167
Pontos : 236 -
Re: Adicionar logotipo ao formulário personalizado
por Musashi 04.08.23 16:51
Certo então @luquinhasda10,
Altere o seu código para esse seguinte modelo:
Caso não tenha ficado como havia solicitado, retorne uma mensagem para esse tópico.
(Aguardo uma resposta).
Atenciosamente,
Musashi!
Altere o seu código para esse seguinte modelo:
- Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="https://i.imgur.com/CdQMzIC.png">
<title>Modelo I: Entrada de Membros</title>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
background-image: radial-gradient(circle, #4b0303, #4b0303, #4b0303, #4b0303, #4b0303);;
}
.box{
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: black;
padding: 15px;
border-radius: 15px;
width: 20%;
}
fieldset{
border: 3px solid #a30006;
}
legend{
border: 1px solid #a30006;
padding: 10px;
text-align: center;
background-color: #a30006;
border-radius: 8px;
}
.inputBox{
position: relative;
}
.inputUser{
background: none;
border: none;
border-bottom: 1px solid white;
outline: none;
color: white;
font-size: 15px;
width: 100%;
letter-spacing: 2px;
}
.labelInput{
position: absolute;
top: 0px;
left: 0px;
pointer-events: none;
transition: .5s;
}
.inputUser:focus ~ .labelInput,
.inputUser:valid ~ .labelInput{
top: -20px;
font-size: 12px;
color: dodgerblue;
}
#data_nascimento{
border: none;
padding: 8px;
border-radius: 10px;
outline: none;
font-size: 15px;
}
#submit{
background-image: linear-gradient(to right,rgb(81 15 15), rgb(80 16 16));
width: 100%;
border: none;
padding: 15px;
color: black;
font-size: 15px;
cursor: pointer;
border-radius: 10px;
}
#submit:hover{
background-image: linear-gradient(to right,rgb(47 1 16), rgb(81 15 15))
}
.logo {
margin: auto;
position: relative;
justify-content: center;
display: flex;
transform: translateY(23rem);
}
</style>
</head>
<body>
<div class="logo">
<img src="https://i.imgur.com/CdQMzIC.png"/>
</div>
<div class="box">
<form id="form-content">
<fieldset>
<legend><b>Entrada de Membros</b></legend>
<br>
<div class="inputBox">
<input type="text" name="nome" id="nome" class="inputUser" required>
<label for="nome" class="labelInput"><b>Nick do integrante</b></label>
</div>
<br><br>
<label for="data_nascimento"><b>Registro:</b></label>
<input type="date" name="data_nascimento" id="data_nascimento" required>
<br><br>
<input type="submit" name="submit" id="submit">
</fieldset>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
(function ($) {
"use strict";
$(function () {
$("#form-content").on("submit", function (event) {
var data = {
data_nascimento: $("#data_nascimento").val(),
nome: $("#nome")
};
event.preventDefault();
setTimeout(function () {
$.post("/post", {
t: Number,
message: [
`[b]TÍTULO[/b]
[b]nome:[/b] ${data.nome}
[b]Registro:[/b] ${data.data_nascimento}`,
].join("\n"),
mode: "reply",
tid: $('[name="tid"]:first').val(),
post: 1,
attach_sig: "on",
})
.done(function () {
alert("Postagem realizada com sucesso! Aguarde o redirecionamento para o tópico...");
location.href = "/tNumber-" + location.host + "/tNumber-?view=newest";
})
.fail(function () {
alert("Ocorreu um erro! Tente novamente, se o problema persistir, entre em contato com um administrador do fórum.");
});
}, 600);
});
});
})(jQuery);
</script>
</body>
</html>
Caso não tenha ficado como havia solicitado, retorne uma mensagem para esse tópico.
(Aguardo uma resposta).
Atenciosamente,
Musashi!
Musashi- Membro
- Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762 -
Re: Adicionar logotipo ao formulário personalizado
por Sleep 10.08.23 14:49
Tópico resolvidoTópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão. |
Sleep- Ajudeiro
- Membro desde : 10/08/2012
Mensagens : 1108
Pontos : 1341 -
Tópicos semelhantes» Formulário personalizado
» Formulário de Registo personalizado
» Formulário de postagem personalizado
» Formulário personalizado não cria a quebra de linha
» Adicionar subfórum no Formulário
» Formulário de Registo personalizado
» Formulário de postagem personalizado
» Formulário personalizado não cria a quebra de linha
» Adicionar subfórum no 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
Facebook
Twitter
Youtube
