Contact form doesn’t have to be used for contact, it is fully customisable with no need for a users email address etc to be entered. However using it with code requires a couple of workarounds
In this example we use a shortcode somewhere on the page that has the form into who’s function we added the javascript and POST php code below. However the code could go in an relevant wordpress function you want of course
Creating a form that you can handle submission of in code
Add a Contact Form to the page
For each form element
Set the Title and Field ID
The Field ID can just be a copy or simplified version of the title – it doesn’t need to be code friendly as it will get changed by divi anyway.
Text > Success message
Set to something or it will use the Divi default thanks for contacting us
Email > Email address
Set to “no****@no****.com” (a special value we will trap)
Redirect > Set to YES > Redirect URL
If you want the page contents updated with what you’ve done then you need to set the page URL here.
If you are using a URL argument, for instance a device_id say, then set to to the page and then set the dynamic URL you want in the javascript code below
Although you can give the form a unique identifier (in Form Settings > Advanced > CSS ID) there is no point as it doesn’t influence the actual form name or form ID.
Now view the page and view page source html.
Get the id of each of the form elements to use in your form POST handler
The ID’#s of the form elements we are using with this demo code:
- et_pb_contact_name_0
- et_pb_contact_notes_0
jQuery Code to add fields
Chances are you will need to add at least 1 hidden field so that when the form is POST’ed you know something it relates to, a specific user, device etc. You can’t use the redirect URL with an argument as Divi always makes the post to the page the form is on and if redirect is set will then re-direct to the URL and any argument you include afterwards . So you have to add a hidden form field. For this we use a bit of javascript
<script type="text/javascript">
jQuery(document).ready(function(){
//Add hidden input fields
jQuery( "form" ).append( "<input type='hidden' name='action' value='add_new_device' />" );
jQuery( "form" ).append( "<input type='hidden' name='device_id' value='1234' />" );
//jQuery( "form" ).append( "<strong>TEST HELLO</strong>" ); //<<<<Use this if you want to visually confirm this code is working on a page as this html is added after a page is shown so won't be seen if you view a pages html using view html
//Set dynamic redirect URL
//jQuery( "#et_pb_contact_form_0" ).attr("data-redirect_url","/view/device?id=$DeviceId"); //<<<<Use if you need to create a dynamic redirect URL that overrides the forms setting
//Populate form fields with existing values
jQuery(document.getElementsByName("et_pb_contact_name_0")).attr('value', 'Default Name'); //<<<<Use if you want to pre-populate this field-INPUT
jQuery(document.getElementsByName("et_pb_contact_notes_0")).text('Default notes'); //<<<<Use if you want to pre-populate this field-TEXTAREA
});
</script>
POST Code to handle form submission
You can put your code to handle the form submission anywhere you trap a page loading. If you have a shortcode on the page dynamically doing things it makes sense just to put the code in its shortcode function too. In our example we have these form fields
if ( isset($_POST['action']) && ($_POST['action'] == 'add_new_device') ) //<<<This name of the hidden field we added
{
//-----------------------------------------
//----- ADD NEW DEVICE FORM SUBMITTED -----
//-----------------------------------------
$Name = '';
$Notes = '';
if (isset($_POST['et_pb_contact_name_0']))
$Name = $_POST["et_pb_contact_name_0"];
if (isset($_POST['et_pb_contact_notes_0']))
$Notes = $_POST["et_pb_contact_notes_0"];
$device_id = $_POST['device_id'];
//Do something...
db_device_add_new($Name, $Notes);
}
Email send blocking code
Divi will always send an email to you when a form is submitted. You can stop it by trapping the special to email address we used:
//********************************************
//********************************************
//********** FILTER OUTGOING EMAILS **********
//********************************************
//********************************************
//Any plugin or theme sending email is likely to be using wp_mail() to do it
add_filter( 'wp_mail', 'filter_wp_mail' );
function filter_wp_mail( $args )
{
//$args Fields:
// $args['to']
// $args['subject']
// $args['message']
// $args['headers']
// $args['attachments']
//----- FILTER OUT EMAILS SENT BY DIVI CONTACT FORM -----
//if (strpos($args['subject'], 'New Message From') !== False)
if (strpos($args['to'], 'no****@no****.com') !== False) //<We set the email address to this so we can trap them here
{
$args['to'] = ""; //Remove the 'to' field to stop the email being able to be sent
}
return ($args);
}
Populating form fields when a page loads
This can be done using javascript. After adding your form view the page and view page source html. Get the id of each of the form elements you want to populate
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(document.getElementsByName("et_pb_contact_name_0")).attr('value', 'Default Name'); //<<<<Use if you want to pre-populate this field-INPUT
jQuery(document.getElementsByName("et_pb_contact_notes_0")).text('Default notes'); //<<<<Use if you want to pre-populate this field-TEXTAREA
});
</script>
Notes about how the Divi Contact Form works
The form get submitted to the page and any shortcodes you have on the page will have their functions called with the form POST values available. However it is not a page reload, the call seems to be ajax. If you want the page to reload with new values then use ‘Redirect URL’ which will cause the page to be loaded from scratch a short while after the page ajax call happens.