HTML Contact form not able to configure - javascript

I use a template to develop a website. There is a contact form in it which I am having trouble to use. I tried using sources finding from internet to set it to send email to address I want but to no avail.
Here is source for contact form page.
<form id="ContactForm">
<div>
<div class="wrapper"> <span>Your Name:</span>
<input type="text" class="input" />
</div>
<div class="wrapper"> <span>Your E-mail:</span>
<input type="text" class="input" />
</div>
<div class="textarea_box"> <span>Your Message:</span>
<textarea name="textarea" cols="1" rows="1"></textarea>
</div>
<a href="#" class="button1"
onClick="document.getElementById('ContactForm').submit()">Send</a>
<a href="#" class="button1"
onClick="document.getElementById('ContactForm').reset()">Clear</a>
</div>
</form>

php require names for each form element to pass variables correctly, so you need to put a name tag in each input like
<input type="text" name="name" id="id" />
second you need to define the form action, if you are sending parameters to another php file then you need to put the php file source like this:
<form id="ContactForm" method="post" action="path/to/php">
if your are sending the parameters to the same page you can replace pat/to/php with <?php $_SERVER["PHP_SELF"] ?> or simply type in the page's name.

Related

how to submit a text input to somewhere that i can collect submissions

I'm really stuck on this I'm not sure how I would code text being sent or where i could send it to
<div class="comment-box">
<h2> submit quiz </h2>
<form action="#">
<input type="text" name="full_name" placeholder="Full Name...">
<input type="email" name="email" placeholder="Email Address...">
<button type="submit">submit comment</button>
</form>
any help or ideas on how i can do this would be great
Assuming you want to receive this information via email and need a quick and easy solution (however not reccomended), you can use this form tag
<form action=”mailto:contact#yourdomain.com” method=”POST” enctype=”text/plain” name=”EmailForm”>
Ensure you change the email in the form action="" tag.
You can also look into using a more advanced method through PHP.

How to display details of a form from one html page to another without connecting to a database

I have two html pages. First one contains a form with a submit button that navigates to the second page.
The second page basically displays the details entered. How can I display the details entered on the previous page without connecting it to a database?
Page 1 HTML:
<main class="form-signin">
<form method="get" action="confirmation.html">
<div class="card">
<h1>Enter details to book your room</h1>
<label for="inputName">Enter your full name</label>
<input type="text" id="inputName" class="form-control" placeholder="Full Name" required autofocus>
<label for="inputEmail">Enter your email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email Id" required>
<button class="btn btn-lg btn-primary" type="submit">Book Now</button>
</div>
</form>
</main>
Page 2 HTML :
<div class="card">
<h1>Your stay has been successfully booked!</h1>
<div class="details">
<h5>Booking Details</h5>
<h3>Name : <span class="name">name</span> </h3>
<h3>Email Address : <span class="email">email</span></h3>
</div>
<button class="btn btn-lg btn-primary" type="submit">Back to home</button>
</div>
I intend to change the span text on Page 2 with details from Page 1 using javascript
You either store what you need to store in localStorage and read them in the second page, or pass the params as pathParams and decode the URL in the second page.
No need to use cookies, since those will be sent with each one of your requests and it will consume bandwidth you can avoid.
Please refer to this answer about local storage:
Storing Objects in HTML5 localStorage

How to replace information in a form using jQuery on submit

Here is my form,
<div id="myForm">
<form method="post" id="contact-form" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<div class="row uniform">
<div class="6u 12u$(medium)">
<input type="text" name="fullname" id="fullname" value="" placeholder="Enter your full name" required />
</div>
<div class="6u 12u$(medium)">
<input type="email" name="email" id="email" value="" placeholder="enter your email address" required />
</div>
<div class="6u 12u$(medium)">
<textarea name="comment" id="comment" value="" placeholder="Enter your message" ></textarea>
</div>
<div class="6u 12u$">
<ul class="actions">
<li><input type="submit" value="Submit" class="special" /></li>
</ul>
</div>
</div>
</form>
</div>
I want to replace form with, thank you for submitting on selecting the submit button, at the moment It just refreshes the page and does not replace the form, I don't want it to refresh the page I want it to just submit and fade in a message saying thank you for submitting your details.
here is my jquery
<script>
$("#contact-form").submit(function(){
$("#myForm").html("thank you for submitting your details.");
});
</script>
Please can you help?
We have to create a ajax call in order to submit without refreshing the page:
$("#contact-form").submit(function(e) {
e.preventDefault();
$.post($(this).attr('action'), $(this).serialize());
$("#myForm").html("thank you for submitting your details.");
});
https://jsfiddle.net/u2gyocj7/1/
Take a look in the network tab to display the POST data
In that case you will want to look at using ajax form. If you submit as it is then it will post back and refresh the page. Ajax will post the data without changing anything on the page.
http://api.jquery.com/jquery.post/
jQuery AJAX submit form
Then, once the data has been sent you can manipulate the DOM as you wish. This will also allow you to show different messages based on whether the data was saved correctly or not, if done correctly.

Stop New Tab From Opening

I'm using mailchimp to create a signup sheet and every time the submit button is pressed, a new tab will open that confirms your subscription to the mailchimp email list. I want it to run as a sort of background process where no new tab is opened at all but the form is still submitted. Here is the code I currently have with MailChimp:
div id="mc_embed_signup">
<form action="//standrtech.us11.list-manage.com/subscribe/post?u=c330585c1144a0dd4bfd6d0df&id=b7e663bdf4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2></h2>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Enter your email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!--real people should not fill this in and expect good things - do not remove this or risk form bot signup-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_c330585c1144a0dd4bfd6d0df_b7e663bdf4" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Get Early Access" name="subscribe" id="mc-embedded-subscribe" class="button" onclick="submission();"></div>
</div>
</form>
I know I am a little too late for this, but I have found the solution for future references.
For 'classic' form only
Looks like the HTML code is not copied properly. In the mailchimp embed form dashboard, look for the scripts after the outer div, the one containing the form, these scripts will validate your form. My embed form has two scripts after the outer div :
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
and
<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
second script may vary depending upon your form fields, but I think you definitely need to add the mc-validate.js to resolve this issue.
Hope this helps.
Remove target="_blank" from your form tag.
in my case, it is because of the form validation script. i removed the script and do a simple email input text validation on my own.

Custom Form Button

Ok Guys, i have this code:
<a class="button" href="#"><span>SEND</span></a>
how i can transtorm this in a submit form button?
i have tried this, but dont worlks...
<div class="contato_form" id="contato_form">
<form id="form1" name="form1" method="post" action="javascript:envia_contato();">
<p><label for="nome">Name:</label><input class="campo_contato" type="text" name="nome" id="nome" /></p>
<p><label for="email">Email:</label><input class="campo_contato" type="text" name="email" id="email" /></p>
</form>
<div class="clear">
<p><a class="botao" href="#" onclick="javascript:envia_contato();"><span>SUBMIT</span></a></p>
</div>
</br>
</div>
You have a couple of problems.
Your form action should not be the same as the onclick of the submit buton. The form action should be the page which will receive the data you send. So there you have to put a page which is not only HTML but a page server side handled (i.e. PHP, ASP, ASP.NET, JSP, etc.).
Your javascript function envia_contato is not defined in the code you shared, so you have to define it somewhere in the HTML (using a script tag) before using it (like Bhanu suggested):
<script>
function envia_contato()
{
form1.submit();
}
</script>
<div class="contato_form" id="contato_form">
<form id="form1" name="form1" method="post" action="/echo/json/">
<p>
<label for="nome">Name:</label>
<input class="campo_contato" type="text" name="nome" id="nome" />
</p>
<p>
<label for="email">Email:</label>
<input class="campo_contato" type="text" name="email" id="email" />
</p>
</form>
<div class="clear">
<p><a class="botao" href="#" onclick="envia_contato(); return false;"><span>SUBMIT</span></a></p>
</div>
<br/>
</div>
Or you may discard the envia_contato function and call the submit directly (like JK did):
<p><a class="botao" href="#" onclick="form1.submit(); return false;"><span>SUBMIT</span></a></p>
The return false; at the end of the onclick will avoid further events to be raised after that javascript is called, so if you return false the redirección to # will not be done (such redirection is not really important most times, but this way it will do exactly what you need, and you don't need that redirection).
And the following things are not real problems because in most HTML parsers will work anyway (but you may be interested in knowing this anyway):
But you don't need the javascript: when you attach javascript events (like onclick), you need it when something else is expected (like in the href which expects a just a link and not javascript, so you use the prefix to define javascript in there).
Your br tag had the / before the br and it should be just <br> or <br/>.
Try using:
<a class="botao" href="#" onclick="form1.submit()">
you have to do submit form on anchor tag onclick event
function envia_contato()
{
document.form1.submit();
}

Categories

Resources