How to submit form data with Zurb Foundation - forms

I'm a beginner trying to set up my first form with Zurb Foundation, and I'm not able to find in the documentation the info on how to actually pass the data. It's just a basic contact form with name/email/message that I'd like sent to my email once people click the Submit button... and I don't know how to do that.
I apologize for the simple question, your help is greatly appreciated.

Zurb foundation is front end frame work for website design and development , if you want to submit the form or do server communications, please read some basics,
HTML form and input : http://www.w3schools.com/html/html_forms.asp
Submitting HTML form using Jquery AJAX :
Submitting HTML form using Jquery AJAX
AJAX - Send a Request To a Server : http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

The HTML part:
<form action="form_contact_process.php" method="POST" name="contact" id="contact">
<fieldset>
<legend>Contact form</legend>
<div class="row collapse">
<label for="name">Name</label>
<input type="text" name="name" id="name">
</div>
<div class="row collapse">
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div class="row collapse">
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone">
</div>
<div class="row collapse">
<label for="message">Message</label>
<textarea name="message" id="message" rows="5"></textarea>
</div>
<div class="row collapse">
<input class="button small large-12" type="submit" value="Submit">
</div>
</fieldset>
</form>
Then over at form_contact_process.php:
<?php
$name = $_POST['name'];
...
echo $name;

Related

When submit I want to receive the message on my mail (duplicate)

Here's my code for my new website
<div class="single_contant_left">
<form action="#" id="formid">
<!--<div class="col-lg-8 col-md-8 col-sm-10 col-lg-offset-2 col-md-offset-2 col-sm-offset-1">-->
<div class="form-group">
<input type="text" class="form-control" name="name" placeholder="first name" required="">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Email" required="">
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" placeholder="Subject" required="">
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="8" placeholder="Message"></textarea>
</div>
<div class="">
<input type="submit" value="Submit" class="btn btn-primary">
and when I want someone who clikck on submit, i want to receive the message on my personal mail.
Any idea ?
Thanks
First you will need to make sure you know where you want to send the email from. Which computer should send the email? The server where you submit the form, or the client computer on which the web browser of the user is running?
If you want the server to send the email, you will need to write server-side code which will handle the form submit when the user clicks on the submit button. Inside that server-side code, you might use your own SMTP, or you can use a server-side mailer API, there are tons of possibilities and we are not aware of what server-side technology you are using, if any.
Of course you can send the emails from the browser as well, using a client-side mailer API.

Bootstrap and Struts2 form with validation

I'm using struts2 in my project and I'm trying to add bootstrap responsive features.
I have a form with validation (via xml and class validation())
Now the form look like this:
<s:form action="Welcome" method="post" validate="true">
<div class="form-group row">
<div >
<small id="passwordHelp" class="text-danger">Must be 8-20 characters long.</small>
</div>
<label for="inputPassword" class="col-sm-2 col-form-label text-danger">Password</label>
<div >
<input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password">
</div>
</div>
</s:form>
the problem is that the error message is shown in any case (even at the first call of the jsp with the form (befor the submit itself)
What am I doing wrong?

How to Add CAPTCHA ControlForm into page

I found CAPTCHA Control in Kentico and it's Types (Simple - Logic - Text) CAPTCHA
Now, how can I add it inside WebZone?
I tried using it as a WebPart but it's not like webparts can be added inside Zone
What Steps Should i Follow?
</div>
<div id="MessageForm">
<div class="feedback_form">
<h2>Feedback</h2>
<div class="feedback_input">
<span>Name</span><input class="text_feedback" type="text" value="" />
</div>
<div class="feedback_input">
<span>Email</span><input class="text_feedback" type="text" value="" />
</div>
<div class="feedback_input">
<span>Subject</span><input class="text_feedback" type="text" value="" />
</div>
<div class="feedback_input Message">
<span>Message</span><textarea class="Message_input" rows="4" cols="50"></textarea>
</div>
<div class="feedback_input">
<input class="send" type="submit" value="" />
<img src="image/Captcha.png" />
<input class="type_Captcha" type="text" value="Enter Captcha ... " />
</div>
</div>
</div>
</div>
That's what i'm trying to do.
Replace the html Code inside my form for this areaZone and put customize webpart if available to do the required function.
You can use out of the box functionality called Forms. See "Creating a new form" in documentation and just add CAPTCHA as one of the fields. Then use On-line form web part on your web site. That's all.

Do not understand form action right

This is the first time I've try to use a formulae to make a contact page on my site.
This is the code I use (and tried to adapt for my purposes):
<div id="main" class="content container bottom clearfix">
<div class="cont row">
<!-- FORM-->
<div class="form sevencol" style="width:52%">
<form action="mailto:contact#stefanseifert.com" id="contactForm" method="post">
<ul class="contactform">
<li><input type="text" name="contactName" id="contactName" value="" class="required requiredField"/>
<label for="contactName">Name</label>
</li>
<li>
<input type="text" name="email" id="email" value="" class="required requiredField email"/>
<label for="email">E-Mail</label>
</li>
<li class="textarea">
<textarea name="comments" id="commentsText" rows="10" cols="10" class=" required requiredField"></textarea>
</li>
<li>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6Lf-ueMSAAAAAExUbwjvdqnNuNjlkeN3_wQyl720"></script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6Lf-ueMSAAAAAExUbwjvdqnNuNjlkeN3_wQyl720" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
</li>
<li class="buttons"><br>
<input type="hidden" name="submitted" id="submitted" value="true"/>
<button type="submit" class="submit superlink">E-Mail senden</button>
</li>
</ul>
</form>
</div>
<!-- END FORM-->
</div>
The result of it, is that every time I test it my Email program opens and fills part of the code inside a new mail of mine.
What is wrong here?
What I wanted was that a mail with the content of the input fields is sent to me, instead!
Appreciate your help!
Thanks very much
Garavani
You can't send an email out of the browser.
<form action="mailto:contact#stefanseifert.com" ... specifies what should happen, once the form is submitted. This action opens the standard email client to send an email to that address - that's what you experienced.
if you want the email to be sent automatically by a server to you, you need to implement it in php, c#, java - or any other language on that server, and send the form data to the server

Is it possible to code a form over multiple divs?

I'm coding an email subscription form (api's proving a nightmare on their own) and I was wondering if it is possible to write a form across divs, as per below...
<div id="topsubscribe_label">STAY UP TO DATE, JOIN OUR MAILING LIST: </div>
<form id="signup" action="<?=$_SERVER['PHP_SELF']; ?>" method="get">
<div id="subforminputs">
<input type="email" name="email" id="email" class="toptextinput" value="" placeholder="you#example.com"/><br />
</div>
<div id="topsubscribe_submit">
<input type="submit" id="topregisterButton" name="submit" class="textinput" value="Subscribe" />
</form>
</div>
Will this break the form? Is there another (simple) way to do this?
You can do this
<div>
<div>
<form>
</form>
</div>
</div>
You can also do this
<form>
<div>
</div>
<div>
</div>
</form>
But you cannot do this
<form>
<div>
</form>
</div>
Browser won't show any errors, you might have different output. Each browser handles these error diffrently.
This is acceptable:
<div>
<form>
<div><input /><input /></div>
<div><input /><input /></div>
</form>
</div>
This is not:
<div>
<form>
<input /><input />
</div>
<div>
<input /><input />
</form>
</div>
It may be worth noting that overlapping tags as in the 2nd example is invalid for all tags; not just form tags.
If you just want to group some fields, you can use fieldset element.