reCAPTCHA - Enable Submit button if passed - php

I have a form which a user will complete with required fields. When all the required fields are completed, the submit button can be clicked to send the data.
I have been looking into googles reCAPTCHA, which seems to be working. However, is there a way I can put this as a required field? Currently, when the form is completed, the user can submit the form without verifying them self with the reCAPTCHA. Where as I would like the button to only become available once the required fields are completed.
Code Added as requested. Don't think it will be useful but this is all I have so far (as I have been trying figure out a way how to do this)
<form role="form" method="post" id="get_started_form" action="<?php echo base_url('auth/get_started')?>" data-toggle="validator" enctype="multipart/form-data">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<div class="form-group has-feedback">
<label>First Name</label>
<input name="first_name" type="text" class="form-control" required pattern="^[a-zA-Z\-.,\s]+$" data-error="Please use text or symbols (- . ,) only." placeholder="First Name" id="first_name" maxlength="50" tabindex="1">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<div class="form-group has-feedback">
<label>Last Name</label>
<input name="last_name" type="text" class="form-control" required pattern="^[a-zA-Z\-.,\s]+$" data-error="Please use text or symbols (- . ,) only." placeholder="Last Name" id="last_name" maxlength="50" tabindex="2">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="form-group has-feedback">
<label>Email</label>
<input name="email" type="email" class="form-control" required placeholder="Text#Text.Domain" id="email" maxlength="100" tabindex="3">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="g-recaptcha" data-sitekey="KEY_HERE"></div>
<button type="submit" value="Submit" id="get_staretd_form_button" class="btn btn-primary">Get Started</button>
</div>
</div>
</form>

You can try this ReCAPTCHA
.....................

Related

Next Label using tab on keyboard (Bootstrap)

I'm a beginner at Bootstrap. When I press Tab, I want to select the next tab.
Click loan_form.php and then the cursor is automatically in Loan Name. After you complete it and press tab on the keyboard, the cursor will move to the Department label instead of the Device code label:
<div class="row">
<div class="col-md-6 mb-3">
<label>* Loan Name</label>
<input type="text" class="form-control" name="loan_name" id="loan_name" placeholder="Full Name" required>
</div>
<div class="col-md-6 mb-3">
<label>Device Code</label>
<select name="device_code" class="form-control" id="device_code" data-validetta="required" ></select>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6 mb-3">
<label>* Department</label>
<input type="text" class="form-control" name="dept" id="dept" placeholder="Department" required></div>
<div class="col-md-6 mb-3">
<label>Brand</label>
<input type="text" class="form-control" name="device_brand" id="device_brand" placeholder="Brand" disabled required>
</div>
Use tabindex html tag in all the input fields. See reformatted code here:
<div class="row">
<div class="col-md-6 mb-3">
<label>* Loan Name</label>
<input type="text" class="form-control" name="loan_name" id="loan_name" placeholder="Full Name" required tabindex="1">
</div>
<div class="col-md-6 mb-3">
<label>Device Code</label>
<select name="device_code" class="form-control" id="device_code" data-validetta="required" tabindex="2"></select>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6 mb-3">
<label>* Department</label>
<input type="text" class="form-control" name="dept" id="dept" placeholder="Department" required tabindex="3"></div>
<div class="col-md-6 mb-3">
<label>Brand</label>
<input type="text" class="form-control" name="device_brand" id="device_brand" placeholder="Brand" disabled required tabindex="4">
</div>

How to get values of a two contact forms which is in two separate tabs in php?

I have a contact form in php which has has two tabs containing two different contact forms. I want to get all the values of both the forms and send it as an email. I have coded it for one of the tab, but i am not getting the values of each of the field in the contact form in that tab. Can anyone tell how to do this ? My code is shown below for one of the tab:
<form name="contactForm" id='contact_form' method="post" action=''>
<div tab-id="1" class="tab active">
<div class="form-inline">
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="name" id="exampleInputName" placeholder="name" >
</div>
<div class="form-group col-sm-12 padd">
<input type="email" class="form-control" name="email" id="exampleInputEmail" placeholder="email address">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="telephone" placeholder="phone">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="Country" id="exampleInputName" placeholder="Country" >
</div>
<div class="form-group col-sm-12 padd">
<textarea class="form-control" name="message" rows="3" id="exampleInputMessage" placeholder="message" ></textarea>
</div>
</div>
<div class="form-group col-xs-12 padd">
<div id='mail_success' class='success' style="display:none;">Your message has been sent successfully.
</div><!-- success message -->
<div id='mail_fail' class='error' style="display:none;"> Sorry, error occured this time sending your message.
</div><!-- error message -->
</div>
<div class="form-group col-xs-8 padd">
<div class="g-recaptcha" data-sitekey="6LcJqyITAAAAABks5hnD6U_2ptu09RiXYOHvNNud"></div>
</div>
<div class="form-group col-sm-4 padd" id='submit'>
<input type="submit" id='send_message' name="send" class="btn btn-lg costom-btn" value="send">
</div>
</div>
<div tab-id="2" class="tab">
<div class="form-inline">
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="name" id="exampleInputName" placeholder="full name" >
</div>
<div class="form-group col-sm-6 padd">
<input type="email" class="form-control" name="email" id="exampleInputEmail" placeholder="Email">
</div>
<div class="form-group col-sm-6 pad">
<input type="text" class="form-control" name="telephone" placeholder="Phone">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="subject" id="exampleInputSubject" placeholder="Tell us about your project in your own words ?" >
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="subject" id="exampleInputSubject" placeholder="Tell us about you or your company" >
</div>
<div class="form-group col-sm-12 padd">
<p>Which services are you interested in ?</p>
<p>
<input type="checkbox" id="test1" />
<label for="test1"></label>
</p>
<p>
<input type="checkbox" id="test2"/>
<label for="test2"></label>
</p>
<p>
<input type="checkbox" id="test3"/>
<label for="test3"></label>
</p>
<p>
<input type="checkbox" id="test4"/>
<label for="test4"></label>
</p>
<p>
<input type="checkbox" id="test5"/>
<label for="test5"></label>
</p>
<p>
<input type="checkbox" id="test6"/>
<label for="test6"></label>
</p>
</div>
</div>
<div class="form-group col-xs-12">
<div id='mail_success' class='success' style="display:none;">Your message has been sent successfully.
</div><!-- success message -->
<div id='mail_fail' class='error' style="display:none;"> Sorry, error occured this time sending your message.
</div><!-- error message -->
</div>
<div class="form-group col-sm-12" id='submit'>
<input type="submit" id='send_message' class="btn btn-lg costom-btn" value="send">
</div>
</div>
</form>
Please try with this code.
<form name="contactForm" id='contact_form' method="post" action='php/email.php'>
//This is the first tab
<div tab-id="1" class="tab active">
<div class="form-inline">
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="name" id="exampleInputName" placeholder="name" >
</div>
<div class="form-group col-sm-12 padd">
<input type="email" class="form-control" name="email" id="exampleInputEmail" placeholder="email address">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="telephone" placeholder="phone">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="Country" id="exampleInputName" placeholder="Country" >
</div>
<div class="form-group col-sm-12 padd">
<textarea class="form-control" name="message" rows="3" id="exampleInputMessage" placeholder="message" ></textarea>
</div>
</div>
<div class="form-group col-xs-12 padd">
<div id='mail_success' class='success' style="display:none;">Your message has been sent successfully.
</div><!-- success message -->
<div id='mail_fail' class='error' style="display:none;"> Sorry, error occured this time sending your message.
</div><!-- error message -->
</div>
<div class="form-group col-xs-8 padd">
<div class="g-recaptcha" data-sitekey="6LcJqyITAAAAABks5hnD6U_2ptu09RiXYOHvNNud"></div>
</div>
<div class="form-group col-sm-4 padd" id='submit'>
<input type="submit" id='send_message' name="send" class="btn btn-lg costom-btn" value="send">
</div>
</div>
//This is the Second tab
<div tab-id="2" class="tab">
<div class="form-inline">
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="name" id="exampleInputName" placeholder="full name" >
</div>
<div class="form-group col-sm-6 padd">
<input type="email" class="form-control" name="email" id="exampleInputEmail" placeholder="Email">
</div>
<div class="form-group col-sm-6 pad">
<input type="text" class="form-control" name="telephone" placeholder="Phone">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="subject" id="exampleInputSubject" placeholder="Tell us about your project in your own words ?" >
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="subject" id="exampleInputSubject" placeholder="Tell us about you or your company" >
</div>
<div class="form-group col-sm-12 padd">
<p>Which services are you interested in ?</p>
<form action="#">
<p>
<input type="checkbox" id="test1" />
<label for="test1">Web Design & development</label>
</p>
<p>
<input type="checkbox" id="test2"/>
<label for="test2">E-Commerce Solutions</label>
</p>
<p>
<input type="checkbox" id="test3"/>
<label for="test3">Digital Marketing</label>
</p>
<p>
<input type="checkbox" id="test4"/>
<label for="test4">SEO Solutions</label>
</p>
<p>
<input type="checkbox" id="test5"/>
<label for="test5">2D&3D Animation</label>
</p>
<p>
<input type="checkbox" id="test6"/>
<label for="test6">Game development</label>
</p>
</div>
</div>
<div class="form-group col-xs-12">
<div id='mail_success' class='success' style="display:none;">Your message has been sent successfully.
</div><!-- success message -->
<div id='mail_fail' class='error' style="display:none;"> Sorry, error occured this time sending your message.
</div><!-- error message -->
</div>
<div class="form-group col-sm-12" id='submit'>
<input type="submit" id='send_message' class="btn btn-lg costom-btn" value="send">
</div>
</form>
</div>
Assuming the following form-tab html structure:
<form name="contactForm" id='contact_form' method="post" action=''>
<div tab-id="1" class="tab active">
...
<input name="field1" value="" class="form-control" />
<input name="field2" value="" class="form-control" />
</div>
<div tab-id="2" class="tab">
...
<input name="field1" value="" class="form-control" />
<input name="field2" value="" class="form-control" />
</div>
</form>
As your div tabs have not attribute called id, and the class attribute you assigned is the same for every tab, it is not clear to see how to define the jquery selector for the inputs within those tabs you created.
You can access the values of each tab, using jquery as follows:
var fields = {}
fields.tab1 = {}
fields.tab1.field1 = $('div[tab-id=1] input[name=field1]').val()
fields.tab1.field2 = $('div[tab-id=1] input[name=field2]').val()
fields.tab2 = {}
fields.tab2.field1 = $('div[tab-id=2] input[name=field1]').val()
fields.tab2.field2 = $('div[tab-id=2] input[name=field2]').val()
Here is the fiddle of the working example.
var datastring = $("#contact_form").serialize();
alert(datastring);
try this in jquery after , you wiil get all the elements values between the
...
here data strings gives output as below
name=tj&email=tj#gmail.com&telephone=8888888888&Country=ind&message=msdfdf&name=tj&email=tj#gmail.com&telephone=12345689&subject=sub&subject=sub

Web site send message

When i post a Message from my web page it returns a ? in the browser such as this,
I believe both the HTML and the php to be correct
The html......
`enter code here`
<form class="form-horizontal">
<fieldset>
<div class="form-group is-empty">
<label for="Name" class="col-md-2 control- label">Name</label>
<div class="col-md-10">
<input type="text" class="form-control" id="Name" placeholder="Name">
</div>
</div>
<div class="form-group is-empty">
<label for="Email" class="col-md-2 control-label">Email</label>
<div class="col-md-10">
<input type="email" class="form-control" id="Email" placeholder="Email">
</div>
</div>
<div class="form-group is-empty">
<label for="Message" class="col-md-2 control-label">Message</label>
<div class="col-md-10">
<input type="text" class="form-control" id="Message" placeholder="Message">
</div>
</div>
<div class="form-group">
<form action="sendcontact.php" method="post">
<div class="col-md-10 col-md-offset-2">
<button type="submit">Send Message</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</section>
enter code here
you have declare form method and its action in form tag. Something like as follows
<form action="actionPage.php" method="POST"> //you can send data in get method or post method
Hope this will work for you...
action="yourLoctionUrl" tell the form where to submit data.
if you will do it empty then it will show ?yourinput fields&other inputs
<form action="sendcontact.php" method="post" class="form-horizontal">
<fieldset>
<div class="form-group is-empty">
<label for="Name" class="col-md-2 control- label">Name</label>
<div class="col-md-10">
<input type="text" class="form-control" id="Name" placeholder="Name">
</div>
</div>
<div class="form-group is-empty">
<label for="Email" class="col-md-2 control-label">Email</label>
<div class="col-md-10">
<input type="email" class="form-control" id="Email" placeholder="Email">
</div>
</div>
<div class="form-group is-empty">
<label for="Message" class="col-md-2 control-label">Message</label>
<div class="col-md-10">
<input type="text" class="form-control" id="Message" placeholder="Message">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-2">
<button type="submit">Send Message</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
You have used form tag twice in your coding. put your action and post in starting form tag as i did.
You didn't close the second form tag. Go for this:
<form action="sendcontact.php" method="post">
<div class="col-md-10 col-md-offset-2">
<button type="submit">Send Message</button>
</div>
</form>

The requested URL /chat//layercake/form_validation was not found on this server

In Codeigniter I am trying to call a function from form action and I get the following error:
requested URL /chat//layercake/form_validation was not found on this server.
<form class="form-horizontal" id="contact" data-toggle="validator" enctype="multipart/form-data" role="form" method="post" action="<?php echo base_url().'/layercake/form_validation'; ?>">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-10">
<textarea class="form-control" id="message" rows="4" name="message" required></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2 alert">
</div>
</div>
</form>
Please help.
Change your action url base_url().'/layercake/form_validation'; to base_url().'layercake/form_validation';
Please look at your error. There are two // after chat.
Your action URL is wrong. Change action="<?php echo base_url().'/layercake/form_validation'; ?>" this as following in form tag
action="<?php echo site_url('layercake/form_validation'); ?>"

Submit Modal and run PHP script

I have the following Bootstrap Modal, which I am just submitting and eventually it will send an email. For right now I am just trying to echo Signing Up.
<div class="modal-body">
<form class="form-horizontal" name="commentform" method="post" action="signup.php">
<div class="form-group">
<label class="control-label col-md-4" for="first_name">First Name</label>
<div class="col-md-6">
<input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4" for="last_name">Last Name</label>
<div class="col-md-6">
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4" for="email">Email Address</label>
<div class="col-md-6 input-group">
<span class="input-group-addon">#</span>
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address"/>
</div>
</div>
</form>
</div>
Here Is my signup.php code:
<?php
echo "Signing Up";
?>
However, when I run this on my dreamhost server and press the Sign Up button, nothing happens at all. My console provides me with this error: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Your code works fine for me as is (after adding a Submit button). See demo
Check your permissions on your files, make sure php files are 644 (-rw-r--r--)

Categories