I have very little knowledge of php so I went ahead and used one from css-tricks email forms he set up for free use:http://css-tricks.com/nice-and-simple-contact-form/.
However I am not sure how to put it into the website without breaking the php code. I assume I can't simply just take the code that I want, which is
<div id="contact-area">
<form method="post" action="contactengine.php">
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name" />
<label for="City">City:</label>
<input type="text" name="City" id="City" />
<label for="Email">Email:</label>
<input type="text" name="Email" id="Email" />
<label for="Message">Message:</label><br />
<textarea name="Message" rows="20" cols="20" id="Message"></textarea>
<input type="submit" name="submit" value="Submit" class="submit-button" />
</form>
<div style="clear: both;"></div>
<p>Check out a version of this with SPAM protection.</p>
</div>
and put it into my html page. I tried using an iframe to link the html page into my html page for my website and it worked, but is this method ok?
Yes, you can just place that coding in your HTML page as long as all the webpage and css file's are linked correctly.(e.g. In the same folder as this page with the coding you have now.)
Using an i-frame for this is not a good idea as it can really mess up your pages and submitting your form.
Related
Problem
My page seems to be defaulting to my PHP code instead of being handled asynchronously via ajax. As of now, my page just reloads as a blank screen, the input array successfully got passed over to the PHP, which is comforting, but I seem to just be doing something wrong with the ajax.
What I've tried
After viewing this link and this link, I still cant seem to get this figured out.
Current Standing
Here is the HTML:
<form class="cmxform" id="commentForm" method="" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="spinner">How much do you love science? (optional)</label>
<input id="spinner" name="spinner">
</p>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" 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="aoi">Area of Interest (optional)</label>
<input id="aoi" type="text" name="aoi">
</p>
<p>
<label for="currprobs">Current Problems (optional)</label>
<input id="currprobs" type="text" name="currprobs">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input id="launch" type="submit" value="Submit">
</p>
</fieldset>
</form>
<div id="results"></div>
Here is the javascript:
$(document).ready(function(){
$("#commentForm").submit(function(event){
/*
var formData = {
'name' : $('input[name=name]').val(),
'email' : $('input[name=email]').val(),
};
*/
alert("SUCCESS?");
});
});
PHP code to return a div after the user has been validated:
<?php
$username = isset($_POST['name'])? trim($_POST['name']):'';
$email= isset($_POST['email'])? trim($_POST['email']):'';
echo '<div id=dynamicDiv>
<p>Hello, '.$username.'!</p>
<p>We look forward to contacting you at, '.$email.'</p>
</div>';
?>
Feedback
Any thoughts are appreciated, even intellectual conversation. Code snippets are idea, but I appreciate anything the community is able
Edit 1
I motified the javascript and php to reflect knowledgable input and best practice for PHP and AJAX calls, however the issue still remains.
Edit 2
My goal now is to just get an alert() statement working inside of my javascript, ajax will be the next step.
I think problem is here
$("#results").html = html_i;
You try change to
$("#results").html(html_i);
And in php you should check name and email
$username = isset($_POST['name'])? trim($_POST['name']):'';
$email= isset($_POST['email'])? trim($_POST['email']):'';
You should change input type="submit" to input type="button" and call Ajax on onclick function, Its resolve your problem because submit button submit form and Ajax call pending not reached to 400 state.
Using HTML form with action = "www.google.com", but it redirect to link including localhost/www.google.com . My example code is for your reference. Please anyone help me.
My Forms as follows :
<form method="POST" action="www.google.com">
<p>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
</p>
<p>
<label for="email">Email:</label>
<input type="email" name="email" id="email">
</p>
<p>
<label for="comments">Comments:</label>
<textarea name="comments" id="comments"></textarea>
</p>
<p>
<input type="submit" name="send" id="send" value="Send Comments">
</p>
</form>
But, the file when click send button, it redirects to
" http://localhost/basic/www.google.com" error page. Can any one suggest me to resolve the issue.
It is not allowed to send POST request directly to google.com. Why do you want to do this? In the action argument you should have own script which can process request from your form.
Replace your form action
From
action="www.google.com"
To actual link
action="https://www.google.com"
I have compleated the html and css of a website and I intend to host it on AWS. I have two forms on the site(html/css) and I need to make them functional. My php knowlege and database is very basic and I haven't use AWS before. How should I procead about making my froms functional? Is there any prebuild features in AWS that I could use for this purpuse? Perhaps a good tutorial I could fallow.. My forms are very simple and I'm only requesting a few input fields from visitors that I would need to have access to.
I will really apreciate any advice.
Here is my html:
<form
name="submitForm"
method="post"
id="submitMessageForm"
onsubmit="return(validate())"
action="./index.php?action=submitted"
class="form-style">
<label for="name">Name:</label>
<input
type="text"
id="nameFirst"
name="nameFirst"
placeholder="Enter Name"/>
<label for="email">Email:</label>
<input
type="text"
id="email"
name="email"
placeholder="Enter Email"/>
<label for="messageContent">Message:</label>
<textarea
id="messageContent"
name="messageContent"
rows="7"></textarea>
<br>
<input
style="padding: 6px !important;"
class="button"
type="submit"
id="submit"
name="SEND"/>
</form>
I've used the exact files from this tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
The ideea is to submit the form without refreshing, and displaying a nice animation after submission.
But when I try to use the files for my personalised form, the animation doesn't work on Chrome and Opera. Why?
<div id="contact_form">
<form name="contact" method="post" action="">
<p>Hi, my name is</p>
<input type="text" name="name" id="name" class="input" size="20" value="" class="text-input" />
<p> and my email is</p>
<input type="text" name="email" id="email" class="input" size="20" value="" class="text-input"/>
<p>More Random Text.</p>
<textarea name="message" id="message" class="input" onfocus="this.value='';" class="text-input"> ... </textarea>
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</form>
</div>
Everything works ok in this fiddle:
http://jsfiddle.net/CTGa3/2/
Works in Firefox and Chrome. I am not using your php because I don't have access to it. Instead, I am doing a dummy ajax call via jsfiddle, but the result should be the same.
The only thing I could see is that you didn't include the code for runOnLoad. If you include the code, or remove the runOnLoad() call, everything works fine. That piece of code is outdated anyway, because jQuery can do that for us. You just have to move this line:
$("input#name").select().focus();
To the top of your jQuery code block:
http://jsfiddle.net/CTGa3/3/
I'm relatively new to PHP so forgive me if this seems obvious. How would you integrate a block of HTML code like this:
<form action="form.php" method="post" enctype="multipart/form-data">
<label></label>
<input name="name" required="required" placeholder="Your Name">
<label></label>
<input name="email" type="email" required="required" placeholder="Your Email">
<label></label>
<input name="address" type="name" required="required" placeholder="Your Address">
<label></label>
<textarea name="message" required > Dear Mr. X, Please support us... </textarea>
<input id="cancel" name="cancel" value="Cancel" />
<input id="submit" name="submit" type="submit" value="Submit">
</form>
into here:
if(empty($mpemail)){
echo "<h2>Send your MP our pre-written letter</h2>
<p>Unfortunately, your MP's email address is not listed in our database.</p>";
}
else {
echo "<h2>Send your MP our pre-written letter</h2>";
echo "<p>Please fill out the information required below:</p>";
**Insert Contact Form Here**
echo "<h2>Share this with your followers!</h2>";
echo 'Tweet ';
echo "<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>";
}
Thanks in advance for your help.
So, one option is to echo it out line by line, as your PHP code sample is doing, or in one big block. You can also combine PHP and HTML in the same file by starting and stopping the PHP interpreter. Here's an example of that:
if (empty($mpemail))
{
echo "<h2>Send your MP our pre-written letter</h2>
<p>Unfortunately, your MP's email address is not listed in our database.</p>";
}
else
{
?>
<h2>Send your MP our pre-written letter</h2>
<p>Please fill out the information required below:</p>
<form action="form.php" method="post" enctype="multipart/form-data">
<label></label>
<input name="name" required="required" placeholder="Your Name">
<label></label>
<input name="email" type="email" required="required" placeholder="Your Email">
<label></label>
<input name="address" type="name" required="required" placeholder="Your Address">
<label></label>
<textarea name="message" required > Dear Mr. X, Please support us... </textarea>
<input id="cancel" name="cancel" value="Cancel" />
<input id="submit" name="submit" type="submit" value="Submit">
</form>
<h2>Share this with your followers!</h2>
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<?php
}
In a professional production application, the "right way" to do it is to separate your HTML from your PHP by putting the logic of your application in a separate PHP file, and then putting your HTML in a "template" which you load and display from PHP. Here is a bit of info about getting started with template engines and Model View Controller patterns in an application. But, for what you're trying to do, the example above of starting and stopping the interpreter should work for you.