The Divi theme comes with a Contact Form module which lets you create flexible forms for collecting information from your users. Normally, the information collected is delivered to you as an email. But by modifying the URL to which the collected information is sent you could, for example, send the information to an API endpoint of your own creation for custom processing / storage. Here's how to change the "action" URL to which the form information is sent.
Setting the Contact Form URL via JQuery
First, give your contact form a CSS class, such as "custom_action_url", as shown:
Then add the following jQuery code to your site, changing the example URL to the URL you want to send the information to:
<script>
jQuery(function($) {
$('.custom_action_url .et_pb_contact_form').attr('action', 'https://yoursite.com/api');
});
</script>Related Post: Adding JavaScript / jQuery to Divi.
You can add this, for example, at:
WP Dashboard > Divi > Theme Options > Integration > Add this code to the head of your blog
When added at this location, the code will remain in place when Divi is updated.
Your contact form should now send the contact form information to your chosen URL.
Decoding Divi's Contact Form Field Names
When modifying the Divi Contact Form's action URL to direct submissions to your own handler, it's crucial to comprehend Divi's naming pattern for form fields. Here's a quick breakdown:
- Prefix: All fields start with
et_pb_contact_. - Field ID: This is a lowercase version of your field's ID, with spaces removed or altered.
- Form Index: A number indicating the form's position on the page (
_0for the first,_1for the second, etc.).
For instance, a first form's "Email" field becomes et_pb_contact_email_0. This pattern ensures you can match the field names when processing the form data on your server.
Redirecting the User
Normally the Divi contact form will be replaced by a notice information the user that the message has been sent. But this doesn't occur when submitting to a custom URL. One way around this is to use the contact form's "redirect" feature to redirect the user to a custom "success" page after they submit the form.
You can configure the redirect at "Contact Form Settings > Content > Redirect", like so:
Would this change get revert back during the normal upgrade/maintence process?
Hey Chris, it depends where you add the code. If you add it under the "WP Dashboard > Divi > Theme Options > Integration" tab or using a child theme, the code will remain in place when Divi / your plugins are updated.
If you directly edit the Divi theme files under /wp-content/themes/Divi (not recommended) then the change would be overwritten by Divi updates.
How does one get the parameters of the form to that javascript function?
Hi David, you don't actually need to get any parameters into that JavaScript function – it's not submitting the data. Instead, what the JavaScript does is modify the HTML form used by the contact form module. Specifically, it changes the "action" attribute of the
Ciao, oltre ad utilizzare questa utilissima custom action, posso anche far arrivare la email ad una casella di posta?
Hey matteo, I don't think there's an easy modification to the above code which would let you both send an email and send the data to a custom URL. There are a couple of approaches which could work:
1) If you control the script receiving the custom action, you could just have it send out your email (e.g. in PHP you could do it as described here: https://www.tutorialspoint.com/php/php_sending_emails.htm)
2) You could use JavaScript to submit the form multiple times, as described here: https://html.form.guide/web-form/submit-form-multiple-scripts/
Probably 1) will be the easiest if your setup allows it. I haven't tried 2) yet, but if you think it's going to suit you the best (i.e. you don't control the target script), let me know and I'll try to figure out how to apply it to the Divi contact form module. Thanks!
Hi Dan. Awesome Tip. But do you have an Idea, how to also change the request method from "post" to "get" Would love to target external plugin forms (in my case a booking engine) with the divi module, but i need a get request for that instead of post. Thanks in advance!
Hmm.. I was hoping it would possible to do this simply by changing the form "method" attribute to "get" in the same way that the code above changes the "action" attribute. Unfortunately it looks like Divi ignores this and just uses a hard-coded value of "post" when the contact form is submitted. I don't see any easy way of changing this. Probably the best suggestion I have at the moment is to try setting up a PHP script which receives the "post" request from the contact form (using the code in the post above to target the script's location) and forwards the data as a "get" request to your booking engine. Let me know if you aren't sure how to go about that and I'll try to point you in the right direction. Cheers!