Display a div after submit contact form 7 form - php

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

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>

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.

Contact form 7 - URL redirection

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!

PHP/JQUERY label to input in while loop on edit button click

I'm using php/jquery and html my requirement is when I click on edit button, label should be replaced with input text and I would be able to update in my mysql db and if I click on cancel button input to label..
Following is my code:
<?php
$sql = 'select * from demo';
while($row = mysql_fetch_object($sql)) {
?>
<label style="display:block;">abc</label>
<input type="text" style="display:none;"/>
<button id="edit">edit</button>
<button id="cancel">cancel</button>
<?php
}
?>
suppose If I display 10 records from mysql db, for each record I should be able to edit on particularly clicked row.
Any help is appreciated thanks!
I would wrap each label in a parent (for example a p).
On a click, you hide the label and add a input and two buttons to the parent.
By clicking the cancel button, the label gets visible again and the other elements will be removed.
The "tricky" part is the submit button. You'll need a PHP page that processes the data you post to it. Then when it succeeds you should echo an ok . The $.post function knows a success argument. This function will check if the returned value will be ok, and if so, changes the text from the label, shows it, and removes the other items.
$(function() {
$('.edit').on('click', function(e) {
e.preventDefault();
var elem = $(this) ,
label = elem.prev('label') ,
parent = elem.parent() ,
value = label.text() ,
input = '<input type="text" value="'+value+'" />' ,
save = '<button class="save">Save</button>' ,
cancel = '<button class="cancel">Cancel</button>';
parent.children().hide();
parent.append(input+save+cancel);
});
$(document).on('click', '.cancel', function(e) {
e.preventDefault();
var elem = $(this) ,
parent = elem.parent() ,
label = parent.find('label');
parent.children(':not(label,.edit)').remove();
parent.children().show();
});
$(document).on('click', '.save', function(e) {
e.preventDefault();
var elem = $(this) ,
parent = elem.parent() ,
label = parent.find('label') ,
value = parent.find('input').val();
parent.addClass('active');
var data = '&name='+value;
$.post("processingPage.php", data)
.success( function(returnedData) {
if( returnedData == 'ok' ) { /* change this to check if the data was processed right */
var active = $('.active');
active.find('label').text( active.find('input').val() );
active.children(':not(label,.edit)').remove();
active.children.show();
}
});
$('.active').removeClass('active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><label>Some text</label><button class="edit">Edit</button></p>
<p><label>Some text</label><button class="edit">Edit</button></p>
<p><label>Some text</label><button class="edit">Edit</button></p>
<p><label>Some text</label><button class="edit">Edit</button></p>
You're PHP would look like this:
<?php
$return = false;
if( isset( $_POST['name'] ) ) {
if( mysqli_query( ... ) ) {
$return = true;
}
}
if( $return )
echo 'ok';
else
echo 'not ok';
?>

Empty Form on Select Option Click

I'm using a bit of JQuery code to create placeholder values for browsers that don't support them natively. The code clears the forms whenever submit is triggered. Unfortunately, my pagination system is using a select dropdown menu with onchange="this.form.submit()" and the code does not empty the forms when this is used. How can I change the following code to work with my select pagination?
function _emptyFormOnSubmit( $elements )
{
var $forms = $elements.closest( 'form' );
$forms.submit( function()
{
var $this = $( this );
// This check avoid processing more than once the same form.
if( $this.data( 'placeHoldize.submitHandlerCalled' ) ) {
return;
}
$this.find( '.placeholder-visible' )
.val( '' )
.data( 'placeHoldize.submitHandlerCalled', true );
} );
return true;
}
maybe this will work :
var $forms = $elements.closest( 'form' );
$forms.find('select[onchange="this.form.submit()"]'.change(function(){
$forms.submit();
})
$forms.submit( function()
it's like your mixing inline attribute event and JQuery event which are based on event handler and are not well connected with inline attribute event.
Maybe (better) in your select onchange you can write :
$(this).closest("form").submit()

Categories