I am using a Templatemo template and attempting to get the Email Form Submission to function.
(Signaturetables.com is the site)
I have downloaded the correct contact.php form from templatemo and followed instructions, and modified it all accordingly to info#signaturtables.com.
Can anyone see what is my problem?
I have contacted GoDaddy regarding this. They are hosting Signaturetables.com. They say they cannot even see emails being sent from the mail area.
They are suggesting the error is then on the php page.
This is over my head and I need help!
Thanks to anyone who can shed light on this for me!
HERE IS MY INDEX.HTML PAGE FORM SUBMISSION CODE:
<div class="templatemo_lightgrey" id="templatemo_contact">
<div class="templatemo_paracenter">
<h2>Contact us</h2></div>
<div class="clear"></div>
<div class="container">
<div class="templatemo_paracenter">
Please feel free to call or e-mail for inquiries.
</div>
<div class="clear"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="templatemo_maps">
<div class="fluid-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2965.3996287541227!2d-91.66233118455531!3d41.99169827921325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87e4f0b4219cc027%3A0xe64b0645b30a6bc!2sSignature+Santiago!5e0!3m2!1sen!2sus!4v1479248142906" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<form action="contact.php" method="post" id="form" class="contact-form">
<div class="form-group">
<input name="cf_name" type="text" class="form-control" id="fullname" placeholder="Your Name" maxlength="30">
</div>
<div class="form-group">
<input name="cf_email" type="text" class="form-control" id="email" placeholder="Your Email" maxlength="30">
</div>
<div class="form-group">
<input name="subject" type="text" class="form-control" id="subject" placeholder="Your Subject" maxlength="40">
</div>
<div><button type="button" class="btn btn-primary">Send Message</button></div>
</form>
</div>
<div class="col-md-9">
<div class="txtarea">
<textarea name="cf_message" rows="10" class="form-control" id="message"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
in a Nuxt site I have a form with a field of type "file", and a Name, Email and Message fields.
Name, Email and Message are working flawlessy everytime, instead the "file" field ONLY WORKS when the first page visited is the page where the form is (or it's reloaded). If a user, let's say, land on the homepage and only then reach the form page, the message sent from the form will not contain the file that was attached.
What can cause this? I've already tried to reset the form on the mounted hook, or reset only the "file" field but with no luck.
This is the form component code "TheFormJob.vue":
<template>
<div>
<form name="job" netlify-honeypot="bot-field" method="post" action="/success" data-netlify="true">
<input type="hidden" name="form-name" value="job" >
<p class="hidden">
<label>Don’t fill this out: <input name="bot-field"></label>
</p>
<div class="form">
<div class="form__name">
<input class="form__field" name="name" id="name" :placeholder="$t('contatti.nomeForm')" required >
</div>
<div class="form__email">
<input class="form__field" type="email" name="email" id="email" placeholder="Email*" required >
</div>
<div class="form__upload">
<input class="form__field" type="file" name="fileToUpload" id="fileToUpload" accept=".doc, .docx, .pdf" required>
</div>
<div class="form__textarea">
<textarea class="form__field" name="message" id="message" :placeholder="$t('contatti.messaggioForm')" required></textarea>
</div>
<div class="form__privacy extra-mt">
<label><input type="checkbox" name="privacy" required> {{$t('contatti.privacy')}}</label>
</div>
<div class="form__send extra-mt">
<button class="default-button" type="submit" value="Invia" >{{$t('contatti.invia')}} </button>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
mounted(){
const dis = this
const uploadField = document.getElementById("fileToUpload");
uploadField.onchange = function() {
if(this.files[0].size > 1048576){ // 1MB
alert(dis.$t('lavora.fileAlert'));
}
}
}
}
</script>
In the page "index.vue":
<template>
<div>
<div class="container">
<div class="first row extra-mt5-md is-center">
<div class="col-12 col-4-md text-center" style="padding: 2rem 0">
<h1>{{$t('lavora.title')}}</h1>
</div>
</div>
<div class="second row">
<div class="col-12 col-4-md image" />
<div class="col-12 col-8-md content">
<p>{{$t('lavora.p1')}}</p>
<TheFormJob class="extra-mt5" />
</div>
</div>
<div class="third row">
<div class="col-12">
<nuxt-link class="default-button-full" :to="localePath('contatti')">{{$t('contatti.title')}} → </nuxt-link>
</div>
</div>
</div>
</div>
</template>
What I am trying to do is -
I am trying to add a form to the existing form but the data not getting stored
what the error coming up -
in the console its showing form connection is missing.. how can I connect it with following code I have?
The code behind the click is something like this:
<button type="submit" class="btn btn-default" routerLink="../viewemployee" [disabled]="empForm.invalid">Add Employee</button>
please refer the link below for the code.. need help to move on from this to solve other tasks.
If it is required to post the code here as well, I will do.Please answer and respond.
Thanx in advance.
How to connect the form in angular routing
createemployee.component.html
<h2>Add Employee:</h2>
<form class="form-horizontal" #empForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" minlength="4" maxlength="10" pattern="^[A-Za-z0-9]*[A-Za-z0-9][A-Za-z0-9]\S*$" [(ngModel)]="model.name" placeholder="Enter Your Name"
#name="ngModel" required/>
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
<div *ngIf="name.errors.required">
Name is required.
</div>
<div *ngIf="name.errors.pattern">
No Spaces
</div>
<div *ngIf="name.errors.minlength">
Name must be at least 4 characters long.
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="position">Position:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="position" minlength="4" maxlength="10" pattern="^[a-z]*$" [(ngModel)]="model.position" placeholder="Enter your position"
#position="ngModel" required />
<div *ngIf="position.invalid && (position.dirty || position.touched)" class="alert alert-danger">
<div *ngIf="position.errors.required">
Position is required.
</div>
<div *ngIf="position.errors.pattern">
Only Alphabets are must be entered
</div>
<div *ngIf="position.errors.minlength">
Position must be at least 4 characters long.
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="salary">Salary:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="salary" pattern="[0-9]*"
minlength="5" maxlength="7" [(ngModel)]="model.salary" placeholder="Enter Salary" #salary="ngModel" required />
<div *ngIf="salary.invalid && (salary.dirty || salary.touched)" class="alert alert-danger">
<div *ngIf="salary.errors.required">
Salary is required.
</div>
<div *ngIf="salary.errors.minlength">
Salary must be in 5 numbers.
</div>
<div *ngIf="salary.errors.maxlength">
Salary must not be exceeded morethan 7 numbers.
</div>
<div *ngIf="salary.errors?.pattern">Only numebers should be typed
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" routerLink="../viewemployee" [disabled]="empForm.invalid">Add Employee</button>
<button type="button" class="btn btn-default" routerLink="../home">Cancel</button>
</div>
</div>
</form>
You could change your component as follows:
Add event handler to the form:
<form (ngSubmit)="continue()">
Handle the routing in code:
continue() {
...
this.router.navigateByUrl("../viewemployee");
}
You need to inject the router:
constructor(private router: Router) {}
I have a small contact modal on my website that does not appear. It was working before, but I must have changed something and now it won't work.
I've looked over it multiple times and I can't figure out why it's not working.
HTML:
<span data-toggle="modal">Contact</span>
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<h4>Contact the Developers</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="contact-name" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="contact-email" placeholder="you#example.com">
</div>
</div>
<div class="form-group">
<label for="contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea class="form-control" rows="8"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
You are missing the data-target attribute. Plus, you shouldn't be linking to a page when you want to open a modal ;)
<span data-toggle="modal" data-target="#contact">Contact</span>
Should fix this. See http://www.bootply.com/UED0aevXsG
I am Trying to Create a simple basic form , I am unable to achieve Horizontal layout when added input-append class to the form , it kicks the second input box to be displayed in the same line ? wondering where the CODE ERROR is ? please suggest what is causing issue
<body>
<div class="container">
<hr/>
<form class="form-horizontal">
<!--<span class="offset2">Sign Into the Email</span>-->
<div class="control-group">
<div class="controls"><span>Welcome to My Email</span></div>
</div>
<div class="control-group input-append">
<label for="emailid" class="control-label">Email id</label>
<div class="controls">
<input type="text" />
<span class="add-on">#</span>
</div>
</div>
<div class="control-group input-append">
<label for="passwd" class="control-label">Password</label>
<div class="controls">
<input type="password" />
<span class="add-on">***</span>
</div>
</div>
<div class="control-group">
<div class="controls" >
<label class="checkbox">
<input type="checkbox" />Remember Me
</label>
<button class="btn">Sign In</button>
</div>
</div>
</form>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
I would just put the input-append in an inner div
<div class="control-group">
<div class="input-append">
<label for="emailid" class="control-label">Email id</label>
<div class="controls">
<input type="text" /> <span class="add-on">#</span>
</div>
</div>
</div>
Check this fiddle
.input-append has a display: inline-block Hence the issue
I have researched stackoverflow to make a drop-down button with login form stay open when completing the form. Right now as soon as you try to type, the login form closes. Here is my code:
<div class="top-nav">
<div class="btn-group pull-right dropdown-toggle"> <a class="btn btn-login" href="#"><i class="icon-user icon-white"></i> Login</a> <a class="btn btn-login dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<form class="form-horizontal dropdown-menu">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox">
Remember me </label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
At the end of my code just before the body tag I entered this script:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script language="javascript">
$('.dropdown-toggle').dropdown();
$('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
});
</script>
I was able to reproduce the issue using your code. Removing .find('form') from the JavaScript fixed the problem.