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.
Your contact from should now send the contact form information to your chosen URL.
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:
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!