极客教程使用ReactJS和Tailwind的联系我们表单
联系我们表单是组织网站的重要组成部分。它帮助用户与组织团队联系并分享他们的观点。联系表单可以用于各种目的，如提供建议、提问和提供反馈。
最终的功能将如下所示：
联系我们页面的基本特点
- 表单： 包含用户必须填写的所有必要细节，以便提交查询
- 发送按钮： 检查所有必填字段是否填写完毕，然后提交查询
- 输入框： 一组用户输入详细信息和查询/建议的框
- 欢迎横幅： 用于向用户介绍页面
联系我们页面的优势
- 提供直接联系组织的方式
- 更容易提供建议/反馈
- 公司了解用户对其产品的感受
前提条件：
- React
- Tailwind
创建表单的步骤：
步骤1： 使用命令设置项目
npx create-react-app <<Project_Name>>
步骤2： 使用命令导航到文件夹
cd <<Project_Name>>
步骤3： : 使用命令安装所需的依赖项
npm install -D tailwindcss
步骤4 : 使用命令创建tailwind配置文件
npx tailwindcss init
步骤5 ：按照以下方式重写 tailwind.config.js 文件
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
步骤6 : 在src目录下创建一个名为components的文件夹，并创建Banner.js、Contact.js两个文件
项目结构:
在package.json中更新的依赖项将显示如下：
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
"devDependencies": {
"tailwindcss": "^3.3.3"
}
示例： 将以下代码写入各个文件中：
- App.js: 此文件导入组件并将其呈现在屏幕上
- Banner.js: 此组件显示欢迎屏幕
- Contact.js: 此组件包含用于收集评论/建议的表单
// App.js
import './App.css';
import Contact from './components/Contact';
import Banner from './components/Banner';
function App() {
return (
<div className="App">
<Banner/>
<Contact/>
</div>
);
}
export default App;
Banner.js
// Banner.js
export default function Banner() {
return (
<div className="h-24 w-full border-2 flex items-center
justify-center bg-emerald-500 text-white">
<p className="text-2xl"> Welcome to GeeksforGeeks Contact Page!!!</p>
</div>
)
}
Contact.js
// Contact.js
export default function Contact() {
return (
<div className="py-2 px-4 mx-auto max-w-screen-md">
<h2 className="mb-4 text-4xl font-extrabold
text-center text-gray-900">
Contact Us
</h2>
<p className="mb-4 font-light text-left
text-gray-500 sm:text-xl">
Got a issue? Want to send feedback?
Need details about our Courses? Let us know.
</p>
<form action="#">
<div className="flex flex-row">
<div className="w-1/2 pr-2 ">
<label for="firstName"
className="block my-2 text-left
text-sm font-medium text-gray-900">
First Name
</label>
<input type="text"
className="shadow-sm bg-gray-50 border
border-gray-300 text-gray-900
text-sm rounded-lg block w-full p-2.5"
placeholder="Enter First Name"
required/>
</div>
<div className="w-1/2 pl-2">
<label for="firstName"
className="block my-2 text-left text-sm
font-medium text-gray-900">
Last Name
</label>
<input type="text"
className="shadow-sm bg-gray-50 border
border-gray-300 text-gray-900
text-sm rounded-lg block w-full p-2.5"
placeholder="Enter Last Name"/>
</div>
</div>
<div>
<label for="email"
className="block my-2 text-left text-sm
font-medium text-gray-900">
Your email
</label>
<input type="email"
className="shadow-sm bg-gray-50 border
border-gray-300 text-gray-900
text-sm rounded-lg block w-full p-2.5"
placeholder="abc@geeksforgeeks.org"
required />
</div>
<div>
<label for="subject"
className="block my-2 text-left
text-sm font-medium text-gray-900">
Subject
</label>
<input type="text"
className="block p-3 w-full text-sm
text-gray-900 bg-gray-50 rounded-lg
border border-gray-300 shadow-sm "
placeholder="What issue/suggestion do you have?"
required />
</div>
<div >
<label for="message"
className="block my-2 text-left
text-sm font-medium text-gray-900 ">
Your message
</label>
<textarea rows="6"
className="block p-2.5 w-full text-sm
text-gray-900 bg-gray-50 rounded-lg
shadow-sm border border-gray-300 "
placeholder="Query/Suggestion..."/>
</div>
<button type="submit"
className="mt-2 p-2 float-right text-white
rounded-lg border-green-600
bg-green-600 hover:scale-105">
Send message
</button>
</form>
</div>
)
}
CSS
/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
运行应用程序的步骤：
步骤 1： 在项目目录的终端中输入以下命令
npm start
步骤2： 在您的网络浏览器中打开以下链接
http://localhost:3000/
输出:
