Category: Uncategorized

WPForm show All non-input fields to Notification message

/**
 * Filters non-input field types to include in {all_fields} output.
 *
 * @link   https://wpforms.com/developers/include-page-break-section-divider-and-html-fields-in-notifications/
 *
 * @param  array $fields
 * @return array
 */
function wpf_dev_email_display_other_fields( $fields ) {
 
    return array( 'divider', 'pagebreak', 'html' );
}
 
add_filter( 'wpforms_email_display_other_fields', 'wpf_dev_email_display_other_fields', 10, 1 );

Form data save to database and display

First need to create the table name from the PHPMyAdmin or we can create from functions.php file link

Form name field name can’t be same like database name. 

<?php

if(isset($_POST['submitbtn'])){
  $custom_data = array (
    'fname' => $_POST['fname'],
    'lname' => $_POST['lname'],
  );
  $table_name = 'booking';
  $result = $wpdb->insert($table_name, $custom_data, $format=NULL);
}

if($result== 1){
  echo "<script>alert('Data saved.')</script>";
}else {
  echo "<script>alert('Data not saved.')</script>";
}

?>

<form action="" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit" name="submitbtn">
</form>

<br><br>
<hr>
<?php
global $wpdb;

$result = $wpdb->get_results("Select * from booking"); 

foreach ($result as $book) { ?>
<h1><?php echo $book->fname ?></h1>
<h1><?php echo $book->lname ?></h1>
<?php } ?>

Toggle menu JS

jQuery( document ).ready( function( $ ) {
	var $browserWidth = $( window ).width();
	var $masthead = $( '#page' );

	$.fn.smallMenu = function() {
		$( $masthead ).find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
		$( $masthead ).find( '.site-navigation h1' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );

		$( '.menu-toggle' ).click( function () {
			$( $masthead ).find( '.menu' ).toggle();
			$( this ).toggleClass( 'toggled-on' );
		});
	}

	$(window).resize(function() {
		var $browserWidth = $( window ).width();

		if ( $browserWidth < 800 ) {
			$.fn.smallMenu();
		} else {
			$( $masthead ).find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
			$( $masthead ).find( '.site-navigation h1' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
			$( $masthead ).find( '.menu' ).removeAttr( 'style' );
		}
	});

} );

Elementor show hide section toggle

Add this script to the section

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.showme').click(function(){
$(this).closest('.elementor-section').next().slideToggle();
$(this).toggleClass('opened');
});
$('.closebutton').click(function(){
$(this).closest('.elementor-section').prev().find('.showme').click();
});
});
});
</script>
<style>
.showme a , .showme i , .showme img, .closebutton a, .closebutton i, .closebutton img{
cursor: pointer;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.opened i , .opened img , .opened svg{
transform: rotate(90deg);
}
</style>

Creat an icon, imge, button above the section and give class name – showme – ( icon link must be empty ). If you want a close button in one of the expanded section, simply give it the class ‘ closebutton ‘.

Finally make the section hide from all devices from responsive section.