Form Won't Submit With Javascript

Hi,

I am trying to add the following code to Contact Form 7 on Wordpress:
<div class="form">
<div class="f-name">
    [text* your-name watermark "Name *"]
</div>

<div class="f-email">
    [email* your-email watermark "Email *"]
</div>

<div class="f-subject">
    [text your-subject watermark "Phone"]
</div>

<div class="f-message">
    [textarea* your-message watermark "Message *"]
</div>

<div class="f-captcha">

<div class="f-captcha-insert">
    [captchac captcha-886 size:l] 
</div>

<div class="f-captcha-CONFIRM">
    [text* captchar captcha-886 size:m watermark "Please enter the characters above."]
</div>

</div>

<div class="bt-contact">
     <a class="btn-color btn-color-1d" **href="javascript:;"**>[submit "SEND EMAIL"]</a>
</div>

</div>

Open in new window


When i click save, it get a 403 error notifying me that i do not have permission... however if i add just the normal default Contact Form 7, it ads fine.

I started removing the code from the above form until i found out what was causing the problem. The line below is causing the problem, but i am not sure why:

href="javascript:;"

Can anyone suggest what could be wrong? Thank you.
oo7mlAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Big MontyWeb Ninja at largeCommented:
if you change

href="javascript:;"

to

href="#"

does it work?
oo7mlAuthor Commented:
Hi, it does and it doesn't.

The form will send fine if i use #, however if a field is left blank on the form, the default validation message shows BUT the input is no longer clickable.

I have the exact same form set up on another site with href="javascript:;" and if a field is left blank it is clickable afterwards... so it seems # also causes a problem (although a different problem)
Big MontyWeb Ninja at largeCommented:
href="javascript:;" is essentially saying make the <a> tag clickable, but don't associate any function with it. you can also try:

href="javascript:void(0)"

I doubt you'll get different results but worth a shot.

should there be any kind of function that runs when you click the link?
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

oo7mlAuthor Commented:
No, same problem, it won't allow me to submit the page with href="javascript:void(0)"

If i take out the link around the submit button it works, but if a field is left blank on the form, the default validation message shows BUT the input is no longer clickable.

<div class="bt-contact">
     [submit "SEND EMAIL"]
</div>
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
The code you have above is what you enter in your wordpress admin text box.  What does the rendered code look like?  

The 403 error probably means something good and you just need to update a permission.   What does the rendered html code look like if you just use

<div class="bt-contact">
     [submit "SEND EMAIL"]
</div>

Open in new window

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
We posted at the same time... what does the rendered html look like for  [submit "SEND EMAIL"].  What is the actual output you are going for?
oo7mlAuthor Commented:
Thanks Scott. It looks as follows (after you sumbit with an error validation):

<form name="" action="/#wpcf7-f134-o1" method="post" class="wpcf7-form invalid" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="134">
<input type="hidden" name="_wpcf7_version" value="4.1.1">
<input type="hidden" name="_wpcf7_locale" value="en_US">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f134-o1">
<input type="hidden" name="_wpnonce" value="5250dccdf6">
</div>
<div class="elano-form-simple-captcha">
<div class="f-name">
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="Name *"><span role="alert" class="wpcf7-not-valid-tip">Please fill in the required field.</span></span>
</div>
<div class="f-email">
    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="Email *"><span role="alert" class="wpcf7-not-valid-tip">Please fill in the required field.</span></span>
</div>
<div class="f-subject">
    <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Phone"></span>
</div>
<div class="f-message">
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="Message *"></textarea><span role="alert" class="wpcf7-not-valid-tip">Please fill in the required field.</span></span>
</div>
<div class="f-captcha">
<div class="f-captcha-insert">
    <input type="hidden" name="_wpcf7_captcha_challenge_captcha-886" value="1670429930"><img class="wpcf7-form-control wpcf7-captchac wpcf7-captcha-captcha-886" width="84" height="28" alt="captcha" src="http://mosaic.ie/wp-content/uploads/wpcf7_captcha/1670429930.png">
</div>
<div class="f-captcha-CONFIRM">
    <span class="wpcf7-form-control-wrap captchar"><input type="text" name="captchar" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-not-valid" aria-required="true" aria-invalid="true" placeholder="Please enter the characters above."><span role="alert" class="wpcf7-not-valid-tip">Please fill in the required field.</span></span>
</div>
</div>
<div class="bt-contact">
     <input type="submit" value="SEND EMAIL" class="wpcf7-form-control wpcf7-submit"><img class="ajax-loader" src="http://mosaic.ie/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden;">
</div>
</div>
<div class="wpcf7-response-output wpcf7-display-none wpcf7-validation-errors" role="alert" style="display: block;">Validation errors occurred. Please confirm the fields and submit it again.</div></form>

Open in new window

oo7mlAuthor Commented:
Might be a lot easier if you could see the site :-)

The contact form is at the bottom of the page.

goo.gl/9gYrUY
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I will look at your code. In the meantime, it does look like you can add a class and then add a style to your child theme to format how you want it to look.

http://contactform7.com/submit-button/

[submit class:button id:form-submit "Send Mail"]
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
fyi... That site comes very slow for me.  But I am on a slow connection today, probably not even 1.5 down.

Your using bootstrap so you can just add the class "btn btn-success" or whatever style you want.

http://jsbin.com/zabisifati/1/edit
  <input type="submit" value="SEND EMAIL" class="wpcf7-form-control wpcf7-submit btn btn-success" >   

Open in new window


To add those classes, I think you may need to use the code below in your admin panel

[submit class:btn btn-success id:form-submit "Send Mail"]

Then just get rid of the a link/javascript stuff

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
oo7mlAuthor Commented:
I tried that but it still won't allow me to enter the fields that had a validation error.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Since this uses javascript, the first thing to do is take care of the errors  http://validator.w3.org/check?uri=http%3A%2F%2Fmosaic.ie%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

The reason is you have things like duplicate id's and style tags inside of div's.  The validator just stopped working.  Things like img missing the alt element are not going to break this, but the other stuff will.

Let's get this error free and then work on this.

fyi, in my own testing of your page, at first I put the email in the phone number.  I couldn't edit anything after the error.  When I refreshed the page I used my ee email and it said it was sent although I have not received it yet (I think).  

It's possible the reason I couldn't edit the form with the error and the page taking forever to load has something to do with the validation errors.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.