Contact form 7 - URL redirection - php

As you guys know in CF7 on_sent_ok command deprecated and scheduled to be abolished by the end of 2017. So I decided to use the new script for redirecting my contact forms with this script provided by CF7
function add_this_script_footer(){ ?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://websiteurl/thank-you';
}, false );
</script>
<?php }
add_action('wp_footer', 'add_this_script_footer');
but this applies to all contact forms. Since I am using quite different types of forms, may I know how can I exclude one of them from this redirection?

Try this script:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if (event.detail.contactFormId != '123') { // This would exclude form with id 123
location = 'http://websiteurl/thank-you';
}
}, false );
</script>
Bonus tip: I often do it another way that makes it a bit more flexible. I put a <div class="do-some-action" data-something="foobar" style="display:none;"></div> in the CF7 form itself and then I can put this action in multiple forms if needed..
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
var $cf = $( '#' + event.detail.id );
var $actionDiv = $cf.find( '.do-some-action' );
if ( $actionDiv && $actionDiv.length ) {
// Div with action class found
// We can also extract some data if needed
var something = $actionDiv.data( 'something' );
console.log( 'something = ' + something );
location = 'http://websiteurl/thank-you';
}
}, false );
</script>
I hope this helps!

Related

How to prevent a form from clearing fields on submit in Elementor Pro?

I have a form created with Elementor Pro on my WordPress website. After clicking the button, I can process the results in some way using the WordPress backend, but at the same moment the form is reloaded and all fields have default values again. In some cases, this hinders greatly - for example, when you are trying to build a simple web application.
To be specific, let's build the form to add two numbers (this tutorial).
Frontend looks like this:
Adder Form
HTML code for "The result will appear here" element:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery( document ).ready(function( $ ){
jQuery( document ).on('submit_success', function(event, response){
document.getElementById("result").innerHTML = response.data['1'].result;
});
});
</script>
<p id='result'>The result will appear here.</p>
PHP code (in Code Snippets WordPress plugin):
function add_two_numbers($fields) {
$a = $fields['a'];
$b = $fields['b'];
return $a + $b;
}
// A send custom WebHook
add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) {
// make sure its our form
$form_name = $record->get_form_settings( 'form_name' );
if ( 'AdderForm' !== $form_name ) {
return;
}
$raw_fields = $record->get( 'fields' );
$fields = [];
foreach ( $raw_fields as $id => $field ) {
$fields[ $id ] = $field['value'];
}
$output['result'] = add_two_numbers($fields);
$handler->add_response_data( true, $output );
}, 10, 2 );
I've been trying to dig into the Elementor documentation, setting dynamic "default" values, exploring form setting and googling things like "Elementor don't reload form after submit", "Elementor save default values form", etc, but I didn't find anything. Apparently, official Elementor tools does not allow you to do this, which, in my opinion, is quite weird.
I found a solution that I want to share with others, but it doesn't seem intuitive to me. Feel free to comment if you know the better solution or if the new versions of Elementor allow you to do this.
The answer I found is to explicitly return the current values of the form fields and display them using jQuery.
To do this, change the PHP code as follows (CHANGE line):
function add_two_numbers($fields) {
$a = $fields['a'];
$b = $fields['b'];
return $a + $b;
}
// A send custom WebHook
add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) {
// make sure its our form
$form_name = $record->get_form_settings( 'form_name' );
if ( 'AdderForm' !== $form_name ) {
return;
}
$raw_fields = $record->get( 'fields' );
$fields = [];
foreach ( $raw_fields as $id => $field ) {
$fields[ $id ] = $field['value'];
}
$output = $fields; // send input data back to the form to display <- CHANGE
$output['result'] = add_two_numbers($fields);
$handler->add_response_data( true, $output );
}, 10, 2 );
And jQuery script for the HTML element:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery( document ).ready(function( $ ){
jQuery( document ).on('submit_success', function(event, response){
document.getElementById("result").innerHTML = response.data['1'].result;
// display the data of the previous request on the form
$("#form-field-a").value(response.data['1'].a);
$("#form-field-b").value(response.data['1'].b);
});
});
</script>
<p id='result'>The result will appear here.</p>

Display a div after submit contact form 7 form

I want display a div contain some details after successful submission of a form. I am using contact form 7 plugin.. Please help me to do this.
Hi you can use Contact Form 7 DOM Events see this link
https://contactform7.com/dom-events/
below is example of calling alert after your form submission
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
alert( "Fire!" );
}, false );
and you can also append or place a div after submission as shown in below code,
in below code you have to replace #yourDivId with your desired div id.
var wpcf7Elm = document.querySelector( '.wpcf7' );
var div = '';
div += '<div class="custom_detail_div">';
div += ' .... your details here ..... ';
div += '</div">';
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
jQuery('#yourDivId').html(div);
}, false );
also you can check this also,
https://wordpress.stackexchange.com/questions/282751/how-to-modify-contact-form-7-success-error-response-output
I hope this will help you.
Thanks
I find a solution ......
`<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '33' == event.detail.contactFormId ) { // if you want to identify the form
var hid = document.getElementsByClassName("exp");
// Emulates jQuery $(element).is(':hidden');
if(hid[0].offsetWidth > 0 && hid[0].offsetHeight > 0) {
hid[0].style.visibility = "visible";
}
}
}, true );
</script>`
Here 33 is my form id and exp is class of my div

How to pass the fields values of a form submitted through CF7 on wordpress?

I'm a WordPress enthusiast, I'm trying to accomplish something but I haven't found a way to.
Here's the deal, I have a form made with Contact Form 7 that I want to extract the values when the form is submitted and use them on the body of a WordPress page for a script I'm running when the form is submitted.
On my functions.php I have:
add_action('wpcf7_mail_sent','save_data_in_variables');
add_action('wpcf7_mail_failed','save_data_in_variables');
function save_data_in_variables($conference_form){
$submission = WPCF7_Submission::get_instance();
if (!$submission){
echo 'Form was not sent';
}
$posted_data = $submission->get_posted_data();
}
function wpc_vc_shortcode( $atts ) {
echo $posted_data['your-name'];
}
add_shortcode( 'name_in_the_form', 'wpc_vc_shortcode');
and on the body of the of the page I have a script running which submits data when the form is submitted but I want to replace the values with the values of the form using shortcode:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
truestats.logEvent('Lead Conference', { id: '[name-in-the-form]' } );
}, false );
</script>
How do I accomplish this? So far no values are showing when I submit the form.
Thank you so much
You can get posted form data in your javascript, There is no need to create shortcode and pass it to javascript. Consider below example
<script>
document.addEventListener( 'wpcf7submit', function( event ) {
if(event.detail.contactFormId == 'CONTACT_FORM_ID'){ // condition for specific form ,replace "CONTACT_FORM_ID"
// with form id you want to use this code for
var inputs = event.detail.inputs;
for ( var i = 0; i < inputs.length; i++ ) {
if ( 'your-name' == inputs[i].name ) {
var name = inputs[i].value;
break;
}
}
truestats.logEvent('Lead Conference', { id: name } );
}
}, false );
</script>
I had used 'wpcf7submit' event instead of 'wpcf7mailsent' event, you can use as per your need.
You can check DOM Events provided by contact form 7 for further reference.

wordpress contact form7, one form redirect to multiple thank you page based on is_page

I am looking for a solution on wordpress contact form7.
either a plugin or in PHP code.
I am not looking for JavaScript solution. as I have already found JavaScript solution. Again: I am looking for either plugin or PHP code.
I want to use one form (CF7) and it will redirect to multiple thank you pages based on from which page the form submitted.
Below example code.
if is_page(1){
contact-form will go to thank-you-page-1
} else if is_page(2) {
contact-form will go to thank-you-page-2
}
You can do by this hook
add_action('wpcf7_mail_sent', function ($cf7) {
// Run code after the email has been sent
$wpcf = WPCF7_ContactForm::get_current();
$wpccfid=$wpcf->id;
// if you wanna check the ID of the Form $wpcf->id
if ( '34' == $wpccfid ) { // Change 123 to the ID of the form
//you can use also if(is_page()){} condition
//redirect to url
wp_redirect('url of thank you page');
exit();
}
}
<?php if (is_page(array(1))) { ?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://page-link-1.com/';
}, false );
</script>
<?php } else if ( is_page(array(2))) { ?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://page-link-2.com/';
}, false );
</script>
<?php } ?>

Use AJAX/JQuery to submit form and show results without reload

Im trying to use jquery and ajax to submit a form and show the results without reloading. Like your typical ajax commenting setup.
My HTML is setup like this:
<form id="create_new_heading" action="/display.php?brand=1" method="post">
<label for="entry">Heading:</label><br/>
<input type="text" id="heading" name="heading" maxlength="150"/><br/>
<input type="submit" value="Add this Heading" />
</form>
<div id="result">
</div>
JS:
<script>
/* attach a submit handler to the form */
$("#create_new_heading").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
term = $form.find( 'input[name="heading"]' ).val(),
url = $form.attr( 'action' );
/* Send the data using post and put the results in a div */
$.post( url, { s: term },
function( data ) {
var content = $( data ).find( '#test_me' );
$( "#result" ).empty().append( content );
}
);
});
</script>
Form Processor looks like this:
public function write($p) {
if ( $_POST['type'] )
$type = mysql_real_escape_string($_POST['type']);
if ( $_POST['heading'])
$heading = mysql_real_escape_string($_POST['heading']);
if ( $type && $heading ) {
$uniqueid = uniqid();
$sql = "INSERT INTO headings VALUES('$type','$heading','$uniqueid')";
return mysql_query($sql);
} else {
return false;
}
}
I attempted to follow the jquery documentation for implementing this but I can't seem to get it to work. The form submits, and the entry gets put into the database but I still have to refresh the page to see the new entry. Any idea of what I am doing wrong?
Can you check on firebug, whether caching is screwing the request.
I had a similar problem and started giving a random_id along with the param and
it worked fine.
Proper way could be enable Cache-Control header (or) setting a past time as expiry time.
Why not take out the .empty()
$( "#result" ).append( content );
Or try
$( "#result" ).html( content );

Categories