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:
$('.custom_action_url .et_pb_contact_form').attr('action', 'https://yoursite.com/api');
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
- 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: