Redirection not working

OK, so first, your form is styled not to show labels, which is not good, because visitors will not now what to enter.

When the form is submitted, there is an element that shows you the error:

<div class="ajax-error">Unexpected token < in JSON at position 0</div>

Take a close look at your contact form and look at the HTML tags. One of them may be missing a closing >.

Hi @galbaras

Even I saw the error

<div class="ajax-error">Unexpected token < in JSON at position 0</div>

and not sure from where it’s coming. The labels are there and it uses material guidelines.

Did you found anything suspicious in the JS in the console?

Thanks again for looking into this. I hope I can solve this and it’s hurting the business as well.

Nothing was written to the log when I submitted the form.

Can you paste your form here? Do the following:

1. Click “CODE” 3 times (yes, 3 times)
2. Hit ENTER to start a new line
3. Paste the form definition from the form admin page
4. Hit ENTER to start a new line
5. Click “CODE” 3 times (yes, 3 more times)

<div class="job_app_name job_app_comm comm_unic">
<label>Name*</label>
[text* job-name id:job-opening-form-name class:required autocomplete:off]
</div>

<div class="job_app_email job_app_comm comm_unic">
<label>Email*</label>
[email* job-email class:required autocomplete:off]
</div>

<div class="job_app_resume job_app_comm">
[file* job-resume class:required filetypes:pdf|doc|docx limit:10MB ]
<span class="upload_res">Upload Resume (file format - PDF or doc)*</span>
</div>
 
<div class="job_app_portf job_app_comm comm_unic">
<label>Portfolio URL (for designers)</label>
[url job-portfolio autocomplete:off]
</div>

<div class="job_app_linkedin job_app_comm comm_unic">
<label>LinkedIn URL</label>
[url job-linkedin autocomplete:off]
</div>

<div class="cont_email-hidden cont_comm" style="display:none;">
<label> [text job-title class:required placeholder "Job Title*"] </label>
</div>

<div class="cont_email-hidden1 cont_comm" style="display:none;">
<label> [email* recipient-email ] </label>
</div>

<div class="job_app_tellus job_app_comm">
<label>Tell us why you are the right candidate</label>
[textarea job-message  placeholder "Tell us why you are the right candidate"] 
</div>

<div class="job_app_apply">
[submit "Apply"]
</div>

<div style="display:none;">[response]</div>

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
	var a = document.getElementById('job-opening-form-name').value;
	console.log('a = '+a);
	var url = 'https://www.peppersquare.com/careers/thank-you/?'+a;
	console.log('url = '+url);
	console.log('contactFormId = '+event.detail.contactFormId);
	if ( '1281' === event.detail.contactFormId ) {
	location = url;
	}
}, false);
</script>

<script type="text/javascript">
jQuery(document).ready(function( $ ){
var admn = jQuery('.job-des-banner h1').html();
jQuery('.cont_email-hidden input').val(admn);
var admn1 = jQuery('.job-email').html();
jQuery('.cont_email-hidden1 input').val(admn1);
});
</script>

Then I put the following shortcode in the page

[contact-form-7 id="1281" title="Lets work together - Apply Job"]

It seems overly complicated with containers and the labels don’t have the for attribute, so they’re not linked to the respective fields, but I can’t see a problem.

I didn’t know scripts could be inside forms. I put mine into wp_footer actions, but this shouldn’t matter either.

In HTML5, you can/should remove the type="text/javascript" from script tags, but again, not a problem.

I’ve never seen <div style="display:none;">[response]</div> in a form. Is this there for debugging?

Let’s go back to basics. Is the form submitted correctly without the script(s) and without the “response” bit?

If it is, try adding the script in an filter function for the_content. You can wrap the code inside an if ( has_shortcode( '[contact-form-7 id="1281" title="Lets work together - Apply Job"]' ) {} block to be specific.