Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
//IT would be very helpful if when the user clicks submit the form is sent to webdyno5#gmail.com
<div id="contact-box">
<form action="">
<div class="form-group" id="name">
<label for="name">Name: </label>
<input type="text" name="name" id="name" placeholder="Enter your name">
</div>
<div class="form-group" id="email">
<label for="email">Email: </label>
<input type="email" name="name" id="email" placeholder="Enter your email">
</div>
<div class="form-group" id="subject">
<label for="Subject">Subject of Email: </label>
<input type="text" name="name" id="subject" placeholder="Enter the subject of your Email">
<div class="form-group" id="message">
<label for="message">Message: </label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input class="submit" type="submit" value="Submit">
</div>
</form>
</div>
</section>
JavaScript can't do email and there's no way of sending info to email directly by html.
You can use PHP at backend.
For this segment of code you are showing, try with
As for details, please refer to:
https://html.form.guide/email-form/html-email-form.html
Related
I'd like to ask for help in creating a javascript function to call an AWS API gateway. This is essentially for a serverless contact form for a website hosted on AWS. I created and tested the lambda function and i created and tested an API gateway. All work as intended. I'm having trouble figuring out what a JS function would look like to call the API. I'm providing the HTML code for the form but essentially it's a button that links to a function, taht I haven't created, called submitToAPI(event). I found functions online for jQuery but my knowledge in this area is basically null.
Not trying to use nodejs or jQuery if possible (not trying to be difficult but I don't know how to use these).
<form id="contact-form" method="post">
<h4>Name:</h4>
<input type="text" style="height:35px;" id="name-input" placeholder="Enter name..." class="form-control"/><br/>
<h4>Phone:</h4>
<input type="phone" style="height:35px;" id="phone-input" placeholder="Enter phone number..." class="form-control"/><br/>
<h4>Email:</h4>
<input type="email" style="height:35px;" id="email-input" placeholder="Enter email..." class="form-control"/><br/>
<h4>How can we help you?</h4>
<textarea id="description-input" rows="3" placeholder="Enter your message…" class="form-control"></textarea><br/>
<div class="g-recaptcha" data-sitekey="6Lc7cVMUAAAAAM1yxf64wrmO8gvi8A1oQ_ead1ys" class="form-control"></div>
<button type="button" onClick="submitToAPI(event)" class="btn btn-primary">Submit</button>
</form>
You can use the action attribute : <form id="contact-form" action="https://example.execute-api.eu-central-1.amazonaws.com/default/api" method="post">...</form>
and use a button of type submit : <button type="submit" class="btn btn-primary">Submit</button>
Here is a link to the docs : https://www.w3schools.com/tags/att_form_action.asp
And here is a example :
<form id="contact-form" action="https://example.execute-api.eu-central-1.amazonaws.com/default/api" method="post">
<h4>Name:</h4>
<input type="text" style="height:35px;" id="name-input" placeholder="Enter name..." class="form-control"/><br/>
<h4>Phone:</h4>
<input type="phone" style="height:35px;" id="phone-input" placeholder="Enter phone number..." class="form-control"/><br/>
<h4>Email:</h4>
<input type="email" style="height:35px;" id="email-input" placeholder="Enter email..." class="form-control"/><br/>
<h4>How can we help you?</h4>
<textarea id="description-input" rows="3" placeholder="Enter your message…" class="form-control"></textarea><br/>
<div class="g-recaptcha" data-sitekey="6Lc7cVMUAAAAAM1yxf64wrmO8gvi8A1oQ_ead1ys" class="form-control"></div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Just paste this script tag above your current script so it is the first one..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
This question already has answers here:
How can I send an email using PHP?
(20 answers)
Closed 6 years ago.
This is the HTML contact form I created and I have been trying to get the PHP code that will make it work however I am not sure the best way to handle this. I have read through other questions and answers where they use separate files I am not an expert in PHP but I can assume the two files must be linked by name this is the HTML form I have:
<section class="our-contacts slideanim" id="contact">
<h3 class="text-center slideanim">Contact Us</h3>
<p class="text-center slideanim">Got a project in mind? Shoot as an email below!</p>
<div class="container">
<div class="row">
<div class="col-lg-12">
<form role="form">
<div class="row">
<div class="form-group col-lg-4 slideanim">
<input type="text" name="name" class="form-control user-name" placeholder="Your Name" required/>
</div>
<div class="form-group col-lg-4 slideanim">
<input type="email" name="email" class="form-control mail" placeholder="Your Email" required/>
</div>
<div class="form-group col-lg-4 slideanim">
<input type="tel" class="form-control pno" placeholder="Your Phone Number" required/>
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12 slideanim">
<textarea name="message" class="form-control" rows="6" placeholder="Your Message" required/> </textarea>
</div>
<div class="form-group col-lg-12 slideanim">
<button type="submit" href="#" class="btn-outline1">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
The form tag needs to have an action and a method attribute, like this:
<form role="form" method="post" action="path/to/file.php">
The method will normally be post (you can look up the difference between post and get if you like). The action is the path to the php file that will process the data.
In the php file you can access the data through the $_POST global variable which will be an array containing each of the inputs eg $_POST['tel'] will be the telephone number field from your form.
Then you need to send the email. You can try one of the implementations in the php manual (http://php.net/manual/en/refs.remote.mail.php) or you could try using a 3rd party service like mail gun.
I validate my form using jquery validate .It is working fine .
http://jsfiddle.net/cRew4/2/
When you change focus one field to and another it gives error.
Now I will implement tooltip in that,so I add tittle in all input field as example "title="title"" it show tooltip but it removed validation of that field.Instead of showing error it show title of the input field. why ?
http://jsfiddle.net/cRew4/3/
$("#commentForm").validate();
$(document).tooltip();
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" title="title" type="text" required/>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required/>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url"/>
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
I need it show tooltip when there is mouse over on the field .but it show validation error when user fill incorrect value intead of tooltip message
The validate takes title by default.
So, you must add ignoreTitle arguement to it.
JS
$(document).tooltip();
$("#commentForm").validate({
ignoreTitle: true
});
The documentation mentions it, look here : http://jqueryvalidation.org/validate/
JSfiddle Demo
This is my first time using this plugin. I am using jQuery v-1.10. I am also using the migrate plugin. I have added the js file. I have added all of these using prepros. But still the plugin is not working.
No error is also showing in the console; only a warning is showing saying:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
My form and the JS code is given below.
<form id="login-form" method="post" action="#" novalidate>
<label for="login-email" class="control-label">Email : </label>
<input id="login-email" class="form-control" name="email" type="email" placeholder="Email..." required><br>
<label for="login-password" class="control-label">Password : </label>
<input id="login-password" class="form-control" name="password" type="password" placeholder="Password..." required><br>
<input class="btn btn-default" name="submit" type="submit" value="Submit">
</form>
$("#login-form input").not("[type=submit]").jqBootstrapValidation();
You must use proper controls in your markup for this to work.
Ex.
<form ...>
<div class="control-group">
<label ...>Email</label>
<div class="controls">
<input ... />
<p class="help-block"></p>
</div>
</div>
</form>
And personally I believe the better way of handling the javascript is to create a "validated" class because not all fields will require validation. But I suppose this really depends on your form elements: you may indeed require the entire form to be validated but in most of the forms I've worked with, only certain elements require validation and therefor creating a class to call in your javascript is better so that jqBootstrapValidation.js isn't scanning the entire form.
Ex.
/* assigned by class */
$(function(){$(".validated").jqBootstrapValidation();});
/* assigned by element */
$(function(){$("input,select,textarea").not("[type=submit]").jqBootstrapValidation();});
Then simply add your "validated" class to anything you need validated:
<input type="email" class="form-control validated" name="email" id="email" placeholder="Email Address" required />
Hope this helps!
I'm trying to develop a local registration procedure in my app, so the user will be able to register locally, and login with his personal user and password.
Can someone give me a simple example how can i accomplish this? Meaning how do i store the local username and password input in registration, and later login with this data?
For example this will be my Login and Registarion html pages:
<body onload="init()">
<div id="loginPage" data-role="page">
<div data-role="header">
<h1>Registration/Login Demo</h1>
</div>
<div data-role="content">
<form id="loginForm">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="username">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="password">Re-enter Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<input type="submit" value="Login" id="submitButton">
</form>
</div>
How do i construct my js file?
Thanks.
You can use Storage API of Cordova,which Provides access to the devices storage options as you like to keep process locally,
Two options you can use for achieving this goal; one is database and the other one is local storage. Look here for storage API docs