html/css 中的联系表格
[英]Contact Form in html/css
问题描述
您好，我有以下联系表格代码：
/* Contact Form */ input[type=text], [type=email], select, textarea { width: 100%; padding: 12px; border: 1px solid #555; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #0563bb; color: white; padding: 12px 20px; border: none; cursor: pointer; } input[type=submit]:hover { opacity: 0.9; }.contactform { position: relative; border-radius: 50px; background-color: #f2f2f2; padding: 5px; z-index: 2; display: block; margin-left: auto; margin-right: auto; margin-bottom: auto; margin-top: 1%; width: 100%; animation-name: gradient; animation-duration: 3s; animation-iteration-count: infinite; }.contactform:hover { animation-name: gradient; animation-duration: 15s; animation-iteration-count: infinite; }.column { float: center; width: 50%; margin-top: 6px; padding: 20px; display: block; margin-left: auto; margin-right: auto; }.row:after { content: ""; display: table; clear: both; } @media screen and (max-width: 600px) {.column, input[type=submit] { width: auto; margin-top: 0; } } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }
<section id="contact"> <div class="container" data-aos="fade-up"> <div class="contactform"> <div style="text-align:center"> <div class="section-title"> <h2><br/>Get In Touch</h2> </div> <p>Feel Free To Reach Out To Me Through This Form. </p> </div> <div class="row"> <div class="column"> <form name="myform" action="thankyou.html" method="POST" novalidate> <label for="firstname">First Name</label> <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required> <label for="lastname">Last Name</label> <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.:" required> <label for="email">Email.</label> <input type="email" id="email" name="email" placeholder="Your Email.." required> <label for="subject">Subject</label> <textarea id="subject" name="subject" placeholder="Lets Collaborate.:" style="height:170px" required></textarea> <input type="submit" value="Submit"> </form> </div> </div> </div> </div> </section>
我想稍微修改一下这个表格，只改变输入字段。 基本上，我想在输入字段上添加 animation 。
预计 Output
https://watch.screencastify.com/v/5kecEAtHg4o2VXpDpEYU
如您所见，我希望消息显示在输入字段中，但是当用户单击输入字段时，消息应显示在输入字段的顶部，如视频所示。 关于如何完成这项任务的任何建议？
以下是视频中联系表格的代码：
Contact.jsx ：
/ dependancies
import React from 'react'
import { Grid, Typography, TextField, Button, Divider, useMediaQuery } from '@material-ui/core'
import emailjs from 'emailjs-com'
// icons
import { FaGithub, FaLinkedin, FaPhone } from 'react-icons/fa'
import { MdEmail } from 'react-icons/md'
// file imports
import { db } from "../../firebaseConfig";
import ContactStyles from './ContactStyles'
import{ init } from 'emailjs-com';
init(process.env.REACT_APP_USER_ID);
const Contact = () => {
// classes and queries
const classes = ContactStyles();
const md = useMediaQuery('(max-width: 960px)');
const lg = useMediaQuery('(min-width: 960px)');
// state declaration
const [name, setName] = React.useState("");
const [email, setEmail] = React.useState("");
const [message, setMessage] = React.useState("");
const [errorName, setErrorName] = React.useState(false);
const [errorEmail, setErrorEmail] = React.useState(false);
const [errorMessage, setErrorMessage] = React.useState(false);
// event handler
const submitHander = (e) => {
e.preventDefault(); // prevents screen refresh
// uses regex to verify email
const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
setErrorName(false);
setErrorEmail(false);
setErrorMessage(false);
// if a field is invalid, ensure that email is not submitted and error is thrown
if (name === "" || !emailRegex.test(email) || message === "") {
if (name === "") {
setErrorName(true);
}
if (!emailRegex.test(email)) {
setErrorEmail(true);
}
if (message === "") {
setErrorMessage(true);
}
} else {
const firebaseObject = { // object to be sent to firebase and email
name: name,
email: email,
message: message
}
// send to firebase
db.collection('contacts').add(firebaseObject)
.then(() => {
console.log('submitted to Firebase');
})
.catch((err) => {
console.log(err.message);
});
// send to email
emailjs.send(process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID,{
name: name,
email: email,
to_name: "",
from_name: "",
message: message,
})
.then((response) => {
alert('Message has been submitted!');
console.log(response);
})
.catch((err) => {
console.log(err);
});
setName('');
setEmail('');
setMessage('');
setErrorName(false);
setErrorEmail(false);
setErrorMessage(false);
}
}
return (
<Grid container className={classes.root} id="contact">
{/* Title */}
<Grid className={classes.title} item xs={12}>
<br />
<Typography variant="h2">Contact Me</Typography>
<Typography variant="h4">- Can't Wait to Connect! -</Typography>
</Grid>
{/* Contact Text */}
{lg && <>
<Grid item xs={1}></Grid>
<Grid item xs={10} md={5}>
<br /><br />
<Typography variant="h5"><b>Get in Touch!</b></Typography>
<Divider></Divider>
<br />
<MdEmail />
<Typography display="inline"><b> Email:</b></Typography>
<a rel="noreferrer" target="_blank" className={classes.contact} href="mailto:anjaligta@outlook.com">
<Typography display="inline"> anjaligta@outlook.com</Typography>
</a>
<div /><br />
<FaPhone />
<Typography display="inline"><b> Phone:</b></Typography>
<a rel="noreferrer" target="_blank" className={classes.contact} href="647-544-0781">
<Typography className={classes.contact} display="inline"> 647-544-0781</Typography>
</a>
<div /><br />
<FaGithub />
<Typography display="inline"><b> Github:</b></Typography>
<a rel="noreferrer" target="_blank" className={classes.contact} href="https://github.com/anjalig21">
<Typography display="inline"> github.com/AnjaliGupta</Typography>
</a>
<div /><br />
<FaLinkedin />
<Typography display="inline"><b> LinkedIn:</b></Typography>
<a rel="noreferrer" target="_blank" className={classes.contact} href="https://www.linkedin.com/in/anjali-gupta21/">
<Typography display="inline"> linkedin.com/in/AnjaliGupta</Typography>
</a>
<br /><br /><br />
</Grid>
<Grid item xs={1}></Grid>
</>}
{/* Contact Form */}
{md && <Grid item xs={1}></Grid>}
<Grid item xs={10} md={4}>
<div className={classes.formContainer}>
<form onSubmit={submitHander} className={classes.form}>
<TextField
className={classes.input}
value={name}
onChange={(e) => setName(e.target.value)}
label="Name"
variant="outlined"
error={errorName}
helperText={errorName ? "Please enter a name." : ""}
/>
<br /><br />
<TextField
className={classes.input}
value={email}
onChange={(e) => setEmail(e.target.value)}
label="Email"
variant="outlined"
error={errorEmail}
helperText={errorEmail ? "Please enter a correct email." : ""}
/>
<br /><br />
<TextField
className={classes.input}
value={message}
onChange={(e) => setMessage(e.target.value)}
label="Message"
multiline
rows={10}
variant="outlined"
error={errorMessage}
helperText={errorMessage ? "Please enter a message." : ""}
/>
<br /><br />
<div className={classes.center}>
<Button type="submit" variant="contained" size="large" className={classes.button}>
Submit
</Button>
</div>
</form>
</div>
</Grid>
<Grid item xs={1}></Grid>
</Grid>
)
}
export default Contact;
ContactStyles.jsx ：
import { makeStyles } from '@material-ui/styles';
const ContactStyles = makeStyles((theme) => ({
root: {
background: theme.palette.primary.dark
},
title: {
textAlign: "center",
color: theme.palette.secondary.dark
},
formContainer: {
height: "78vh",
position: "relative"
},
form: {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-100%, -50%)"
},
input: {
width: "200%",
fontWeight: "600",
'& label.Mui-focused': {
color: theme.palette.secondary.dark,
},
'& .MuiInput-underline:after': {
borderBottomColor: theme.palette.secondary.dark,
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: '#0644A3',
},
'&:hover fieldset': {
borderColor: theme.palette.secondary.dark,
},
'&.Mui-focused fieldset': {
borderColor: theme.palette.secondary.dark,
},
},
},
center: {
display: "flex",
justifyContent: "center",
width: "200%"
},
button: {
backgroundColor: "#0644A3",
color: "#FFFFFF",
borderRadius: 20,
marginRight: "2%",
textTransform: "none",
"&:hover": {
transition: "0.3s",
color: "#0644A3",
backgroundColor: "#FFFFFF",
border: "1px solid #0644A3",
}
},
contact: {
textDecoration: "none",
color: "#000000",
"&:hover": {
transition: "0.3s",
color: "#b5befa"
}
},
spacing: {
display: "flex",
alignItems: "center"
}
}))
export default ContactStyles;
1 个解决方案
解决方案1
1 2021-12-28 21:16:47
我尝试为您创建一个测试版，使用您链接的视频作为参考
仅使用 HTML 和 CSS ...
这里的技巧是创建一个 Extra Div 作为父级，因此我们可以将 label 和输入放在里面。
现在将父级设置为position: relative; 所以 label 将是absolute的
现在成功地我们可以使用 TOP、LEFT、RIGHT、BOTTOM 就是这样（将 label 定位为占位符）
我把逻辑放在这里.input-container input:focus~label
* { --input-height: 3rem; } section { height: 100vh; width: 100vw; display: grid; place-content: center; }.input-container input { height: var(--input-height); width: 80vw; font-size: 2rem; }.input-container { position: relative; display: grid; place-items: center start; }.input-container label { position: absolute; left: 1rem; font-size: 1.5rem; color: rgb(90, 90, 90); background-color: white; transition-duration: 0.5s; }.input-container input:focus~label { position: absolute; font-size: 0.7rem; top: -0.6rem; padding: 0.2em; left: 0.5rem; color: rgb(0, 81, 255); background-color: white; transition-duration: 0.2s; z-index: 2; }
<,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>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <section> <form action=""> <div class="input-container"> <input type="text" name="" id="my-input"> <label for="my-input">hello world</label> </div> </form> </section> </body> </html>
我如何创建一个固定的按钮，当使用HTML和CSS单击该按钮时会打开一个联系表单？
[英]How do I create a fixed button which opens a contact form when clicked using HTML & CSS?
3 级 Btec 编程课程 java 脚本在 html 和 css 网站中的联系表上没有得到响应
[英]Level 3 Btec programming course java script not getting response on contact form in html and css website
HTML5，CSS3，PHP联系人表格未发送信息+添加必填字段
[英]HTML5, CSS3, PHP contact form not sending info + add required fields
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.