I am using React Form to create a contact form in a basic React landing page and I want, when the user presses submit, the data to be sent to a specific email address (e.g. info#info.com). I am soory if this is a rookie question but I cannot seem to find the answer!
//the state
constructor(props) {
super(props);
//this.handleSubmit = this.handleSubmit.bind(this);
this.state = {};
}
//the form
<Form onSubmit={submittedValues => this.setState( { submittedValues } )}>
{ formApi => (
<form onSubmit={formApi.submitForm} id="form2">
<label htmlFor="firstName">First name</label>
<Text field="firstName" id="firstName" />
<label htmlFor="lastName">Last name</label>
<Text field="lastName" id="lastName" />
<label htmlFor="email">Email"</label>
<Text field="email" id="email" />
<label htmlFor="subject">Subject</label>
<Text field="subject" id="subject" />
<label htmlFor="message">Message</label>
<TextArea field="message" id="message" />
<button type="submit" className="mb-4 btn btn-primary">Submit</button>
</form>
)}
</Form>
You can do this by doing following steps:
First of all you need a script on backend (server side) which would send an email whatever data you pass it.
Second, you need to send an Ajax Request to that script on server side and pass all the data you need to send through Email.
If you are using PHP on server side you can use PHP's mail function or you can use any library of your choice.
Related
I have made a simple contact form that takes in a name, email, and text box.
The form has all the necessary elements for Netlify to detect such as data-netlify="true" and data-netlify-honeypot="bot-field". Everything else seems to be following the conventions explained by the Netlify/React form blogs.
TestContactForm.component.jsx
import React, { useState } from "react"
const TestContactForm = () => {
const [formInput, setFormInput] = useState({
name: "",
email: "",
message: "",
})
const onChange = e => {
setFormInput({
...formInput,
[e.target.name]: e.target.value,
})
}
return (
<form
name="contact"
method="post"
action="/thanks"
data-netlify="true"
data-netlify-honeypot="bot-field"
>
<input type="hidden" name="form-name" value="contact" />
<div hidden>
<label>
Don’t fill this out: <input name="bot-field" />
</label>
</div>
<div>
<label htmlFor="name">Hello, my name is</label>
<input
name="name"
id="name"
type="text"
placeholder="Jane Doe"
required
value={formInput.name}
onChange={onChange}
/>
</div>
<div>
<label htmlFor="email">Hello, my name is</label>
<input
name="email"
id="email"
type="text"
placeholder="janedoe#work.com"
required
value={formInput.email}
onChange={onChange}
/>
</div>
<div>
<label htmlFor="message">I want to</label>
<textarea
name="message"
id="message"
rows="5"
maxLength="250"
placeholder="briefly share an idea about..."
required
value={formInput.message}
onChange={onChange}
></textarea>
</div>
<button type="submit">SEND</button>
</form>
)
}
export default TestContactForm
I have used practically the same code for forms on other websites hosted on Netlify, and they work fine.
/, /thanks, and /404 are all inside the same pages folder within src.
I am not sure what went wrong with this one.
Can someone point out where the error here is spawning from?
Thanks!
Solution
Turns out the cause of the error has nothing to do with Netlify or Gatsby.
It has to do with the animation library I was using, which was react-spring.
I was animating the fade in/out animation for the contact card using the useTransition hook, which defaults to false at the start. This effectively takes the contact card out of the DOM element, so Netlify was not able to detect it. As a solution, I switched to using the useSpring hook, which hides the contact card with opacity: 0 and pointer-events: none instead.
This solved the issue.
I am not web developer, but I have a task to add autocomplete function for an input box. Please treat me as a very beginner.
<div>
<label id="email_label" for="send_email" style="padding-right:5px">
Send Email:
</label>
<input id="send_email" type="text" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" onclick="requestAck()">
Request
</button>
</div>
requestAck() is a javascript function sending a email to address given by user (i.e. address in <input >). I am trying to add a flag in <input autocomplete="on" ...>, but it doesn't work. Perhaps because it's not in a <form></form> environment.
Could you help me to modify this code adding autocomplete (from cache) without changing other functions. Many thanks!
Try setting the property name="email" on the input tag, without that set the browser doesn't know what's supposed to autocomplete the field with :)
protip: I warmly suggest you to set the type of the input to email with type="email" instead of text, it's not required but it will help validating the input!
check this code:
<div>
<label id="email_label" for="send_email" style="paddingright:5px">Send Email:</label>
<input id="send_email" type="email" name="email" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" onclick="requestAck()">Request</button>
</div>
EDIT: Final solution discussed in comments
<form onsubmit="submitForm(event)">
<label id="email_label" for="send_email" style="padding-right:5px">Send Email:</label>
<input id="send_email" type="email" autocomplete="email" name="email" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" type="submit">Request</button>
</form>
<script>
function submitForm(e) {
e.preventDefault(); // this prevents the page from reloading
requestAck();
}
//dummy function so the javascript won't crash:
function requestAck() {}
</script>
Working example: https://codesandbox.io/s/focused-cray-ubkw4
I have a form outlined in my app.component.html file as below, when I click the Send button to submit the form I get an error in my Javascript saying that the chatForm is undefined.
I've had a look at a few different tutorials and I can't seem to find why this function is not operating as I expect. What am I doing wrong?
Also when I'm submitting the form how do I get the value of the input that is present in my form? I have a name of message defined on the form, how can I use this variable?
app.component.html
<div class="container">
<h2>Message Form</h2>
<form (ngSubmit)="sendMessage(chatForm)" #chatForm="ngForm">
<div>
<label for="message">Message</label>
<input type="text" id="message" name="message" [(ngModel)]="message" required>
</div>
<button type="submit" id="sendmessage" [disabled]="!chatForm.valid">
Send
</button>
</form>
</div>
app.component.ts
public sendMessage(form): void {
console.log("Message sent: " + form.value);
}
You should get the data by using
form.value.message
My example look like this
<form (ngSubmit)="onSubmit(registerForm)" #registerForm="ngForm">
<div class="form-group">
<label for="UserName">Your email</label>
<input
type="text"
ngModel
class="form-control"
id="UserName"
name="UserName"
required
/>
Then in my component I can access to the form data like this
onSubmit(formValue: NgForm) {
const registerModel: AccountModel = {
UserName: formValue.value.UserName,
Password: formValue.value.Password
};
I'm using react, redux and react-router in my application. When I submit login and password I post axios request to my backend and then update my user after I get a response. This works fine, but my problem is that after i press Enter or click "Login" my url change to something like this:
http://localhost:3000/?email=example123%40gmail.com&password=pass123
Is there any way to prevent url from changing or to clear it after submit?
Form:
<form onSubmit={this.login}>
<div className="loginForm">
<label> Email</label>
<input type="text" name="email" onChange={this.handleChange} />
<div className="loginError">{this.state.emailErr}</div>
<label>Password</label>
<input type="password" name="password" onChange={this.handleChange} />
<div className="loginError">{this.state.pswdErr}</div>
<span style={{paddingTop: "30px"}}/>
<button style={{width: "100%"}} type="submit" >Login </button>
</div>
</form>
Your form is trying to submit itself by default.
Add this to your login method:
login(event) {
event.preventDefault();
}
I have login form in my app. Currrently I have a Login button to login. When this login button is clicked, I send the username and password values to the backend api which in turn generates a token and allow the user to move to next screen if authenticated. I want the same functionality when I press enter key. I have looked to many sources but I need a secure way. How can I do it. This is my form component
render(){
return (
<div className="LoginPage">
<div className="login-page">
<div className="form">
<form className="login-form">
<input id="username" type="username" placeholder="username"/>
<input id="password" type="password" placeholder="password"/>
<p className="message">Not registered? Request Username and Password</p>
</form>
<button onClick={this.handleLoginButtonClick.bind(this)}>login</button>
</div>
</div>
</div>
);
}
Use the onKeyDown event with input fields, and in this method check the keycode of the key pressed by the user, Key code of Enter key is 13, so whenever he pressed enter, call the same method that you are calling on button click, Write it like this:
render(){
return (
<div className="LoginPage">
<div className="login-page">
<div className="form">
<form className="login-form">
<input id="username" type="username" placeholder="username" onKeyDown={this.onKeyDown.bind(this)}/>
<input id="password" type="password" placeholder="password" onKeyDown={this.onKeyDown.bind(this)}/>
<p className="message">Not registered? Request Username and Password</p>
</form>
<button onClick={this.handleLoginButtonClick.bind(this)}>login</button>
</div>
</div>
</div>
);
}
onKeyDown(e){
if(e.keyCode == 13){
/*write the logic here*/
}
}
You need to use ref to focus the field if user left them blank.
Check jsfiddle for working example with focusing the field: https://jsfiddle.net/ygytaj6s/