I am setting up a blog and have a contact form page (standard bootstrap blog template)
I have everything uploaded onto my host - hostgator, but I can't manage to get the contact form to send an email out properly.
I have tried both an external email account and an account on the same domain name with no luck.
Here is the original html source for the contact page from bootstrap: https://github.com/IronSummitMedia/startbootstrap-clean-blog/blob/gh-pages/contact.html
and the original source for the contact_me.php: https://github.com/IronSummitMedia/startbootstrap-clean-blog/blob/gh-pages/mail/contact_me.php
Is there a setting I need to change from the hostgator cpanel or something in the code I'm missing?
Edit: Here is my domain if you want to view the source I have in place:
www.decentralizeblog.com
I have made bit changes to the form
you have not used certain attributes in your form
link method, action and name attribute in text field
<form name="sentMessage" id="contactForm" action="mailer.php" method="post" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email Address</label>
<input type="email" name="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone Number</label>
<input type="tel" name="phone" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" name="message" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-default">Send</button>
</div>
</div>
</form>
This may not be a problem with your code, have you checked that your hostgator plan supports the php mail() function? Some plans (I know from experience) have this disabled as an incentive for you to upgrade.
Hope this helps.
Related
I am having trouble with form validation in AngularJS. I am trying to show a div based on whether an input is invalid. Angular is putting the correct classes on my inputs (ng-touched and ng-invalid) but it is still keeping the div with a ng-hide class.
form.html
<form id="" name="contactForm"
ng-submit="postForm()" novalidate>
<div class="form-group row">
<label for="full-name" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Name</label>
<div class="col-lg-10 col-md-9 col-xs-8">
<input class="form-control" type="text" placeholder="Jon Doe"
id="full-name" required data-ng-model="formData.name">
</div>
</div>
<!-- This is the only input implemented with the errors -->
<div class="form-group row">
<label for="phone-number" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Phone
Number</label>
<div class="col-lg-10 col-md-9 col-xs-8">
<input class="form-control" type="tel"
placeholder="(630) 555-6723" id="phone-number" required
data-ng-model="formData.phone" name="phone" ng-minlength="10"/>
</div>
<div ng-show="(contactForm.phone.$invalid && contactForm.phone.$touched) || contactForm.phone.$error.minlength">Please enter a valid phone
number.</div>
</div>
<div class="form-group row">
<label for="email" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Email</label>
<div class="col-lg-10 col-md-9 col-xs-8">
<input class="form-control" type="email"
placeholder="jon.doe#gmail.com" id="email" required
data-ng-model="formData.email" />
<div class="invalid-feedback">Please enter a valid email.</div>
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label">Contact Method</label>
<div class="col-lg-2 col-md-3 col-xs-4">
<label class="custom-control custom-radio"> <input
id="radio1" name="email" type="radio"
class="custom-control-input" checked="checked"
data-ng-model="formData.pref"> <span
class="custom-control-indicator"></span> <span
class="custom-control-description">Email</span>
</label> <label class="custom-control custom-radio"> <input
id="radio2" name="phone" type="radio"
class="custom-control-input" data-ng-model="formData.pref">
<span class="custom-control-indicator"></span> <span
class="custom-control-description">Phone</span>
</label>
</div>
</div>
<div class="form-group row">
<label for="full-name" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Body</label>
<div class="col-lg-10 col-md-9 col-xs-8">
<textarea rows="15" class="form-control"
placeholder="Type your message here..." id="body-text" required
data-ng-model="formData.body"></textarea>
<div class="invalid-feedback">Please enter a message here.</div>
</div>
</div>
<div class="text-center">
<button ng-disabled="contactForm.$invalid" class="btn-primary btn" type="submit">Submit</button>
</div>
</form>
</div>
angular.js
<!-- SCRIPTS -->
<script>
//form validate
var app = angular.module('contactUs', []);
app.controller('formCtrl', function($scope, $http) {
$scope.formData = {};
$scope.postForm = function() {
$('#loadingScreen').modal('show');
$http({
url : '/api/v1/contact',
method : 'POST',
data : $.param($scope.formData),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.then(function onSuccess() {
console.log("success");
window.scrollTo(0,0);
$('#success-message').show();
}, function onError(){
console.log("error");
window.scrollTo(0,0);
$('#error-message').show();
})
.then(function() {
$('#loadingScreen').modal('hide');
})
}
$scope.formData = {};
});
</script>
Looking at other errors I made sure that the ng-show was using the formName.inputName and that the app and controller were working correctly. The button is disabled correctly when the form is invalid which leads me to believe that the controller and app are not the problem.
I tried using ng-messages which changed my phone portion of the form to
<div class="form-group row">
<label for="phone-number" class="col-lg-2 col-md-3 col-xs-4 col-form-label">Phone
Number</label>
<div class="col-lg-10 col-md-9 col-xs-8">
<input class="form-control" type="tel"
placeholder="(630) 555-6723" id="phone-number" required
data-ng-model="formData.phone" name="phone" ng-minlength="10"/>
</div>
<div ng-messages="contactForm.phone.$error" class="error" ng-if="contactForm.phone.$dirty">
<div ng-message="required">Please enter a phone number we can reach you at.</div>
<div ng-message="pattern">Please enter a valid phone number here.</div>
<div ng-message="minlength">Please enter a phone number that's atleast 10 digits</div>
</div>
</div>
Angular is still adding the correct classes to the input but it is still not displaying. I believe the ng-if is evaluating false. Oddly, when I run
{{contactForm.phone.$dirty}}
in the console it is coming back as undefined
Take a look here and you can see how I got it working. I'll break down the steps below. https://plnkr.co/edit/LJYurBObZsS6ptlVKxvP?p=preview
With the change to using ng-messages, you need to include that module in your app. I wasn't sure if you had made this change or not, but it's straightforward. Include the script for the library, and then update your modules to include ngMessages as a dependency.
var app = angular.module('contactUs', ['ngMessages']);
The second part is fixing a typo. In your html for the contact method area, you have
<label class="custom-control custom-radio">
<input id="radio2" name="phone" type="radio" class="custom-control-input" data-ng-model="formData.pref">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Phone</span>
</label>
You're reusing the name "phone" there, which is going to cause problems since you'll have two different form items with the same name. Probably change those inputs to emailPreference and phonePreference or something to be clear.
As soon as I cleaned that up, it started working. So I think you were all there, just this typo was getting you.
I want to use same form for two different Views and I have two different roles.
1. Client
2. Manager
In my Controller I have added a flag based on the user role that is logged in.
$scope.userFlag=$rootScope.globalSession.UserRole,
If I login as a Manager then the value of $rootScope.globalSession.UserRole="Manager"
& If I login as a Client then the value of $rootScope.globalSession.UserRole="Client"
Now in my form I have added a condition to switch it -> ng-if="userFlag==Admin"
<form class="form-horizontal" name="UpdateAdminProfileForm" id="UpdateAdminProfileForm">
<h2>Update Profile</h2>
<hr>
<fieldset name="client" id="client" ng-if="userFlag==Admin">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">Domain Name*</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="Enter your username" class="form-control input-md" ng-model="theClient.OrganizationDomain" disabled>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="update"></label>
<div class="col-md-4">
<a><button id="update" name="update" class="btn btn-primary" ng-click="updateClient()">Update</button></a>
</div>
</div>
</fieldset>
<fieldset name="manager" id="manager" ng-show="userFlag==Manager">
<div class="form-group" ng-class="{ 'has-error': submitted && UpdateAdminProfileForm.myemail.$error.required || UpdateAdminProfileForm.myemail.$error.pattern }">
<label class="col-md-4 control-label" for="myemail">Email*</label>
<div class="col-md-4">
<input id="myemail" name="myemail" type="email" placeholder="Enter your email" class="form-control input-md" ng-model="theClient.Email" ng-pattern="regex.Email" ng-maxlength="20" required autofocus >
<span ng-show="submitted && UpdateAdminProfileForm.myemail.$error.required" class="help-block">Email can not be empty</span>
<span ng-show="UpdateAdminProfileForm.myemail.$error.pattern && UpdateAdminProfileForm.myemail.$invalid " class="help-block">Please enter a valid email</span>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" type="button" ng-click="updateManager()">Save</button>
</div>
</fieldset>
</form>
</div>
</div>
But its not working when I open the form, its empty and If I remove ng-if="userFlag==Admin" & ng-if="userFlag==Manager" from tags then it display the fields for both field set.
Image With FLAG
Image After Removing FLAG
Help! Thanks in advance.
It should be
ng-if="userFlag=='Admin'"
Try This
ng-if="userFlag=='Admin'" or ng-show="userFlag=='Manager'"
I have a form on my register page that allows a user to create their account. If the create account request is successful my angular redirects the user to the login view. When the user lands here it auto fills the username/email field with the last name from the previous form.
I am not quite sure why though. The forms both have the same id's and name values so I am very confused on the chrome auto-filling.
Found something out, after registering an account the user is redirected to the login page. It auto fills the lastname into the username box then populates the password correctly. However if you clear the lastname out and login using the proper credentials it updates that Google Save Locker record and from that point on works correctly.
Here are visual examples of what I am seeing.
Registration:
Filling out form so you can see the last name value
Getting redirected to login page after registration:
The UI chrome displays after landing on login page
Link to page for live example:
Website link : app.baileysproject.com
Register form:
<form class="form-horizontal" id="RegisterForm">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Email">Email</label>
<div class="col-md-4">
<input id="Email" name="Email" type="email" placeholder="Email Address" class="form-control input-md" ng-model="stuff.Email" required="">
<span class="help-block">A valid email address</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="FirstName">First Name</label>
<div class="col-md-4">
<input id="FirstName" name="FirstName" type="text" placeholder="First Name" class="form-control input-md" ng-model="stuff.FirstName" required="">
<span class="help-block">Your first name</span>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="LastName">Last Name</label>
<div class="col-md-4">
<input id="LastName" name="LastName" type="text" placeholder="Last Name" class="form-control input-md" ng-model="stuff.LastName" required="">
<span class="help-block">Your last name</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Password">Password</label>
<div class="col-md-4">
<input id="Password" name="Password" type="password" placeholder="Password" class="form-control input-md" ng-match="stuff.Password" ng-model="stuff.Password" required="">
<span class="help-block">Enter a strong password</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="cPassword">Confirm Password</label>
<div class="col-md-4">
<input id="cPassword" name="cPassword" type="password" placeholder="Password" class="form-control input-md" ng-model="stuff.ConfirmPassword" required="">
<span class="help-block">Enter the same password again</span>
</div>
</div>
<!-- Button -->
<div class="form-actions">
<div class="">
<button id="CreateAccount" name="CreateAccount" ng-click="CreateAccount()" class="btn btn-info">{{AccountCreatedValue}}</button>
</div>
</div>
</fieldset>
</form>
Login form:
<form class="form-horizontal">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Email">Email</label>
<div class="col-md-4">
<input id="Email" name="Email" type="email" placeholder="Email Address" class="form-control input-md" ng-model="Email" required="">
<span class="help-block">A valid email address</span>
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Password">Password</label>
<div class="col-md-4">
<input id="Password" name="Password" type="password" placeholder="Password" class="form-control input-md" ng-model="Password" required="">
<span class="help-block">Strong Password</span>
</div>
</div>
<!-- Button -->
<div class="form-actions">
<div class="">
<button id="Login" name="Login" ng-click="Login()" class="btn btn-info">Login</button>
</div>
</div>
</fieldset>
</form>
Following on from this post Load JSON in AngularJS App (loading google spreadsheet) how do i go about posting data from my Angular app to a spreadsheet? Is it even possible to do?
I've created a version of my app that updates an array of data locally but now want to switch to pulling in data from an external source (a google spreadsheet - this works at the moment) and posting to this external source as well.
PS only using Google Spreadsheet for quick prototyping.
HTML form, the ng-submit was then being used to update a local array within my controller.
<form name="reviewsForm" class="form-horizontal" ng-controller="newReviewController as newReviewCtrl" ng-submit="reviewsForm.$valid && newReviewCtrl.addScore(reviews)" novalidate>
<div class="form-group">
<label for="type" class="col-xs-4 control-label hide">Review type</label>
<div class="col-xs-6 select-menu">
<select tabindex="" name="type" id="type" class="validate" ng-model="newReviewCtrl.reviews.type" class="validate" required>
<option value="" disabled selected>Review type</option>
<option ng-repeat="type in types">{{type.name}}</option>
</select>
</div>
<label for="reviewTitle" class="col-xs-4 control-label hide">Review title</label>
<div class="col-xs-6">
<input tabindex="" type="text" name="reviewTitle" ng-model="newReviewCtrl.reviews.name" class="validate" placeholder="Review title" required>
</div>
</div>
<div class="form-group">
<label for="Description" class="col-xs-4 control-label hide">Description</label>
<div class="col-xs-12">
<input tabindex="" type="text" name="Description" ng-model="newReviewCtrl.reviews.desc" class="validate" placeholder="Description" required >
</div>
</div>
<div class="form-group">
<label for="Image" class="col-xs-4 control-label hide">Image url</label>
<div class="col-xs-6">
<input tabindex="" type="text" name="Image" ng-model="newReviewCtrl.reviews.imgUrl" class="validate" placeholder="Image url" required >
</div>
<label for="info" class="col-xs-4 control-label hide">More info url</label>
<div class="col-xs-6">
<input tabindex="" type="text" name="info" ng-model="newReviewCtrl.reviews.infoUrl" class="validate" placeholder="More info url" required >
</div>
</div>
<div class="form-group">
<label for="date" class="col-xs-4 control-label hide">Date</label>
<div class="col-xs-6">
<input tabindex="" type="date" max="2020-01-01" min="2015-01-01" name="date" ng-model="newReviewCtrl.reviews.date" class="validate" placeholder="YYYY-MM-DD" required>
</div>
<div class="col-xs-6 text-right">
<button tabindex="" type="submit" class="btn btn-block waves-effect waves-light green btn-add white-text" ng-show="reviewsForm.$valid" ng-click="newReviewCtrl.reviews.type='0'" id="add-submit" style="margin:0px;" data-toggle="collapse" data-target="#addReviewCollapse" aria-expanded="false" aria-controls="addReviewCollapse">
Add
</button>
</div>
</div>
Example of part of the existing array of data
$scope.reviews = [
{
name: "The Force Awakens",
imgUrl: 'img/theforceawakens.jpg',
type:'Movie',
desc: 'Amazeballs',
infoUrl: '???',
date: new Date(2016, 02, 16, 16)
},
I've put all the same information in to a google spreadsheet and am using this post to pull that data in to my page Load JSON in AngularJS App (loading google spreadsheet) , i now want to post to that spreadhseet as well using the above form but dont know where to start.
I am using CakePHP 3.x
I am trying to skin a themeforest theme into a CakePHP plugin.
Midway, I am deciding whether to skin a portlet into helper, element, or view cell.
The portlet html code looks something like this:
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box yellow">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> More Form Samples
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<h4>Inline Form</h4>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<hr>
<h4>Inline Form With Icons</h4>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail22">Email address</label>
<div class="input-icon">
<i class="fa fa-envelope"></i>
<input type="email" class="form-control" id="exampleInputEmail22" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword42">Password</label>
<div class="input-icon">
<i class="fa fa-user"></i>
<input type="password" class="form-control" id="exampleInputPassword42" placeholder="Password">
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<hr>
<h4>Horizontal Form</h4>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-md-2 control-label">Email</label>
<div class="col-md-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword12" class="col-md-2 control-label">Password</label>
<div class="col-md-4">
<input type="password" class="form-control" id="inputPassword12" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn blue">Sign in</button>
</div>
</div>
</form>
<hr>
<h4>Horizontal Form With Icons</h4>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail12" class="col-md-2 control-label">Email</label>
<div class="col-md-4">
<div class="input-icon">
<i class="fa fa-envelope"></i>
<input type="email" class="form-control" id="inputEmail12" placeholder="Email">
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword1" class="col-md-2 control-label">Password</label>
<div class="col-md-4">
<div class="input-icon right">
<i class="fa fa-user"></i>
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
<div class="help-block">
with right aligned icon
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me </label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn green">Sign in</button>
</div>
</div>
</form>
<hr>
<h4>Column Sizing</h4>
<form role="form">
<div class="row">
<div class="col-md-2">
<input type="text" class="form-control" placeholder=".col-md-2">
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder=".col-md-3">
</div>
<div class="col-md-4">
<input type="text" class="form-control" placeholder=".col-md-4">
</div>
<div class="col-md-3">
<input type="text" class="form-control" placeholder=".col-md-2">
</div>
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
The look is like this:
My question is how do we know when we should use Element? When we should use Helper? and When should we use View Cells?
And which case should I use for the above? I am leaning towards Helper.
Element
Use it when you need to repeat presentation related stuff, usually HTML, a lot. For example I have a project in which three tables use records of an addresses table. The form part of all of these three that contains the address data is an element.
Helper
Use it to encapsulate view logik, don't put HTML in it if possible or other presentation related things. For example let it do something and depending on the result you can use an element of that result type to render the data: return $this->_view->render('items/' . $type . '_item');
If you look at the core helpers for example the HtmlHelper you'll see a property $_defaultConfig:
protected $_defaultConfig = [
'templates' => [
'meta' => '<meta{{attrs}}/>',
'metalink' => '<link href="{{url}}"{{attrs}}/>',
/*...*/
These are the template strings that are used to generate the HTML output. This separtes the markup pretty nice from the actual code that generates it. Take a look at the FormHelper as well, it's using widgets to render more complex output.
So this works fine with element like pieces of markup. By a rule of thumb I would say if your markup is longer than what you see there make it an element and call it from within the helper or make it a widget.
View Cells
Think of view cells as "Mini MVC" stacks that have a view and can load multiple models. They're IMHO similar to AngularJS directives if you're familiar with them. See this article for an example. I really suggest you to read it, it explains them and their use cases in detail.
I haven't done much with them yet but they can be used to replace requestAction() calls for example. You won't "pollute" your controller with methods that are not intended to be access by a request.
Taken from the linked article above:
One of the most ill-used features of CakePHP is View::requestAction().
Developers frequently use this all over their applications, causing
convoluted cases where you need to figure out if you are within a web
request or an internal action request, cluttering controllers. You
also need to invoke a new CakePHP request, which can add some unneeded
overhead.
Disclaimer
The above reflects my personal view on these things, there is no ultimate and final rule how you have to use these three things. The goal is always clean and re-useable code and proper separation of concerns. How you archive that is up to you, you've got the tools. :)