I am trying to style a contact form I set up on my website. I took a ready made one (html with css styling and php action) but when I put it in my html, it doesn't link the html with the css. How should I define the divs? Thank you.
<div id="contact" class="contact">
<div class="row">
<div class="divider4"></div>
<form action="mail.php" method="post" id="vreme">
<div class="column-1">
YOUR NAME<br/><br/>
<input name="name" id="name" value="" />
</div>
<div class="column-2">
YOUR E-MAIL<br/><br/>
<input name="email" id="email" value="" />
</div>
<div class="column-3">
MESSAGE<br/><br/>
<textarea id="message" name="message" ></textarea>
</div>
<div class="button">
<span><input class="submit" id="submit" name="submit" type="submit" value="Send"></span>
</div>
</form>
</div>
</div>
Have you included the css reference to your page header? As in
<link rel="stylesheet" href="css/form-style.css" type="text/css">
There should be a css file for the given html form in that website. You should connect that form.css file to the form.html post by mentioning the following code in the head section of your html. Check it and see
<html>
<head>
<link rel="stylesheet" href="css/form.css" type="text/css">
</head>
<body>
<div id="contact" class="contact">
<div class="row"><div class="divider4"></div>
<form action="mail.php" method="post" id="vreme">
<div class="column-1">
YOUR NAME<br/><br/>
<input name="name" id="name" value="" />
</div>
<div class="column-2">
YOUR E-MAIL<br/><br/>
<input name="email" id="email" value="" />
</div>
<div class="column-3">
MESSAGE<br/><br/>
<textarea id="message" name="message" ></textarea>
</div>
<div class="button">
<span><input class="submit" id="submit" name="submit" type="submit" value="Send"></span>
</div>
</form>
</div></div>
</body>
</html>
I have included the css reference, the rest of my page styling is working, that isn't. The weird part is, I took that from a website I had previously worked on, and it worked there perfectly.
<link rel="stylesheet" href="assets/style.css" type="text/css">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Form Style</title>
<link type="text/css" rel="stylesheet" href="css/form.css"/> //css/form.css - select your file location
/* OR */
<style type="text/css">
/*Paste your css style code here*/
</style>
</head>
<body>
<div id="contact" class="contact">
<div class="row">
<div class="divider4"></div>
<form name="mail" action="mail.php" method="post" id="vreme">
<div class="column-1">
YOUR NAME<br/><br/>
<input name="name" id="name" value="" />
</div>
<div class="column-2">
YOUR E-MAIL<br/><br/>
<input name="email" id="email" value="" />
</div>
<div class="column-3">
MESSAGE<br/><br/>
<textarea id="message" name="message" ></textarea>
</div>
<div class="button">
<span><input class="submit" id="submit" name="submit" type="submit" value="Send"></span>
</div>
</form>
</div>
</div>
</body>
</html>
Hope this helps...
Related
Everything was working fine before, but it stopped working after a while. When I press the button to sign up, it opens up a blank page with a blank box, unlike before, when it had the actual stuff it was supposed to have. I have here the images, please help me. Thanks in advance!
enter image description here
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Winit - Login/Sign Up</title>
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="stylesheet" href="./src/main.css">
<link rel="icon" href="https://lh3.googleusercontent.com/proxy/7ytbxkmMme0IPSvsHZN9ZFd19oIZ9lqtq_402Z1UbIr0-1yMU_OoIbwaJsZ3x3ZEoQtZTJ4lR9hHLxSQibKiacHqfNyEEKdNunHv4J9hohCTtNlqO0yfb2rYGQhxl1M"
</head>
<body>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script>
function SubForm(){
$.ajax({
url:'https://api.apispreadsheets.com/data/20789/',
type:'post',
data:$("#createAccount").serializeArray(),
success: function(){
alert("Form Data Submitted :)")
},
error: function(){
alert("There was an error :(")
}
});
}
</script>
<div class="container">
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__message form__message--error">Incorrect Username/Password Combination</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or email">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
<div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text">
Forgot your password?
</p>
<p class="form__text">
<a class="form__link" href="./" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<form class="form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form_input" input name="username" class="form__input" autofocus placeholder="Username">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" input name="email" autofocus placeholder="Email Address">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" input name="password" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password">
<div class="form__input-error-message"></div>
</div>
<label>
<button onclick="SubForm()" <button class="form__button" type="submit">Continue</button>
<p class="form__text">
<a class="form__link" href="./" id="linkLogin">Already have an account? Sign in</a>
</p>
</form>
</div>
<script src="./src/main.js"></script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/styles.css">
<title>Contact Us</title>
</head>
<body>
<form action="MAILTO: xyz#gmail.com" method="post" enctype="text/plain"></form>
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<div class="contact-form">
<div class="input-fields">
<input type="text" class="input" placeholder="Name" required>
<input type="text" class="input" placeholder="Email Address" required>
<input type="text" class="input" placeholder="Phone" required>
<input type="text" class="input" placeholder="Subject" required>
</div>
<div class="msg">
<textarea placeholder="Message"></textarea>
<button type="submit">Send</button>
<!-- <div class="btn">send</div> -->
</div>
</div>
</div>
</form>
</body>
</html>
Hi! I am trying to make a contact form but i am not able to receive the Email send by the form....actually it never sends the data...what can i do? I want to receive the data on my gmail when the user clicks the send Button.
There is a closing tag at the end of the line where you start your form.
<form action="MAILTO: xyz#gmail.com" method="post" enctype="text/plain">
<div class="wrapper">
<div class="title">
<h1>contact us form</h1>
</div>
<div class="contact-form">
<div class="input-fields">
<input type="text" class="input" placeholder="Name" required>
<input type="text" class="input" placeholder="Email Address" required>
<input type="text" class="input" placeholder="Phone" required>
<input type="text" class="input" placeholder="Subject" required>
</div>
<div class="msg">
<textarea placeholder="Message"></textarea>
<button type="submit">Send</button>
<!-- <div class="btn">send</div> -->
</div>
</div>
</div>
</form>
Try the above instead.
On top of this - all this code will do is open a client on your computer for the user to then send an email direct. It won't submit a message direct to the user from the browser. If you wish to do that, you will have to use back-end code. I suggest Node.js and Nodemailer. Here's a good link explaining that:
https://blog.mailtrap.io/nodemailer-gmail/
When i include the CodeIgniter library on my website
I have this :
SEE THE PROBLEM HERE
A blank after the body tag
This is caused by the recaptcha library , because when i have removed it , the blank have disappeared
Need some help ;)
My code :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Razal</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<META NAME="description" CONTENT="Serveur privé Dofus 1.29.1">
<META NAME="author" CONTENT="Ichiga">
<link href="https://www.razal.eu/style/css/style_v13.css" rel="stylesheet" type="text/css" />
<link href="https://www.razal.eu/style/css/pure-min.css" rel="stylesheet" type="text/css" />
<script language="javascript">
<!--
if (top.location!= self.location)
{
top.location = self.location.href
}
function ToogleMobileMenu()
{
document.getElementById("div-left").classList.toggle('div-left-open');
}
function UpdateMinViewIpad()
{
var viewportmeta = document.querySelector('meta[name="viewport"]');
if(window.innerHeight > window.innerWidth) {viewportmeta.content = 'width=device-width';}
else{viewportmeta.content = 'width=device-height';}
}
// BUG orientation portrait/lanscape IOS //
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i))
{
UpdateMinViewIpad();
document.addEventListener('orientationchange', function ()
{
UpdateMinViewIpad();
}, false);
}
//-->
</script>
</head>
<body>
<div class="div-header">
<div class="div-header-content">
</div>
<div class="div-bar-menu">
<div class="div-menu">
<img src="https://www.razal.eu/style/img/menu_separator.png">
Accueil
<img src="https://www.razal.eu/style/img/menu_separator.png">
Rejoindre Razal
<img src="https://www.razal.eu/style/img/menu_separator.png">
Classements
<img src="https://www.razal.eu/style/img/menu_separator.png">
Forum
<img src="https://www.razal.eu/style/img/menu_separator.png">
<a onclick="alert('à venir')" href="#">Vidéos</a>
<img src="https://www.razal.eu/style/img/menu_separator.png">
</div>
</div>
</div>
<div class="div-content">
<div id="div-left" class="div-left">
<div class="div-floater-menu" onclick="ToogleMobileMenu();">
<img src="images/floatter-menu.png" alt="menu">
</div>
<div class="div-box">
<button class="pure-button pure-button-active" style="width:100%;" id="vote">Créer un compte</button>
</div>
<div class="div-box">
<legend>Connexion</legend>
<hr>
<form action="https://www.razal.eu/utilisateur/connexion" method="post" accept-charset="utf-8">
<div class="pure-form pure-form-stacked">
<fieldset>
<label for="username">Nom de compte</label>
<div class="pure-u-3-2">
<input class="pure-u-1" id="username" type="text" name="username" placeholder="Nom de compte">
</div>
<label for="password">Mot de passe</label>
<div class="pure-u-3-2">
<input class="pure-u-1" id="password" type="password" name="password" placeholder="Mot de passe">
</div>
<button type="submit" class="pure-button pure-button-primary">se connecter</button>
</fieldset>
</div>
</form>
</div>
<div class="div-box">
<legend>Voter</legend>
<img style="width:100%" src="https://www.razal.eu/style/img/rpg.png">
</div>
</div>
<div class="div-page">
<div class="div-box">
<h2>Formulaire d'inscription</h2>
<hr class="hrtitle" />
<div class="pure-u-1-4">
</div>
<div class="pure-u-1-3">
<form action="https://www.razal.eu/utilisateur/inscription" method="post" accept-charset="utf-8">
<div class="pure-form pure-form-stacked">
<fieldset>
<label for="username">Nom de compte</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="username" name="username" type="text">
<label for="email">Adresse e-mail</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="email" name="email" type="email">
<label for="nickname">Pseudo</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="nickname" name="nickname" type="text">
<label for="password">Mot de passe</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="password" name="password" type="password">
<label for="password">Confirmation MDP</label>
<small style="font-size:13px; color:#7C0C0C;"></small>
<input id="password" name="passwordconfirm" type="password" >
<p><div class="g-recaptcha" data-sitekey="6LfDgB0TAAAAANw_dSy0Pd-ezJMRTko_UHmpcm6R"></div>
<script src="https://www.google.com/recaptcha/api.js?hl=fr" async defer></script></p>
<button type="submit" class="pure-button pure-button-primary">S'inscrire</button>
</fieldset>
</div>
</form>
</div>
</div>
<br>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
entity looks like a result of including files saved in UTF-8 with BOM.
I suggest to check for files encoding, maybe if you are working with different conflicting formats.
I am debugging my simple Grails application, the CSS effects sometimes miss when I refresh the page. however,
view source shows correct html, but browser just shows the plain page.
If I stop grails and re-run, the CSS comes back. I guess it's something related to cache, but I really cannot figure out what's wrong. below is the source
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12"></div>
<div class="span12"></div>
<div class="span12"></div>
<div class="span12"></div>
<div class="span12"></div>
</div>
<div class="row-fluid offset7">
<div class="well span3">
<form action="/dashboard/login/login" method="post" >
<fieldset>
<div class="control-group">
<!-- Username -->
<label class="control-label" for="account">Account</label>
<div class="controls">
<input type="text" name="accountName" placeholder="account" class="input-xlarge" value="" id="accountName" />
</div>
</div>
<div class="control-group">
<!-- Password-->
<label class="control-label" for="password">Password</label>
<div class="controls">
<input type="password" name="password" placeholder="password" class="input-xlarge" value="" id="password" />
</div>
</div>
<div class="control-group">
<!-- Button -->
<div class="controls">
<input type="submit" name="Login" value="Login" class="btn btn-success" id="Login" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
I don't know how is your .gsp code, but i passed for a problem similar with your.
I solve my problem updating the resource plugins version, like you can see in the post above:
Grails: Images / CSS missing from time to time
I am creating a login form for my java app. But I can't get it to submit. I can't find any errors in my form.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Log in</title>
</head>
<body>
<div id="container">
<div id="top">
<h1>Please complete the form below</h1>
</div>
<div id="leftSide">
<fieldset>
<legend>Login details</legend>
<form action="login.jsp" method="get" class="form">
<label for="username">Username</label>
<div class="div_texbox">
<input name="username" type="text" class="username" id="username" value="username" />
</div>
<label for="password">Password</label>
<div class="div_texbox">
<input name="password" type="password" class="password" id="password" value="password" />
</div>
<div class="button_div">
<input name="submit" type="button" value="Submit" class="buttons" />
</div>
</form>
</fieldset>
</div>
</div>
</body>
</html>
There are some from other parts of page.
change this:
<input name="submit" type="button" value="Submit" class="buttons" />
to this:
<input name="submit" type="submit" value="Submit" class="buttons" />
Submit button type should be submit.
change the input type from button to Submit in this line and you should be able to submit
<input name="submit" type="button" value="Submit" class="buttons" />
your code is normal, if you can't submit it take a look to your "login.jsp".
also you can use
<form action="login.jsp" method="post" class="form">
and change:
type="botton"
to
type="submit"