I've created a Netlify form on my GatsbyJS site. The form itself works just fine. However, I am having issues changing the subject of my form. I have followed the instructions found in the Netlify forms documentation. In the documentation it states:
"[...] add a subject field to your form, and the value of that field will be used for the notification email subject. This field does not need to be visible to your users."
I am using a hidden subject field with the value of my subject in order to set subject of my form:
<input type="hidden" name="subject" value="My subject" />
I am receiving submission from the form but the subject is not taking effect. Any clues on what I am missing ??
After doing some research I found a error in my code:
Failed form propType: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.
so I changed value to be defaultValue instead:
<input type="hidden" name="subject" defaultValue="My subject" />
However, this doesn't seem to solve my issue. Same result as before: I am receiving the form, but subject doesn't seem to take effect.
Been going through Netlify forms debugging guide, but haven't been able to find anything that solves issue. Also tried using HTML to React parser but that didn't do anything either.
The form itselves I am using:
<form
name="contact"
method="POST"
data-netlify="true"
className="hero-form"
data-netlify-honeypot="bot-field"
>
<input type="hidden" name="form-name" value="contact" />
<input type="hidden" name="bot-field" />
<input type="hidden" name="subject" value="My subject" />
<p>
<input type="text" name="name" placeholder="Dit navn" />
</p>
<p>
<input type="email" name="email" placeholder="Din email" />
</p>
<p>
<input type="phone" name="phone" placeholder="Dit tlf. nr." />
</p>
<p>
<textarea
name="message"
placeholder="Skriv evt. hvad det handler om"
rows="5"
></textarea>
</p>
<p>
<button type="submit">Send</button>
</p>
</form>
You can customize the subject of emails by including a subject field.
HTML:
<form
...
data-netlify="true"
data-netlify-honeypot="bot-field"
>
...
<input type="hidden" name="subject" value="Subject to be replaced..."/>
...
</form>
JavaScript:
fetch('/', {
method: 'POST',
headers: { ‘Content-Type’: 'application/x-www-form-urlencoded' },
body: encode({
'form-name': form.getAttribute('name'),
'subject': 'New message',
…dataForm,
}),
})
Reference: https://community.netlify.com/t/custom-subject-on-forms-not-working/13564
Related
Im new to this plugin and could not find any documentation regarding my question.
I want to simply apply a value to the textarea. I started by giving it an id, but there are multiple html components that make up this textarea, ad more that ons instance of the id I added.
The value I enter gets saved, but when I reopen the modal, its suppose to load the text that was saved for that specific area.
<TextField
className="bd_textarea"
id={ `tt_description_text outlined-multiline-static`}
label="Pain description"
multiline
rows={5}
onBlur={ (f)=>(this.textOnBlur({id:answeringPainSpot.spotId, value:f.target.value, doc_name:answeringPainSpot.doc_name})) }
/>
Here are my attempts on both class and id and none worked.
$(".bd_textarea").val(spot_text);
$(".bd_textarea").next().find('textarea').eq(0).val(spot_text);
$('.bd_textarea').find('textarea').val(spot_text);
$("#tt_description_text").val(spot_text);
$("#tt_description_text").next().find('textarea').eq(0).val(spot_text);
$('#tt_description_text').find('textarea').val(spot_text);
This is the code when renderd.
<p class="MuiTypography-root MuiTypography-body1" id="modal-modal-description" sx="[object Object]">
<div class="MuiFormControl-root MuiTextField-root bd_textarea">
<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated" data-shrink="false" for="tt_description_text outlined-multiline-static" id="tt_description_text outlined-multiline-static-label">Pain description</label>
<div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-multiline MuiInput-multiline">
<textarea aria-invalid="false" id="tt_description_text outlined-multiline-static" rows="5" class="MuiInputBase-input MuiInput-input MuiInputBase-inputMultiline MuiInput-inputMultiline"></textarea>
</div>
</div>
</p>
Can you try setting the value like this:
<textarea
className="form-control"
rows="4"
placeholder="Add a comment"
value={this.state.newComment}
onChange={(e) => {
this.setState({
newComment: e.target.value,
);
}}>
</textarea>
I have a react sign-up form. I want to set up an input (checkbox) that holds the value as some text - e.g:
<form onSubmit={this.validateStepTwo} id="registerForm">
<label htmlFor="short_bio">Tell the users a bit about yourself:</label>
<input type="textarea" name="short_bio" className="textarea-small"/>
<label htmlFor="bio_info">Tell the users who you are</label>
<input type="textarea" name="bio_info" className="textarea-large"/>
<label htmlFor="bio_exp">Tell the users what you did</label>
<input type="textarea" name="bio_exp" className="textarea-large"/>
<input type="checkbox" name="instructor" value="I want to be an instructor" />
<input type="submit" value="Register" className="submit"></input>
{this.state.errors !== null ? (
<h1 className="error">{this.state.errors}</h1>
) : ('')}
</form>
Where
<input type="checkbox" name="instructor" value="I want to be an instructor" />
should have a value of "I want to be an instructor" but it doesnt have anything.
I tried doing it like this:
<input ...>I want to be an instructor</input>
but that threw another error.
Is this a react thing or am i missing something in my code? Ive been on the computer for 13 hours so i wouldnt be surprised if i made a dumb mistake.
Checkbox input value is the one sent in the request and not the text that appears afterwards.
If you want it to be the text then do something like this
<input type="checkbox" name="instructor" value="instructor"> I want to be an instructor
Sometimes forms become very complicated and it is impossible to test every case manually after code changes.
I already have unit testing with karma on the project.
Is there any tools or best practices how to test AngularJS form validation with jasmine and karma?
For example how can I test such form with jasmine and karma automatically?
<form name="appForm" novalidate>
<div>
Username: <input type="text" ng-model="data.username" name="username" ng-maxlength="15" required />
</div>
<div>
Email: <input type="email" ng-model="data.email" name="email" required />
</div>
<div>
Age: <input type="number" ng-model="data.age" name="age" />
</div>
<div>
<button ng-click="submit()" ng-disabled="appForm.$invalid">Submit</button>
</div>
</form>
It depends on what you actually want to make sure when testing form validation.
If you want to be sure invalid form will not be submited, then it is one case. And I don't see problems with this case.
If you want to be sure that appropriate messages are displayed for invalid fields, then, for example, you can make a directive, that is aware of all your possible field restrictions ('required', 'ng-maxlength', 'url', etc.) and is responsible for displaying appropriate error messages. So you will need to create tests only for this directive.
Example:
<input type="text" ng-model="data.username" my-directive name="username" ng-maxlength="15" required />
myDirective is aware of required and ng-maxlength restrictions, that were put on the field, & it is responsible for displaying appropriate error messages for invalid state of the field.
In the following example, message is undefined when I display it in the controller after the event is fired. Why?
<form>
<input type="text" ng-model="message.Title" />
<textarea ng-model="message.Content"></textarea>
<input type="submit" value="Send Message" ng-click="sendMessage(message)" />
</form>
Controller:
$scope.sendMessage = function(message) {
console.log(message);
}
My code seems identical to the documentation here except my controller manages the entire "page" not just the form.
Wow nevermind, apparently when you submit with blank values it doesn't even create the object.
I see you've found your problem, but I'd like to propose a solution to prevent your problem anyway:
<form name="messageForm" ng-submit="sendMessage(message)">
<input type="text" ng-model="message.Title" required/>
<span ng-show="messageForm.title.$error.required && messageForm.title.$dirty">required</span><br/>
<textarea ng-model="message.Content"></textarea>
<input type="submit" value="Send Message" ng-disabled="messageForm.$invalid" />
</form>
The above will make the Title required, display an error message, and disable your submit button if the form isn't valid.
I have already done autologin to roundcube via the following script
<form name="webmail" action="http://localhost/roundcube_mail/" method="post">
<div class="info" style="color:#f00;display:none"></div>
<input name="_action" id="_action"value="login" type="hidden" />
<input name="_timezone" id="_timezone" value="_default_" type="hidden" />
<input name="ajax" id="ajax" value="1" type="hidden" />
User <input name="_user" id="_user" type="text" value="anupam#excoflare.com"/><br>
Pass <input name="_pass" id="_pass"type="password" value="anupam123"/><br>
<input type="submit" >
</form>
it will work correctly.But i want to auto login roundcubemail via java script with window.open method for my p
The problem is that you want do do a POST request instead of a GET request. This might help you:
JavaScript post request like a form submit