Netlify form is not hidden on the web - reactjs

I 've created a netlify contact form and I followed step by step points from here: https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/
I've added this to the index.html file as they want:
<form name="contact" netlify netlify-honeypot="bot-field" hidden>
Everything is fine when I deploy a web and the contact form does work but the contact form from public index.html is also on the web. I see 2 forms instead of only one. Why is not hidden like is asked to be?
The console is clear.

This worked for me:
<form name="contact-form" netlify netlify-honeypot="bot-field" style="display: none;">

Related

.well-known not showing on production

I'm trying to create a deeplink on my website and one of the ways is by creating an assetslinks.json with a few informations about the connection. The problem is that I've created my .well-known following a few docs and on my localhost, the file shows perfectly on my web browser but as soon as I deploy it to my domain(which is a github page - I'm not sure if this is relevant) it does not show anymore.
I also tried adding the following in my index.html:
<link rel="assetlinks.json file" href="%PUBLIC_URL%/.well-known/assetlinks.json" />
<link href="/.well-known/assetslinks.json" >
<link rel="apple-app-site-association file" href="%PUBLIC_URL%/.well-known/apple-app-site-association" />
I've tried removing the dot in the fodler ".well-known" and then, the json file shows on my domain, that's not the way it should be implemented though, so I need it to work with the ".".
Does anyone have any idea on why this is happening?

Netlify doesn't display all website pages

I am using Netlify to deploy a website. It was built with ReactJS and locally everything works. After deploying it on Netlify only the landing page works.
The website is a simple static website for hosting my portfolio.
The main website is www.myname.com while projects are located on www.myname.com/project-name-case-study
Anything under www.myname.com/project-name-case-study leads to a "Page Not Found" screen. I'm just not sure where to even start here. I'm new to website deployment
Just figured it out. The issue was specifically related to React-Router. This freeCodeCamp article shows how to easily fix it.
As this article mentioned:
"Create a new file with the name _redirects inside the public folder of our project and add the following contents inside it:"
/* /index.html 200

Why won't my Hugo site display when deploying to Netlify?

Locally, I can view my site easily and all theme changes.
However, once the site is deployed to Netlify, all I am greeted with is a blank white screen.
I tried toggling baseURL configurations to no avail. However, if I rename my _index.md file to index.md in the /content folder the contents of that file will display when deployed via Netlify.
There are no build errors in Netlify or locally.
My working files can be seen at the following GitHub repository.
Explanation Summary: The _index.md file at the root of your content directory is using your themes/gwynn/layouts/index.html template, but you are not telling it to display any content or data from your frontmatter.
themes/gwynn/layouts/index.html code:
<!DOCTYPE html>
<html>
<body>
{{ range first 10 .Data.Pages }}
<h1><a href={{ .Permalink }}>{{ .Title }}</a></h1>
{{ end }}
</body>
</html>
Nothing is showing up because you are displaying only the pages in your site, but both have draft: true set in the frontmatter of the pages in post.
Solution to show Home page Title:
themes/gwynn/layouts/index.html
<!DOCTYPE html>
<html>
<head>
<title>{{ .Title }}</title>
</head>
<body>
<h1>{{ .Title }}</h1>
{{ range first 10 .Data.Pages }}
<h1><a href={{ .Permalink }}>{{ .Title }}</a></h1>
{{ end }}
</body>
</html>
To show the page links, you can set draft: false within content/post/first.md and content/post/second.md
Netlify doesn’t automatically know that you have a Hugo site. In the app.netlify.com interface, navigate to Site settings, then “Build & deploy” in the left-hand navigation.
In the Build command field, type hugo, and in the Publish directory, type public. I think this should be enough.
(If not, here’s a more detailed config from the Hugo site. That strikes me as too complicated, though.)
Going further, and this is optional, I prefer to run the hugo command locally, which generates the whole site, and the resulting public directory becomes part of my repo. In that case, I leave the above Build command: field blank, but keep the Publish directory: public field.

using ng-module giving cross domain error

I have a simple html and on that page i am trying to include some other html page for user detail. but some how the page is not being included.
On index page i have following code
<form>
<input type="Search" placeHolder="Enter Name" ng-model="user"/><br>
<input type="Button" value="Search" ng-click="Search()"/>
<div ng-include src="'userDetail.html'">
</div>
</form>
I have tried following.
<ng-include src="'userDetail.html'"></ng-include>
<div ng-include="'userDetail.html'"></div>
<div ng-include src="'userDetail.html'"></div>
The error code I am getting is
Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
Please see attached screenshot for further details.
The reason for the error is right in its description. You need to run your app in any of the listed protocols (for local development that's http or https 99,9% of the time). Instead you are running it as a file on the disk (notice the file:// in your URL).
You must use a local HTTP server (like Apache or IIS) or use a IDE with build-in server (I recommend Brackets for its great preview function) to serve your content to be able to properly test the application locally.

hoh can I view angular website in localhost

maybe a stupid question but I don't succedd to view angular website as local host.
this is the website i downloaded : https://github.com/kenyee/angularjs-cart
i see only the title ang get error in console :
"XMLHttpRequest cannot load file:///C:/Users/--name--/Dropbox/angularjs-cart-master/angularjs-cart-master/ShoppingCart/partials/store.htm. Received an invalid response. Origin 'null' is therefore not allowed access. "
thanks for any help!
If the url says similar to file:///C:/Users/... its not running on localhost.. its just open as a file.
It needs to be ran from a 'server'..
If using Windows add the folder as a site on IIS, on Mac use something like MAMP..
Or open the folder in an IDE (Editor) that runs a server automatically for you.. such as Visual Studio or Brackets.
If you can let me know which your using I can add more info if you need it.
UPDATED: although it's true a raw angular page is client side and doesn't need to run from a server.. if it's pulling in other files from the local file system. (i.e. scripts / css / templates / partials) it needs to be running on a server as the browser doesn't have access to just pull in files from the file system unless they are served via server.. (for obvious security reasons)
You should have no issues viewing an AngularJS website in localhost.
AngularJS is client side.
EDIT: I downloaded and checked all of the pages for you. It loads up nice on my side. Just remember since AngularJS is client side you don't need a server. Instead of running it on localhost (I assume XAMPP or something is what your using), just right click + open with a browser.
Remember to open the main html (default.html) first, and perhaps read some html/css/js docs before jumping strait into AngularJS!
Good luck!
If You have Xampp installed on your system then put ShoppingCart folder in
xampp/htdocs folder`
After This hit the url
[http://localhost/ShoppingCart/#].
It will work as this application on my system.
You definitely need a local server (WAMP on Windows or Lamp on Linux) to run Angular application as David Beech suggests. In my case I couldn't figure out why this simple Angular check form code from Plunk wouldn't work properly on my computer (it didn't seem to lead the css code).
<body ng-app="formExample">
<div ng-controller="ExampleController">
<form novalidate class="css-form">
Name: <input type="text" ng-model="user.name" required /><br />
E-mail: <input type="email" ng-model="user.email" required /><br />
Telephone: <input type="number" ng-model="user.number" required /><br />
<input type="submit" ng-click="update(user)" value="Save" />
</form>
</div>
<style type="text/css">
.css-form input.ng-invalid.ng-touched {
background-color: #FA787E;
}
.css-form input.ng-valid.ng-touched {
background-color: #78FA89;
}
</style>
<script>
angular.module('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.master = {};
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}]);
</script>
</body>
I did my search on google, found this great example of Single Page Angular App where it says you need some local environment, otherwise Angular routing won't work. I fired my Wamp server, put the code to "www" directory, and lo and behold, the angular triggered css worked just fine.

Resources