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.
Related
I am using formspree for a contact sheet on my site, and I am wondering if there is a way to use javascript to block profanity from being sent on the sheet, or a way to block specific words at all. The code I have is super basic so far:
<label>
Your name:
<input type="name" name="Name">
</label>
<label>
Your email:
<input type="text" name="Email">
</label>
<label>
Your message:
<textarea name="message"></textarea>
</label>
<button type="submit">Send</button>
Ideally I would want to be able to block profanity on the Your Message area. I know you can do this on formspree if you have a premium account but I am wondering if there's anyway I can do it within the code. Thank you!
You can make JS code which will work onchange of your message, if last symbol isn't letter (word is finished)read it and if it find some bad word delete it. Also you can use JQuery or write that yourself.
Also JQuery word filter
Jquery page with that function
I gave it a go using Vanilla JavaScript, but I'm not too sure if this is what you wanted. Either way, hope it helps:
<!DOCTYPE html>
<html>
<body>
<label>
Your name:
<input type="name" name="Name">
</label>
<label>
Your email:
<input type="text" name="Email">
</label>
<label>
Your message:
<textarea id="msg" name="message" ></textarea>
</label>
<button onclick="check()" type="submit">Send</button>
<script>
function check() {
const black_list = ["Pineapple Pizza"];
var description = document.getElementById("msg").value;
console.log(description);
let profane = black_list.some(word => description.includes(word));
console.log(profane);
}
</script>
</body>
</html>
I made a VUE component button and tried to associate a v-on:click function, but it didn't work. Then I substituted it for an HTML button and it did work. I need to understand why.
I made this button component, which was loading ok on it's parent
<template>
<button v-on:click="action">{{ name }}</button>
</template>
<script>
export default {
name: "Appbutton",
data: function() {
return {};
},
props: {
name: String,
}
};
</script>
The code didn't fail when loaded by its parent:
<template>
<form class="login-form" action>
<label for="email">Register E-mail</label>
<input type="email" name="email" v-model="email" />
<label for="password">Register Password</label>
<input type="text" name="password" v-model="password" />
<div class="button-group">
<AppButton action="register" name="Login" />
<AppButton action="register" name="Login with Google" />
</div>
</form>
</template>
<script>
import AppButton from "#/components/AppButton";
export default {
name: "RegisterForm",
data() {
return {
email: "",
password: "",
show: true
};
},
methods: {
register: function(e) {
console.log("registered");
e.preventDefault();
}
},
components: {
AppButton
}
};
</script>
When pressed the "Login" button, it reloaded the page with the parameters email and password in the URL but the console.log was not displayed nor triggered anywhere. I tried sending the "register" function as a prop to the AppButton.vue but it had the same behaviour.
It only worked when I substituted the button component for a regular HTML button. Now it works as expected.
I just need to understand why is this behaviour, and how should I have to solve it?
Thanx in advance.
First of all you have to add action as a prop to your AppButton, then you need to bind your click event using :click="register".
I made a sandbox with an example: https://codesandbox.io/embed/vue-button-action-c5kun
Happens because of form submit is not prevented.
Put #submit.prevent on form tag
<form class="login-form" action #submit.prevent>
<label for="email">Register E-mail</label>
<input type="email" name="email" v-model="email" />
<label for="password">Register Password</label>
<input type="text" name="password" v-model="password" />
<div class="button-group">
<AppButton action="register" name="Login" />
<AppButton action="register" name="Login with Google" />
</div>
</form>
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 am trying to validate some text-fields using the required keyword, yet nothing is working?
How do I create validation using the required keyword.
Here is my code:
<div id="Name" class="tabcontent">
<form>
<div class="nameDiv">
Title: <input type="text" name="Title" title="Title" id="TitleTransfer">
</div>
<br>
<div class="addressDiv">
Name: <input type="text" name="name" id="NameTransfer" required />
<span class="asterisk"></span>
</div>
<br>
<div class="emailDiv">
Surname:
<input type="text" name="surname" id="LastNameTransfer" required />
<span class="asterisk"></span>
</div>
<br>
<div class="numberDiv">
Email Address:
<input type="text" name="email Address" id="EmailTransfer" required />
<span class="asterisk"></span>
</div>
<br>
<div class="numberDiv">
Phone number:
<input type="text" name="Phone number" id="NumberTransfer">
</div>
<button id="save-btnOne" onclick="moveContentOne()">Save</button>
</form>
</div>
the required attributes tells the browser that the form field must contain something, this is a weak validation and can be supressed when hooking the form submit through javascript (keep in mind that you do not have delivered any kind of javascript source here that might be in the orbit of the form).
I assume that the moveContentOne() hooking the onclick-event is the only javascript attached. Considering this the onSubmit-event remains untouched and will be also fired alongside of your onClick intervention. You should prefer to hook onSubmit for forms of that kind to apply custom validation, but that might detach the browser's default behavior for form validation (including the required-attachment to fields).
You might take a look at this guide: Form data validation
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
Use this type of validation.
This works for
<form name="myForm" onsubmit="validateForm()">
<input type="text" name="fname" />
</form>
Some browsers do not support required field.
Change the code to your need.
I hope it helps you.
I have a from like this:
With the following code:
<form onKeyPress={this.login.bind(this)}>
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button type="button" onClick={this.login.bind(this)}>Log In</button>
</form>
While I have the login() method like below:
login(e){
if((e.type==='keypress' && e.which===13) || e.type==='click'){
//Do login operations:
this.props.store.login()//the method inside MobX store
}
}
On following scenarios, there is no errors and I can login:
I click on the login button with mouse
I press Enter while the login button is NOT focused
But the following 3rd scenario, gives me errors due to the login operations being called twice:
When I press Enter while login button IS focused (for example login button is focused by pressing tab key)
I wonder what is the best practice by which I can avoid the errors of 3rd scenario. I looked through other related SO questions but I couldn't figure out the best practice.
I forgot to mention I'm using ReactJS with MobX.
Solved the problem by moving onKeyPress attribute from <form> tag to text-type <input> tags:
<form>
<input type="text" placeholder="username" onKeyPress={this.login.bind(this)}/>
<input type="password" placeholder="password" onKeyPress={this.login.bind(this)}/>
<button type="button" onClick={this.login.bind(this)}>Log In</button>
</form>
You could also use the onSubmit event if it suits your use case better:
Example (JS Bin)
class App extends Component {
login = (e) => {
e.preventDefault();
console.log('login');
}
render() {
return (
<form onSubmit={this.login}>
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<button type="submit">Log In</button>
</form>
);
}
}