Using HTML Forms in the Divi Wordpress Editor
Using HTML forms with the Divi Wordpress theme is not easy, luckily we can just include our own custom HTML, and it will even show in the editor!
By. Jacob
Edited: 2020-11-26 09:16
Recently I had to connect a HTML form that was designed with Divi with a custom PHP back-end. This proved to be difficult to do from the Divi WYSIWYG editor; and I actually did not find out how to do it. I probably wasted a couple of hours fiddling with the forms we had designed. If it is even possible to change the action URL, the feature has been well hidden — as a web developer, I consider this to be absolute minimum and basic functionality.
What I instead ended up doing was to insert a HTML code block with my own hand-written HTML form; this is something I think all web-developers should be able to do with ease, and you do not need to worry about Divi suddenly changing something so your form breaks.
The problem with Divi is that it is not free, and it tends to complicate the development process in various ways, especially if you also use local test-servers. This is a general problem with all paid plugins and themes.
More importantly, using these third party plugins and themes might leave your site more vulnerable to hacker attacks. Divi has had massive security problems in the past, and it has caused me to waste time on restoring from backups.
See also: Disable write-access to secure your Wordpress site
Finally, actually find hand-coding to be faster than WYSIWYG tools in many cases. Luckily, one good thing about Divi is that it allows us to insert custom HTML. If you re-use code — if you use the same code on multiple pages — then it is better to create a shortcode that you can insert into individual pages. A shortcode is basically a small code that is replaced with HTML, and Divi is even able to display shortcodes visually while editing pages in the WYSIWYG editor.
Using HTML in Divi editor
Custom HTML works surprisingly well in the Divi editor, and it is easier than creating a shortcode. It even loads external CSS included via link element in the HTML, so the code will appear in the editor as a selectable object that you can click and move around; and before you comment that CSS does not belong in the body, you may want to read this article: CSS in Body is Valid and Useful for Progressive Rendering.
I used to dislike using CSS in the body, but things change, and it is actually a good way to keep different plugins or widgets on a page separate from each other. The CSS style can either be included directly, or you can keep it in separate .css files. It does not really matter!
The problem with Divi's contact form seems to be that it does not really "connect" with anything when submitted. When I tried submitting a form created with Divi, it simply submitted the form to the same URL; and I was unable to change the action URL or edit the form-HTML manually to fix the problem.
Custom forms in HTML
When you write your HTML by hand, you should be sure to follow accessibility best-practices. In the case of HTML forms, this means you should use the for attribute on labels to inform screen readers which elements the labels belong to. For example, when you use a for attribute, you should also include a corresponding id on individual form fields (using same value as the for attribute)
Doing this is a simple step, and it will increase the accessibility of your forms for screen readers.
It really does not matter whether you expect users with visual impairment to use your applications or not; it is very little effort to make forms accessible, so there is almost no excuse not to do it.
Below is an example of an accessible HTML form:
<form action="/doorkeeper/apps/email_tipper.php" method="post" class="dk_form">
<div class="dk_boxer dk_flex">
<div class="dk_col">
<label for="dk_tip_name">Name:</label>
<input type="text" name="dk_tip_name" id="dk_tip_name" placeholder="Name"
class="dk_field dk_field_border_style" required>
</div>
<div class="dk_col">
<label for="dk_tip_email">E-mail:</label>
<input type="text" name="dk_tip_email" id="dk_tip_email" placeholder="e-mail"
class="dk_field dk_field_border_style" required>
</div>
</div>
<div class="dk_boxer">
<input type="submit" class="dk_button" value="Send Tip!">
</div>
<div class="dk_decoration"></div>
<p>
<b>OPS:</b> Only one recommendation will be sent!
</p>
</form>
The purpose of this form is simply to "tip" a friend by e-mail.
Note. Please be careful with spam and privacy laws and whatever, as this might not be legal in all countries.
You can limit tips to one-per-email, by keeping a list of e-mails (hashed) that has already been contacted, in order to prevent someone abusing this to spam their enemy!
The form was designed using display:flex;, which is extremely useful for making responsive web page layouts.
In case anyone needs some inspiration, here is the CSS:
/* Form Styles */
.dk_form {margin:1rem auto;padding:1rem;background:rgb(240, 240, 240);}
.dk_form {border-radius:0.3rem;}
.dk_form .dk_boxer {padding:0.5rem;margin:0 0 0.5rem;}
.dk_form .dk_field {display:block;padding:0.5em;height:2rem;width:45%;min-width:200px;}
.dk_form .dk_col input {width:100%;}
.dk_form .dk_field_border_style {border:1px solid rgb(220, 220, 220);border-radius:0.2rem;outline:none;}
.dk_form .dk_field_border_style:focus {border:1px solid rgb(190, 190, 190);}
.dk_form label {padding:0.2rem 0;display:block;}
.dk_form .dk_field+label {padding:0.5rem 0 0.2rem 0;}
.dk_form textarea {margin:0 0 1em;padding:0.5em;max-width:100%;width:100%;}
/* boxer 'flex' styles */
.dk_flex {display:flex;justify-content:space-between;}
.dk_flex .dk_col {width:45%;}
.dk_nah {display:none;}
/* Global button style */
.dk_button {
width:7rem;height:2rem;border:none;display:block;padding:0.4rem;border-radius:0.2rem;outline:none;
background:rgb(0,230,0);color:rgb(10,10,10);
cursor:pointer;
font-size:1rem;font-weight:bold;text-align:center;
font-family:"Roboto", sans-serif;
}
a.dk_button {line-height:1.5rem;}
.dk_button:hover, .dk_button:focus {background:rgb(100, 255, 100);transition: all 0.2s;}
Note. The dk_ prefix should avoid conflicts with other modules.
Tell us what you think:
Hi Jacob, just wanted to ask how I could implement the success message if I use a html form like you?
regards, Jess
Hay Jess, once the form submits (sends a POST request) to your custom PHP script, you can display a success message from the PHP script; or you can do a "303 See Other" redirect to a Wordpress page.
It is usually better to create this whole thing as a Plugin. You can still have a custom script in the plugin folder. I.e.: wp-content/plugins/my-plugin-name/form_submission_handler.php
Remember to validate all input fields. PHP has a function for this called filter_var() that can be used for more complex strings, such as e-mail addresses..
action="/doorkeeper/apps/email_tipper.php
Can you tell me where this php file is placed and how it got invoked ? I'm having trouble even though the php is in the child theme root.