I tried linking golang server to my html contact form and this is my folder structure The Image below is the folder structure.. The following is the server.go file:
package main
import (
"html/template"
"net/http"
)
type ContactDetails struct {
fName string
Email string
Telephone string
Subject string
Message string
}
func main() {
tmpl := template.Must(template.ParseFiles("contact.html"))
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
if r.Method != http.MethodPost {
tmpl.Execute(w, nil)
return
}
details := ContactDetails{
fName: r.FormValue("fName"),
Email: r.FormValue("email"),
Telephone: r.FormValue("telephone"),
Subject: r.FormValue("subject"),
Message: r.FormValue("message"),
}
// do something with details
_ = details
tmpl.Execute(w, struct{ Success bool }{true})
})
http.ListenAndServe(":8080", nil)
}
and the following is the contact.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- MDB icon -->
<link rel="icon" href="img/sacheal logo.ico" type="image/x-icon">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="css/mdb.min.css">
<!-- Your custom styles (optional) -->
<link rel="stylesheet" href="css/style.css">
<title>Sacheal Consult | Contact Us</title>
</head>
<body>
<header>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar">
<a class="navbar-brand" href="#"><img src="./img/sacheal logo.png" height="120px" width="120px" alt="logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto font-weight-bold">
<li class="nav-item">
<a class="nav-link" href="./index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./Service.html">Services</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="./contact.html">Contact <span class="sr-only">(current)</a>
</li>
</ul>
</div>
</nav>
<div class="view view-cont intro-2">
<div class="full-bg-img">
<div class="mask rgba-green-light flex-center">
<div class="container text-center white-text wow fadeInUp">
<div class=""></div>
<h2 class="font-weight-bold text-uppercase">Contact Us</h2>
<h5 class="text-white font-weight-bold" align="center">You can contact us on </h5>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="container-fluid my-5 py-5 z-depth-1">
<!--Section: Content-->
<section class="px-md-5 mx-md-5 text-center text-lg-left dark-grey-text">
<style>
.map-container {
height: 200px;
position: relative;
}
.map-container iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
</style>
<!--Grid row-->
<div class="row d-flex justify-content-center mb-4">
<!--Grid column-->
<div class="col-md-6 text-center">
<form action="">
<!-- Material outline input -->
<div class="md-form md-outline mt-3">
<input type="name" id="form-name" class="form-control">
<label for="form-name">Full Name</label>
</div>
<div class="md-form md-outline mt-3">
<input type="email" id="form-email" class="form-control">
<label for="form-email">E-mail</label>
</div>
<div class="md-form md-outline mt-3">
<input type="telephone" id="tel" class="form-control">
<label for="form-email">Telephone</label>
</div>
<!-- Material outline input -->
<div class="md-form md-outline">
<input type="text" id="form-subject" class="form-control">
<label for="form-subject">Subject</label>
</div>
<!--Material textarea-->
<div class="md-form md-outline mb-3">
<textarea id="form-message" class="md-textarea form-control" rows="5"></textarea>
<label for="form-message">Message</label>
</div>
<button type="submit" class="btn btn-green btn-sm ml-0">Submit<i class="far fa-paper-plane ml-2"></i></button>
</form>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Google map-->
<div id="map-container-google-1" class="z-depth-1 map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31765.215550392822!2d-0.2790558016341382!3d5.618302097542889!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xa281a924604df2f9!2sMambo%20Spot!5e0!3m2!1sen!2sgh!4v1602553528014!5m2!1sen!2sgh" frameborder="0"
style="border:0" allowfullscreen></iframe>
</div>
<!--Google Maps-->
</section>
<!--Section: Content-->
</div>
</main>
<footer class="page-footer font-small success-color success-color-dark">
<!-- Footer Elements -->
<div class="container">
<!-- Grid row-->
<div class="row">
<!-- Grid column -->
<div class="col-md-12 py-5">
<div class="mb-5 flex-center">
<!-- Facebook -->
<a class="fb-ic">
<i class="fab fa-facebook-f fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
</a>
<!-- Twitter -->
<a class="tw-ic">
<i class="fab fa-twitter fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
</a>
<!-- Google +-->
<a class="gplus-ic">
<i class="fab fa-google-plus-g fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
</a>
<!--Linkedin -->
<a class="li-ic">
<i class="fab fa-linkedin-in fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
</a>
<!--Instagram-->
<a class="ins-ic">
<i class="fab fa-instagram fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>
</a>
<!--Pinterest-->
<a class="pin-ic">
<i class="fab fa-pinterest fa-lg white-text fa-2x"> </i>
</a>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row-->
</div>
<!-- Footer Elements -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://mdbootstrap.com/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Your custom scripts (optional) -->
<script type="text/javascript">
</script>
</body>
</html>
and the program seems not to work. I need help to make this work. If there is a way I can link the files or restructure the folders.
In the html, you have:
In the Go code you have:
The parameter passed to r.FormValue needs to match the "name" in the input tag:
You are populating your struct with form values that don't exist. A full example can be found here: https://astaxie.gitbooks.io/build-web-application-with-golang/content/en/04.1.html