I have a form and formit call that works in one site and not another, which is a direct copy of the first [migrating to a new design] The sites are identical right now, files & database were just copied. All the plugins were checked and even reinstalled.
What I have is:
<!-- contact page -->
[[!FormIt?
&placeholderPrefix=`contact.`
&hooks=`spam,email,redirect,FormItAutoResponder`
&emailTo=`[[GetSystemSetting? &setting=`emailContactMailTo`]]`
&emailSubject=`domain.com Contact form has been submitted. [[+contact.subject]]`
&emailTpl=`ContactCustomEmailTpl`
&redirectTo=`346`
&emailReplyTo=`no-reply#domain.com`
&submitVar=`contactSubmit`
&validate=`name:required,email:email:required,subject:required,text:required:stripTags`
&fiarSubject=`Your contact request to domain.com`
&fiarTpl=`ContactCustomEmailTpl`
&fiarReplyTo=`no-reply#domain.com`
]]
<form class="form" action="[[~[[*id]]]]" method="post" role="form">
<input type="hidden" name="nospam:blank" value="" />
<div class="row">
[[!+contact.error_message:notempty=`<div class="col-sm-12"><div class="alert alert-danger">[[!+contact.error_message]]</div></div>`]]
<div class="col-sm-4[[+contact.error.name:notempty=` has-error`]]">
<div class="form-group">
<label for="name"> Name: *</label>
<input id="name" type="text" name="name" value="[[!+contact.name]]" class="form-control" />
</div>
</div>
<div class="col-sm-4[[+contact.error.email:notempty=` has-error`]]">
<div class="form-group">
<label for="email"> Email: *</label>
<input id="email" type="text" name="email" value="[[!+contact.email]]" class="form-control" />
</div>
</div>
<div class="col-sm-4[[+contact.error.subject:notempty=` has-error`]]">
<div class="form-group">
<label for="subject"> Subject: *</label>
<input id="subject" type="text" name="subject" value="[[!+contact.subject]]" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12[[+contact.error.text:notempty=` has-error`]]">
<div class="form-group">
<label for="text"> Message: *</label>
<textarea id="text" name="text" rows="7" class="form-control">[[!+contact.text]]</textarea>
</div>
</div>
<div class="col-sm-6 col-sm-offset-3">
<div class="form-group">
<label> </label>
<input class="btn btn-primary btn-block" type="submit" name="contactSubmit" value="Send Contact Inquiry" onClick="_gaq.push(['_trackEvent', 'ContactPage', 'Contact Submitted']);" />
</div>
</div>
</div>
</form>
</div>
The form will work if I remove the 'FormItAutoResponder' from the &hooks AND all items from the &validate parameters.
What is wrong with this form?
no usefull errors in modx or server logs
reinstalled formit
isolated it in a test page with no other markup
the emailTpl is present and mail gets sent if the 2 parameters are removed from the formit call
Perhaps the GetSystemSetting snippet is missing? Why not just use [[++emailContactMailTo]] instead?
Are the MODX and FormIt versions the same on both sites?
Try calling this debug snippet somewhere below the FormIt call. Look for unshown errors (starting with contact.error.) or any other unexpected placeholders.
Related
I have a form in a NodeJs project where I am using:
app.use(bodyParser.urlencoded({extended: true}));
I want to make it where if a user enters <h1>hello</h1> into the form that it will show up as "hello" formatted as an h1 instead of <h1>hello</h1>
<form action="/blogs" method="POST">
<div class="form-group">
<input class="form-control" type="text" name="name" placeholder="name">
</div>
<div class="form-group">
<input class="form-control" type="text" name="image" placeholder="image url">
</div>
<div class="form-group">
<input class="form-control" type="text" name="description" placeholder="description">
</div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block">
Submit
</button>
</div>
</form>
I found a solution to my problem.
In Node.js if you want to display information as HTML, in the index.ejs file
you need to do a
<%- blog.description %>
, where that dash is the key.
Before i had
<%= blog.description %>.
I got redirected after I submit the form, and I want to remain on the same page. I am not sure why I got redirected, I am not using &redirectTo for this.
I try some things but nothing worked till now.
[[!FormIt?
&hooks=`spam,email,FormItSaveForm,successMess`
&formName= `Contact Form`
&emailTpl=`emailChunkTpl`
&emailTo=`email#gmail.com`
]]
<form action="[[~[[*id]]]]" method="post" class="contactForm">
<input type="hidden" name="nospam:blank" value="" />
<div class="row input-section-child">
<div class="col input-contact">
<input value="[[!+fi.input-name]]"class="input-name" name="input-name" id="input-name" type="text" placeholder="your name" />
<span class="error-message error" > [[!+fi.error.input-name]] </span>
<input value="[[!+fi.input-email]]" class="input-email" name="input-email" id="input-email" type="text" placeholder="email address" />
<span class="error-message error" >[[!+fi.error.input-email]] </span>
</div>
<div class="col input-contact-text">
<input value="[[!+fi.input-textare]]"class="input-textare" name="input-textare" id="input-textare" type="textare" placeholder="message" />
</div>
</div>
<div class="row second-row">
<div class="col">
<button type="submit" class="send-button">SEND</button>
</div>
[[+placeholder]]
</div>
</div>
</from>
As in my answer on your other post, you should remove all the hooks and try one at a time (after you've cleaned up the markup for this form).
And what is successMess? Is that a custom snippet you've made? It's not a Formit hook that I have heard of. If it's your custom snippet you should paste the code into your question so we can see it.
The form routes data just fine without the top two inputs included, but I want the blog[make] and blog[model] inputs to be included.
I have deleted various inputs and also used previously created forms. All routes are set up correctly except the first two inputs.
<form class="ui form segment" action="/carBlogs" method="POST">
<div class="field">
<div class="two fields">
<div class="field">
<label>Make</label>
<input type="text" name="blog[make]" placeholder="ENTER MAKE">
</div>
<div class="field">
<label>MODEL</label>
<input type="text" name="blog[model]" placeholder="ENTER MODEL">
</div>
</div>
</div>
<div class="field">
<label>YEAR</label>
<div class="field">
<div class="three wide field">
<input type="text" name="blog[year]" placeholder="ENTER YEAR">
</div>
</div>
</div>
<div h4 class="ui dividing header">
<p>BLOG</p>
</div>
<div class="field">
<div class="field">
<label>TITLE</label>
<input type="text" name="blog[make]" placeholder="Enter TITLE">
</div>
<div class="field">
<div class="field">
<label class="label">IMAGE</label>
<input type="text" name="blog[image]" placeholder="Enter IMAGE">
</div>
<div class="field">
<div class="field">
<label>COMMENT</label>
<textarea name="blog[body]" placeholder="Enter Blog Here"></textarea>
</div>
</div>
</div>
<div class="ui inverted segment">
<button type ="submit" class="ui inverted blue button">Submit</button>
</div>
</form>
I am using Angular 7. I don't know where the error occurs in this form. It always shows form is not a known property of this method. Where did I make a mistake in the below code? I am getting this error.
Can't bind to 'formGroup' since it isn't a known property of 'form'
<form [formGroup]="newClientForm">
<fieldset>
<div class="row" style="text-align:center">
<input type="text" class="st0" placeholder="Enter name" class="form-control" name="name" formControlName="name" #name required="required" />
</div>
<br>
<div class="row" style="text-align:center">
<input type="text" class="st0" placeholder="Enter email" class="form-control" name="email" formControlName="email" #email required="required" pattern="([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?" />
</div>
<br>
<div class="row" style="text-align:center">
<input type="password" class="st0" placeholder="Password" class="form-control" name="password" formControlName="password" #password required="required" pattern=".{6,}"
title="Minimum 6 characters required" autocomplete="off" />
</div>
<br>
<div class="row" style="text-align:center">
<input type="text" class="st0" placeholder="Enter mobile" class="form-control" name="mobile" formControlName="mobile" #mobile required="required" />
</div>
<br>
<div class="row" style="text-align:center">
<!-- <input type="submit" value="Register" /> -->
<button type="submit" class="st1" value="register" (click)="register()">Register</button>
</div>
<br>
<div class="row" style="text-align:center">
<div class="forgot">
Login?
</div>
</div>
<br>
</fieldset>
</form>
Try this stackblitz link reactive form. I have created a similar form using your html code and have run it.
Things i did were very basics:
Imported ReactiveFormsModule from #angular/forms
and have created a formgroup in ts file and added all controls you used in your html.
It runs well.
Let me know if your issue is different from the solution provided.
I have read https://getbootstrap.com/docs/4.0/components/forms/#validation. After reading I guess it is possible to check confirmation password in client site using bootstrap 4 default options. And, as I new in web development I can't figure out the solution.
If it is possible then how?
My signup modal is
<li><button type="button" class="btn btn-light btn-lg" data-toggle="modal" data-target="#signUp">Sign Up</button></li>
<li><button type="button" class="btn btn-light btn-lg" data-toggle="modal" data-target="#signIn" style="margin-left:10px">Sign In</button></li>
<!-- Modal content-->
<div class="modal fade" id="signUp" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Sign Up</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="email" class="col-form-label">Email address:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<div class="form-group">
<label for="pwd" class="col-form-label">Password:</label>
<input type="password" class="form-control" id="pwd" name="password">
</div>
<div class="form-group">
<label for="pwd" class="col-form-label">Confirm Password:</label>
<input type="password" class="form-control" id="pwd" name="password">
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Sign Up</button>
</div>
</div>
</div>
</div>
For details code see this
I want to submit the email and password to server when both password are equal. Otherwise show alert message.
Bootstrap 4 using constraint validation as The following form has two required fields, one for an e-mail address and one for a password. It also has a third field that is only considered valid if the user types the same password in the password field and this third field.
<h1>Create new account</h1>
<form action="/newaccount" method=post
oninput='up2.setCustomValidity(up2.value != up.value ? "Passwords do not match." : "")'>
<p>
<label for="username">E-mail address:</label>
<input id="username" type=email required name=un>
<p>
<label for="password1">Password:</label>
<input id="password1" type=password required name=up>
<p>
<label for="password2">Confirm password:</label>
<input id="password2" type=password name=up2>
<p>
<input type=submit value="Create account">
</form>
for more details check: https://www.w3.org/TR/html5/sec-forms.html#sec-constraint-validation