PHP Form with captcha formatting issues

[doublejz]

Still learning PHP but about ready give up on this task. I'm trying to take an existing contact form for a user and add a simple captcha check box to it. However, the only way I can get it to work is by changing pretty much all the code around but then I lose the style/formatting.

No captcha

            <form action="index.php" id="contact-form" method="post">
            <ol class="forms">
                    <li>
                        <label for="name">Name:</label>
                        <?php if($nameError != '') { ?>
                            <span class="error"><?=$nameError;?></span> 
                        <?php } ?>                
                        <input type="text" name="name" id="name" value="<?php if(isset($_POST['name'])) echo $_POST['name'];?>" class="required" />
                    </li>
                    <li>
                        <label for="email">Email:</label>
                        <?php if($emailError != '') { ?>
                            <span class="error"><?=$emailError;?></span>
                        <?php } ?>                
                        <input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" class="required" />
                    </li>
                        <li class="textarea"><label for="textarea">Message:</label>
                        <?php if($textareaError != '') { ?>
                            <span class="error"><?=$textareaError;?></span> 
                        <?php } ?>            
                        <textarea name="textarea" id="textarea" rows="10" cols="30" class="required"><?php if(isset($_POST['textarea'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['textarea']); } else { echo $_POST['textarea']; } } ?></textarea>
                    </li>
                    </ol>
                    <ol class="button-group">
                    <li>
                        <div>
                            <input type="hidden" name="submitted" id="submitted" value="true">
                            <input type="submit" value="Submit" class="submit">
                        </div>
                    </li>
                </ol>
            </form>

 

With captcha

			<form action="index2.php" id="contact-form" method="post>
			<form id="frmContact" action="" method="POST" novalidate>
			<div class="theme-default">Name:</div>
			<div class="field">
				<input type="text" id="name" name="name" placeholder="enter your name here" title="Please enter your name" class="required">
			</div>
			<div class="label">Email:</div>
			<div class="field">			
				<input type="text" id="email" name="email" placeholder="enter your email address here" title="Please enter your email address" class="required email">
			</div>
			<div class="label">Comments:</div>
			<div class="field">			
				<textarea id="comment-content" name="content" placeholder="enter your comments here"></textarea>			
			</div>
			<div class="g-recaptcha" data-sitekey="<?php echo SITE_KEY; ?>"></div>			
			<div id="mail-status"></div>			
			<button type="Submit" id="send-message" style="clear:both;">Send Message</button>
		</form>
		<div id="loader-icon" style="display:none;"><img src="img/loader.gif" /></div>
		</div>		
			</form>

 

 

Its probably something super simple as I'm still self learning PHP on the side but its driving me crazy trying to figure out how to keep the formatting/class/style/etc.

 

TIA

[mac_gyver]

this isn't a php issue. it's a html problem. you can add the recpatcha <div class="g-recaptcha" data-sitekey="<?php echo SITE_KEY; ?>"></div> into your original markup, similar to how the submit button exists in that markup.

[doublejz]

That is what I thought originally. However, no matter where I put <div class="g-recaptcha" data-sitekey="<?php echo SITE_KEY; ?>"></div> in the form, it stops loading the rest of the page once refreshed.

[mac_gyver]

you would need to find and fix what's causing that symptom. is this a public site you can post a link to? otherwise, you would need to post all the relevant code, less security related things like your private recaptcha key, needed to reproduce the problem.

[doublejz]

It is a public site. The current non-recaptcha version is here. You'll obviously be able to see all the source except for the PHP post checks to submit the contact form, which should be irrelevant at this point.

http://www.decal-kreations.com/

Any advise will be greatly appreciated.

[maxxd]

No idea what your css looks like, but the second snippet is a form within a form, and all the fields are inside the inner form. Depending on how your element selectors are set up, that could cause a problem. Either way, if I'm not mistaken it'll almost certainly effect your form function.

[mac_gyver]

1 hour ago, doublejz said:

The current non-recaptcha version is here

how would this help anyone to help you with any problem concerning the incorrect operation of the recaptcha coded page?

[doublejz]

10 hours ago, mac_gyver said:

how would this help anyone to help you with any problem concerning the incorrect operation of the recaptcha coded page?

Sorry forget the second link.

Current non-recaptcha
http://www.decal-kreations.com/
 

Recaptcha - Works but that loses all formatting/style
http://decal-kreations.com/index2.php

I also just added this one
Recaptcha - with just the div class="g-recaptcha" data-sitekey="<?php echo SITE_KEY; ?>"></div> added but seems to break everything
http://decal-kreations.com/index3.php