Share via:

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!

30 views

Edited: 2020-02-10 18:57

Recently I had to connect a HTML form that was designed with Divi with a custom PHP back-end. This proved to be difficult from the Divi WYSIWYG editor. I actually did not find out how to do it, and I probably wasted a couple of hours fiddling with the forms we had designed. If it is possible to change the action URL, the feature has been well hidden.

What I instead did was insert a HTML code block with my own custom hand-written HTML form. This is something I think all web-developers should be able to do with ease.

Normally I would never use a tool like Divi, as I find them completely irrelevant for people who know how to code. However, on this particular project, someone already decided to use Divi for the design. The problem with Divi is that it is not free, and you also run the risk that it will stop working in future versions of Wordpress. Divi is also extremely slow to work with, and the editor takes several seconds to load on my system.

I actually find hand-coding to be faster than WYSIWYG tools in many cases. Luckily, Divi also allows you to insert custom HTML. The problem is, if you re-use code, this will not be the right approach, nevertheless, it is useful when the code is just active on a single page.

Using HTML in Divi editor

Custom HTML works surprisingly well in the Divi editor. It even reads external CSS included via link element, so the custom HTML will show up 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 I tried submitting a form, it simply submitted the form to the same page, and it did not seem like I could change the action URL or edit the HTML manually, and so I had to insert custom HTML instead.

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 content 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 if you expect users with visual impairment to use your applications or not, at it takes so little of your time that there is just no excuse not to do it.

Below is an example of a 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.

Comments