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 “[email protected]” (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'], '[email protected]') !== 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.

UK Electronic Designer
USEFUL?
We benefit hugely from resources on the web so we decided we should try and give back some of our knowledge and resources to the community by opening up many of our company’s internal notes and libraries through mini sites like this. We hope you find the site helpful.
Please feel free to comment if you can add help to this page or point out issues and solutions you have found, but please note that we do not provide support on this site. If you need help with a problem please use one of the many online forums.

Comments

Your email address will not be published.