I added a google form, customized according to website's design, following the instructions from here. and used this package to post data to google form. It was working in first attempt both at local system and google bucket online, however i made few changes to the form (adding more input fields etc.) and it stopped working even when I reverted to when both the form and code were working, it does not work anymore..
I assume there maybe something wrong with the package or something, can anyone point me in the right direction or suggest an alternative to post to google form? thanks!
here is the form
<form className="uk-form contact-form" method="POST" action="LINK TO FORM" onsubmit="return window.submitGoogleForm(this);" >
// got the action link by doing inspect element on form page
<div className="uk-grid" data-uk-grid-margin="">
<div className="uk-width-medium-1-2 uk-row-first">
<div className="form-field">
<input type="text" placeholder="Your Name" name="entry.529281403" required="" />
</div>
<div className="form-field">
<input type="email" name="emailAddress" placeholder="Email Address" required="" />
</div>
<div className="form-field">
<input type="text" name="entry.550890690" placeholder="Subject" />
</div>
</div>
<div className="uk-width-medium-1-2">
<div className="form-field">
<textarea placeholder="Your Message Here" name="entry.699777486" rows="9" required></textarea>
</div>
</div>
</div>
<div className="form-button mt30">
<button className="readon pill" >Send</button>
</div>
</form>
For form elements like options and select, the google form will have a hidden tag at the end of the form. Sometimes you will have to select an option in the form to see that hidden tag. Copy the name value from that tag to all the options and selects.
Related
The Netlify site name is: https://southsidepaint-prototype.netlify.app
I am using React with Gatsby and Sass, all up to date with the latest versions.
I have a simple contact form on the contact page (’/contact’) that looks like this:
<form name="contact-form" method="POST" data-netlify="true" >
<input type="hidden" name="form-name" value="contact-form" />
<div className={ctSty.formGroup}>
<input name="name" type="text" placeholder="Name" required/>
</div>
<div className={ctSty.formGroup}>
<input name="email" type="email" placeholder="Email" required />
</div>
<div className={ctSty.formGroup}>
<input name="phone" type="tel" placeholder="Phone Number" required/>
</div>
<div className={ctSty.formGroup}>
<textarea name="message" placeholder="Write your message"></textarea>
</div>
<button type='submit' value="Submit">Send message</button>
</form>
Now this form above is submitting correctly, didn’t work with a honeypot or recaptcha but that’s ok. The problem is when I click to submit my other form which exists on a separate page (’/careers’), I receive no 404 errors, no warnings, nothing happens. I check the deploy log for warnings too, only had one warning: “warning undefined”; I’m not sure where this particular warning comes from but it existed before the forms were added, so I think that’s ok too. Netlify is able to see that I have a second form, I have the folders on my forms page but nothing is being submitted in spam or verified. I have scoured through the docs, videos and articles but cannot pin down a fix.
Things I have tried:
I have even reduced my second form down to three simple inputs, name, email and phone number and still the same result.
I have changed the name attribute in my form multiple times, cleared the cache on deploy.
changed the name from “form-name” in my
<input type="hidden" name="form-name" value="applicationsV2" />
Added an “onSubmit” to the form
<form name="applicationV2" method="POST" data-netlify="true" onSubmit="submit">
The second form’s code is below:
<form name="applicationV2" method="POST" data-netlify="true" onSubmit="submit">
<input type="hidden" name="form-name" value="applicationsV2" />
{/* FULL NAME */}
<div className={crSty.formGroup}>
<label for="name" required>
<span><CgAsterisk /></span> Full Name <br/>
<input name="Full_name" type="text" placeholder="e.g. Phillip Anthropy" required/>
</label>
</div>
{/* EMAIL ADRRESS */}
<div className={crSty.formGroup}>
<label for="email" required>
<span><CgAsterisk /></span> Email Address <br/>
<input name="Contact_email" type="email" placeholder="e.g. user#email.com" required />
</label>
</div>
{/* PHONE NUMBER */}
<div className={crSty.formGroup}>
<label for="phone" required>
<span><CgAsterisk /></span> Phone Number <br/>
<input name="Contact_phone" type="tel" placeholder="e.g. 555-0000" required/>
</label>
</div>
</form>
<div style={{textAlign:'center'}}>
<button type='submit' value="submit">SubmitApplication</button>
</div>
You have a typo in your second form (applicationV2). While in the form name appears applicationV2, in the value of the form-name field is applicationsV2. It should be:
<form name="applicationV2" method="POST" data-netlify="true" onSubmit="submit">
<input type="hidden" name="form-name" value="applicationV2" />
Keep in mind that with your previous snippet your form was in a kind of limbo because there wasn't a match between forms names so, the data was sent but never caught by any Netlify form. Fixing the typo should fix your issue too.
For further logs, check the Network tab in the inspector tools to see whats Netlify returning in the form response.
I'm new in AngulsrJS and I've got following code:
<form ng-if="editorCtrl.edit" class="form-horizontal" role="form" ng-submit="editorCtrl.saveEntry()">
<div class="form-group">
<div class="col-md-6" ng-repeat="(key,field) in editorCtrl.editEntry">
<label>{{key}}</label>
<input type="text" class="form-control" value={{field}} />
</div>
</div>
<!-- ng-model="editorCtrl.toSave[key]" ng-value="{{field}}" that part was in input attributes -->
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Update selected entry" ng-disabled="form.$invalid" class="btn btn-primary"/>
</div>
</div>
</form>
Now I need to obtain values from input fields. I tried to use ng-model="editorCtrl.toSave[key], but it's not working in a correct way.
Any suggestions how to resolve this situation ?
if you can consider no necesary the "toSave" object maybe you can use the 2-way data binding properly only using editEntry Object :
<input type="text" class="form-control" value={{field}} ng-model="editorCtrl.editEntry[key]"/>
In this way after a submit you will get editEntry with the fields modifieds (or not), here is an example
https://jsfiddle.net/pv8qrwty/1/
run the example and if you modified the fields after you press the submit button it will be displayed in your browser console
hope this help ! and sorry for my english !
I am having trouble displaying custom message upon validation in my AngularJS app.
Below is my code:
<div class="row">
<div class="input-field col s12">
<input id="description" rows="3" class="materialize-textarea no-pad-bot no-pad-top" ng-model="Description" ng-required="isValidationRequired()" ng-minlength="5"></input>
<span class="help-inline" ng-show="submitted && frm1.description.$error.required">Comments are required</span>
</div>
</div>
<input type="submit" class="white-text waves-effect btn" value="Enter" ng-click="submitted=true" />
The above works but the message displayed is "Please fill out this field". Which is not the message I specified. I want my own custom message displayed. I cannot find anything wrong with my code. Can anyone help point me in the right direction.
There are a few things wrong with your code.
Form isn't included, I am assuming you just didn't include that bit of code in this post.
You need to specify the name of the input.
So when doing frm1.description, it knows what description is.
Make sure the function isValidationRequired returns true
You need to include novalidate in the form tag
Here, I have a working example
<form novalidate name="frm1">
<div class="row">
<div class="input-field col s12">
<input name="description" id="description" rows="3" class="materialize-textarea no-pad-bot no-pad-top" ng-model="Description" ng-required="isValidationRequired()" ng-minlength="5"></input>
<div class="help-inline" ng-show="submitted && frm1.description.$error.required">Comments are required</div>
</div>
http://jsfiddle.net/mlhuff12/Lvc0u55v/4503/
Ur getting a message you did code? Sounds like a browser validation. Check your statement and add "novalidate" to it. I.e.
<form novalidate>
Maybe this helps...
I have a text field having an placeholder value.
I want to check what text it is holding.
Please help me regarding this issue.
Here is my code:
<div class="row form-group">
<div input-container placeholder="Zip Code" error="yourInfoForm.zipcode. $error">
<input fr-validate type="text" regex-value="regex.usZipCodes" name="fname" class="form-control border-radius-0" ng-maxlength="15" ng-model="yourInfo.zipcode" />
</div>
</div>
Try element.getAttribute('value').
You can get more info here:
https://github.com/angular/protractor/blob/master/docs/faq.md#the-result-of-gettext-from-an-input-element-is-always-empty
expect(element(by.css('[name="ffname"]')).getAttribute('value').getText()).toEqual('First name');
I'm working on a site where a user can submit several different kinds of forms. I would like to include the type of form submitted (basic, advanced, other). I've read that using hidden fields with AngularJS is possible, but not recommended. Rather than finding a hack to solve the problem, I'd prefer to do things right. What is the proper way to submit information that does not need to be displayed to the user but should be included with a submission?
Here's the HTML for the form:
<form name="myForm">
<div class="control-group">
<label>Name</label>
<input type="text" name="name">
</div>
<label>Description</label>
<textarea name="description"></textarea>
<button ng-click="editProject.save()" class="btn btn-primary">Save</button>
<!--{{formselection}}-->
</form>
If you use ng-model the hidden fields are in the object memory context, only show the data to the user fill.
HTML:
<form name="myForm">
<div class="control-group">
<label>Name</label>
<input type="text" name="name" ng-model="form.name">
</div>
<label>Description</label>
<textarea name="description" ng-model="form.description"></textarea>
<button ng-click="editProject.save(form)" class="btn btn-primary">Save</button> <!-- Pass the form to the method in controller-->
</form>
Controller:
$scope.form = {
hiddenField1: "anyValue",
hiddenField2: "anotherValue"
};
$scope.editProject = {save: function(form){
//http request given the form, this contain the name, description and the two hidden field
}}
http://plnkr.co/edit/fjnGc4Q4f8ZfwhupkOdR