CRUD Form with Elementor & Elementor Pro

Click Here for video

Settings > Permalinks

You wanna work with child themes, so install Child Theme Configurator

I am using child theme of the Hello theme.

Appearance > Theme File Editor > Theme Functions (functions.php)

add_action( ‘elementor_pro/forms/new_record’, function( $record, $handler ) {

//make sure its our form
$form_name = $record->get_form_settings( ‘form_name’ );

if($form_name == ‘AddLeague’) { error_log(‘Hi There’);

$raw_fields = $record->get( ‘fields’); $fields = [];
foreach ( $raw_fields as $id => $field ) {

$fields[$id] = $field[‘value’]; }

wp_remote_post( ‘http://localhost/testsite/my_stuff/create_league.php’, [

‘body’ => $fields, ]);

}

if($form_name == ‘AddPlayer’) { error_log(‘Hi There’);

$raw_fields = $record->get( ‘fields’); $fields = [];
foreach ( $raw_fields as $id => $field ) {

$fields[$id] = $field[‘value’]; }

wp_remote_post( ‘http://localhost/testsite/my_stuff/create_player.php’, [

‘body’ => $fields, ]);

} }, 10, 2);

phpMyAdmin create a table called php_leagues

Create this PHP file in the root directory of your site

mydbfile.php

<?php
# connection to tables

$conn_leagues = new mysqli(“localhost”,”root”,”root”,”testsite”); ?>

Create PHP files in directory called my_stuff

create_league.php

<?php
include ‘../../mydbfile.php’;
$league_name = $_POST[“name”];
$sport = $_POST[“sport”];
$userid = $_POST[“league_user_id”]; error_log(‘league_name = ‘.$league_name); error_log(‘sport = ‘.$sport); error_log(‘userid = ‘.$userid);

$sql = “insert into php_leagues (user_id,league_name,sport) values(‘$userid’, ‘$league_name’, ‘$sport’)”;
error_log(‘sql = ‘.$sql);
$conn_leagues->query($sql);

$conn_leagues->close(); ?>

read_leagues.php

<?php
include ‘../../mydbfile.php’;
global $wpdb;
include ‘../wp-load.php’;
// get current user ID, with default value, if empty
$current_user_id = get_current_user_id();
// next two lines are for debugging, they appear in the php_error.log file // comment them out before putting into production error_log(‘current_user_id ‘.$current_user_id);
error_log($_GET[‘id’]);

$sql = “select * from php_leagues where user_id = “.$current_user_id; $result = $conn->query($sql);
// next line is for debugging, they appear in the php_error.log file
// comment it out before putting into production

error_log(‘sql = ‘.$sql);
echo “<tbody>”;
echo “<tr>”;
echo “<td>League</td><td>Sport</td><td>Update</td><td>Delete</td>”; echo “</tr>”;

while($row = $result->fetch_assoc()) { if ($row[‘league_id’] == $_GET[‘id’]) {

echo ‘<tr><td colspan=”4″><form action=”/testsite/my_stuff/update_league.php” method=”POST”>’;

echo ‘<table border=”1″>’;

echo ‘<tr><td><input type=”text” name=”league_name” value=”‘ . $row[‘league_name’] . ‘”></td>’;

echo ‘<td><select name=”sport” id=”sport”><option value=”‘ . $row[‘sport’] . ‘” selected>’ . $row[‘sport’] . ‘</option><option value=”Basketball”>Basketball</option><option value=”Football”>Football</option><option value=”Soccer”>Soccer</option></select></td>’;

echo ‘<td><input type=”hidden” name=”league_user_id” value=”‘ . $row[‘user_id’] . ‘”><input type=”submit” value=”Save”></td>’;

echo ‘<td><input type=”hidden” name=”league_id” value=”‘ . $row[‘league_id’] . ‘”></td></ tr>’;

echo ‘</form>’;

echo ‘</td></td>’; } else {

echo “<tr>”;
echo “<td>” . $row[‘league_name’] . “</td>”;
echo “<td>” . $row[‘sport’] . “</td>”;
echo ‘<td><a href=”/testsite/add-league/?id=’ . $row[‘league_id’] . ‘”>Update</a></

td>’;
echo ‘<td><a href=”/testsite/my_stuff/delete_league.php?id=’ . $row[‘league_id’] .

‘”>Delete</a></td>’;

echo “</tr>”; }

}
echo “</tbody>”; $conn->close();

update_league.php

<?php
include ‘../../mydbfile.php’;
global $wpdb;
include ‘../wp-load.php’;
// get current user ID, with default value, if empty
$current_user_id = get_current_user_id();
// next two lines are for debugging, they appear in the php_error.log file // comment them out before putting into production error_log(‘update_league current_user_id ‘.$current_user_id); error_log($_GET[‘id’]);

$league_id = $_POST[‘league_id’]; $league_name = $_POST[‘league_name’]; $sport = $_POST[‘sport’];

$sql = “update php_leagues set league_name='”.$league_name.”‘, sport='”.$sport.”‘ where league_id=” . $league_id . ” and user_id=” . $current_user_id;

// next line is for debugging, they appear in the php_error.log file // comment it out before putting into production
error_log(‘sql = ‘.$sql);

$result = $conn->query($sql);

$conn->close();

header(“location: /testsite/add-league/”); ?>

delete_league.php

<?php
include ‘../../mydbfile.php’;
global $wpdb;
include ‘../wp-load.php’;
// get current user ID, with default value, if empty
$current_user_id = get_current_user_id();
// next two lines are for debugging, they appear in the php_error.log file // comment them out before putting into production error_log(‘update_league current_user_id ‘.$current_user_id); error_log($_GET[‘id’]);

$league_id = $_GET[‘id’];

$sql = “delete from php_leagues where league_id=”.$league_id.” and user_id=”. $current_user_id;

// next line is for debugging, they appear in the php_error.log file // comment it out before putting into production
error_log(‘sql = ‘.$sql);

$result = $conn->query($sql);

$conn->close();

header(“location: /testsite/add-league/”); ?>

Create Add League page

WordPress > Add Page

Click Publish

Click Edit with Elementor

Hide Title
Settings > Hide Title Yes

Click On grid in top right of Elementor Editor

Drag Heading widget to Drag widget here Enter text of Add League
Drag a form widget to the Drag widget here

Name the form AddLeague

Keep the Name field change its id to name

Remove the email and message fields in the default form.

Add a Sport select field. Name it sport

Add a User hidden field.

Click on Advanced and make these settings

Drag Heading widget to Drag widget here

Enter text of Current Leagues

Drag an HTML widget to the Drag widget here

Enter this text in the form widget

jQuery( document ).on(‘submit_success’, function( event, response ){

read(); });

jQuery( document ).ready(function( $ ){

read(); });

function getReadUrl() {
var params = new URLSearchParams(window.location.search); var url = “../my_stuff/read_leagues.php”;
if (params.has(‘id’)) {

url = url + “?id=” + params.get(‘id’); }

return url; }

function read(){
var url = getReadUrl(); $.get( url, function( data ) {

document.getElementById(“records”).innerHTML = data; });

} </script>

Expand the Button section Change the Submit test to Add

Expand the Actions After Submit section

Remove any actions in the Add Action box.

Expand the Additional Options section

Clear out any items in these boxes too

If you have other forms to make, such as add player, you can use the same process above except add new php files and database table and screens like the ones shown below

Go back to the word press editor and try out your new form:
1. Add new Leagues to the database.
2. See if it updates the table of current leagues table on the screen 3. Try the Update link and update a league
4. Try the Delete link and delete a league

video flowsheet

If you have other forms to make, such as add player, you can use the same process above except add new php files and database table and screens like the ones shown below

for example:
Add Player Form
1. This will have the same four C.R.U.D. functions as add league did
2. It will interact with a different database table php_players
3. It will have a starting page called Add Players or Players. Whatever makes sense to

you.
4. Below are some sample screen shots of the form you would build, which is very similar to the leagues page.

phpMyAdmin create a table called php_players

Create Add Player page

WordPress > Add Page

Click Publish

Click Edit with Elementor

Hide Title
Settings > Hide Title Yes

Click On grid in top right of Elementor Editor

Drag Heading widget to Drag widget here Enter text of Add Player
Drag a form widget to the Drag widget here Name the form AddPlayer

Keep the Name field change its id to name

Remove the email and message fields in the default form. Add a User hidden field.

Click on Advanced and make these settings

Drag Heading widget to Drag widget here

Enter text of Current Players

Drag an HTML widget to the Drag widget here

Enter this text in the form widget

Drag an HTML widget to the Drag widget here

Enter this text in the form widget

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>

read(); });

jQuery( document ).ready(function( $ ){

read(); });

function getReadUrl() {
var params = new URLSearchParams(window.location.search); var url = “../my_stuff/read_players.php”;
if (params.has(‘id’)) {

url = url + “?id=” + params.get(‘id’); }

return url; }

function read(){
var url = getReadUrl(); $.get( url, function( data ) {

document.getElementById(“records”).innerHTML = data; });

} </script>

<table id=“records”></table>

create_player.php

<?php
include ‘../../mydbfile.php’;

$wp_id = $_POST[“wp_id”]; $player_name = $_POST[“player_name”];

// comment these lines out before putting into production error_log(‘wp_id = ‘.$wp_id);
error_log(‘player_name = ‘.$player_name);

$sql = “insert into php_players (wp_id,player_name) values(‘$wp_id’, ‘$player_name’)”; error_log(‘sql = ‘.$sql);
$conn_leagues->query($sql);
$conn_leagues->close();

read_players.php

$sql = “select * from php_players where wp_id = “.$current_user_id; error_log($sql);
$result = $conn->query($sql);
// next line is for debugging, they appear in the php_error.log file

// comment it out before putting into production error_log(‘sql = ‘.$sql);
echo “<tbody>”;
echo “<tr>”;

echo “<td>Player Name</td><td>Update</td><td>Delete</td>”; echo “</tr>”;
while($row = $result->fetch_assoc()) {

if ($row[‘player_id’] == $_GET[‘id’]) {
echo ‘<tr><td colspan=”4″><form action=”/testsite/my_stuff/update_player.php”

method=”POST”>’;
echo ‘<table border=”1″>’;
echo ‘<tr><td><input type=”text” name=”player_name” value=”‘ . $row[‘player_name’] .

‘”></td>’;
echo ‘<td><input type=”hidden” name=”wp_id” value=”‘ . $row[‘wp_id’] . ‘”><input

type=”submit” value=”Save”></td>’;
echo ‘<td><input type=”hidden” name=”player_id” value=”‘ . $row[‘player_id’] . ‘”></td></

tr>’;
echo ‘</form>’; echo ‘</td></td>’;

} else {
echo “<tr>”;

echo “<td>” . $row[‘player_name’] . “</td>”;
echo ‘<td><a href=”/testsite/add-player/?id=’ . $row[‘player_id’] . ‘”>Update</a></td>’; echo ‘<td><a href=”/testsite/my_stuff/delete_player.php?id=’ . $row[‘player_id’] .

‘”>Delete</a></td>’;

echo “</tr>”; }

}
echo “</tbody>”; $conn->close();

update_player.php

<?php
include ‘../../mydbfile.php’; global $wpdb;
include ‘../wp-load.php’;

// get current user ID, with default value, if empty
$current_user_id = get_current_user_id();
// next two lines are for debugging, they appear in the php_error.log file // comment them out before putting into production error_log(‘update_player current_user_id ‘.$current_user_id); error_log($_GET[‘id’]);

$player_id = $_POST[‘player_id’]; $player_name = $_POST[‘player_name’];

$sql = “update php_players set player_name='”.$player_name.”‘ where player_id=” . $player_id . ” and wp_id=” . $current_user_id;

// next line is for debugging, they appear in the php_error.log file // comment it out before putting into production
error_log(‘sql = ‘.$sql);

$result = $conn->query($sql);

$conn->close();

header(“location: /testsite/add-player/”); ?>

delete_player.php

<?php
include ‘../../mydbfile.php’;
global $wpdb;
include ‘../wp-load.php’;
// get current user ID, with default value, if empty
$current_user_id = get_current_user_id();
// next two lines are for debugging, they appear in the php_error.log file // comment them out before putting into production error_log(‘update_league current_user_id ‘.$current_user_id); error_log($_GET[‘id’]);

$player_id = $_GET[‘id’];

$sql = “delete from php_players where player_id=”.$player_id.” and wp_id=”. $current_user_id;

// next line is for debugging, they appear in the php_error.log file // comment it out before putting into production
error_log(‘sql = ‘.$sql);

$result = $conn->query($sql);

$conn->close();

header(“location: /testsite/add-player/”); ?>