How to Customize Contact Form 7 in WordPress with Handmade SVG

How to Customize Contact Form 7 in WordPress with Handmade SVG

What You'll Be Creating

In a previous tutorial you learned how to create a responsive handmade SVG form. Today, we’ll go a step further and make it dynamic. 

• 
  Forms
  How to Build a Responsive Handmade SVG Form
  George Martsoukos

I’ll explain how to integrate this form with WordPress using Contact Form 7 (CF7), arguably the most popular WordPress form plugin.

What We’ll be Building

Here’s a quick video demo of the WordPress form in action:

Note: This tutorial assumes that you are somewhat familiar with WordPress and Contact Form 7.

Assuming that you’ve installed CF7 to a WordPress project, let’s discuss the steps needed for making the form compatible with this plugin.

1. Include SVG Sprites

To begin with we have to include the SVG sprites in our project. 

In the previous tutorial we used a single <svg> element containing all the various elements we needed as <symbol>s, each with a unique id. Whenever we needed one of the elements in our form we’d do so with a <use> element, referencing the id like so:

<svg>
    <use xlink:href="#checkbox_empty"></use>
</svg>

Now, within our WordPress theme, we’ll create a new PHP file to hold the SVG sprite markup:

We’ll then incorporate this SVG content just after the opening body tag in our theme’s header.php:

2. Create the Contact Form

The second step is to create the form from within WordPress. 

We’ll use a combination of CF7 shortcodes along with some custom HTML.

Two things are important here:

• Firstly, if you look at the previous tutorial, all form child elements are wrapped within the .handmade-form and .container wrapper elements. Later, when we call the form, we’ll attach these wrapper classes directly to the form element. 
• Secondly, we cannot 100% recreate the markup for the custom checkboxes with the available CF7 shortcodes. To overcome this limitation we’ll write some custom JavaScript. Plus, for easier manipulation, the .checkbox-list won’t remain a ul, but we’ll convert it into a div.

Here’s the code that we have to add to the CF7 editor:

<h1>Contact us</h1>
<ul>
  <li class="grid grid-2">
    <div class="form-wrapper">
      [text* your-name placeholder "Name*"]
      <svg>
        <use xlink:href="#input1"></use>
      </svg>
    </div>
    <div class="form-wrapper">
      [text* your-surname placeholder "Surname*"]
      <svg>
        <use xlink:href="#input2"></use>
      </svg>
    </div>
  </li>
  <li class="grid grid-2">
    <div class="form-wrapper">
      [email* your-email placeholder "Email*"]
      <svg>
        <use xlink:href="#input3"></use>
      </svg>
    </div>
    <div class="form-wrapper">
      [tel your-phone placeholder "Phone"]
      <svg>
        <use xlink:href="#input4"></use>
      </svg>
    </div>
  </li>
  <li class="form-wrapper">
    [textarea your-message placeholder "Message"]
    <svg>
      <use xlink:href="#textarea"></use>
    </svg>
  </li>
  <li class="form-wrapper">
    <fieldset>
      <legend>Select preferred method of contact</legend>
      <div class="checkbox-list">
        [radio contact-method default:1 "email" "phone"]   
      </div>
      <svg>
        <use xlink:href="#fieldset"></use>
      </svg>
    </fieldset>
  </li>
  <li class="grid grid-3">
    <div class="form-wrapper">
      <button type="submit" class="wpcf7-form-control wpcf7-submit">SUBMIT</button>
      <svg>
        <use xlink:href="#button"></use>
      </svg>
    </div>
    <div class="form-wrapper">
      <button type="reset">RESET</button>
      <svg>
        <use xlink:href="#button"></use>
      </svg>
    </div>
  </li>
</ul>

3. Add the CSS Form Styles

Moving on, we’ll enqueue a new CSS file in the functions.php file of our project, like this (your destination folder may differ though):

wp_enqueue_style( 'customcss', get_template_directory_uri() . '/assets/css/custom.css' );

Here we’ll put most of the styles from the static demo with some new additions for the editing messages that come with CF7.

Here are all the required styles:

/* RESET RULES & INITIAL SET UP
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
  font-family: "Summer";
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/Summer%20Font%20Regular.woff);
}

@font-face {
  font-family: "Summer Bold";
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/Summer%20Font%20Bold.woff);
}

:root {
  --white: #fff;
  --red: #e31b23;
}

* {
  padding: 0;
  margin: 0;
  border: none;
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

input,
textarea,
button {
  font-family: inherit;
  font-size: 100%;
  background: none;
  outline: none;
}

[type="radio"] {
  position: absolute;
  left: -9999px;
}

button,
label {
  cursor: pointer;
}

textarea {
  resize: none;
}

ul {
  list-style: none;
}

body {
  font: 32px/1.2 "Summer";
  margin: 1.5rem 0;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1.5rem;
}


/* FORM ELEMENTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.handmade-form h1,
.handmade-form li,
.handmade-form .grid > *:not(:last-child) {
  margin-bottom: 1.5rem;
}

.handmade-form .form-wrapper,
.handmade-form input:not([type="radio"]),
.handmade-form textarea,
.handmade-form button,
.handmade-form .checkbox-list label {
  position: relative;
}

.handmade-form input:not([type="radio"]),
.handmade-form textarea,
.handmade-form button,
.handmade-form .checkbox-list label {
  z-index: 1;
}

.handmade-form input:not([type="radio"]),
.handmade-form textarea,
.handmade-form button {
  width: 100%;
}

.handmade-form input:not([type="radio"]),
.handmade-form textarea,
.handmade-form fieldset {
  padding: 15px;
}

.handmade-form textarea {
  height: 200px;
  vertical-align: top;
}

.handmade-form legend {
  padding-top: 15px;
  margin: 0 auto;
}

.handmade-form ::placeholder {
  color: inherit;
  /*Fix opacity issue on Firefox*/
  opacity: 1;
}

.handmade-form .form-wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.handmade-form button {
  font-family: "Summer Bold";
  color: var(--white);
  padding: 5px 10px;
}


/* RADIO BUTTONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.handmade-form .checkbox-list {
  display: flex;
  justify-content: center;
}

.handmade-form .checkbox-list .first {
  margin-right: 50px;
}

.handmade-form .checkbox-list label svg {
  top: 50%;
  left: -25px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
}

.handmade-form .checkbox-list label .checkmark {
  /*the value of the stroke-* properties comes from the getTotalLength() method*/
  stroke-dasharray: 233.69552612304688;
  stroke-dashoffset: 233.69552612304688;
  transition: stroke-dashoffset 0.5s linear;
}

.handmade-form [type="radio"]:checked + label .checkmark {
  stroke-dashoffset: 0;
}


/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 600px) {
  .handmade-form .grid {
    display: grid;
    grid-gap: 1.5rem;
  }

  .handmade-form .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .handmade-form .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .handmade-form .grid > *:not(:last-child) {
    margin-bottom: 0;
  }
}


/* OUTPUT MESSAGES CF7
–––––––––––––––––––––––––––––––––––––––––––––––––– */
span.wpcf7-form-control-wrap {
  display: block;
}

span.wpcf7-not-valid-tip {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 24px;
}

div.wpcf7-validation-errors, 
div.wpcf7-acceptance-missing,
div.wpcf7-mail-sent-ng, 
div.wpcf7-aborted,
div.wpcf7-mail-sent-ok {
  border: none;
  color: red;
  margin: 0;
}

div.wpcf7-mail-sent-ok {
  color: green;
}

Note: For this example, I’m using a vanilla theme. Depending on your theme though, some of these styles may be overridden. Given that fact, if the form doesn’t appear as expected in your project, be sure to check your theme styles and make the necessary changes. 

4. Add the JavaScript

Coming up next, we’ll enqueue a new JavaScript file in the functions.php file of our project, like this (your destination folder may differ though):

wp_enqueue_script( 'customjs', get_template_directory_uri() . '/assets/js/custom.js', array(), '', true );

Then, within it, we’ll write the code needed for the checkbox functionality:

const radios = document.querySelectorAll(".checkbox-list .wpcf7-list-item");
const wpcf7Elm = document.querySelector(".wpcf7");

radios.forEach((radio) => {
  const input = radio.querySelector("input");
  input.nextElementSibling.remove();
  const inputValue = input.value;
  input.id = inputValue;
  const label = document.createElement("label");
  label.setAttribute("for", inputValue);
  label.innerHTML = `
    <svg>
      <use xlink:href="#checkbox_empty"></use>
    </svg>
    <svg class="checkmark">
      <use xlink:href="#checkmark"></use>
    </svg>   
    By ${inputValue}
  `;
  radio.appendChild(label);
});

Bonus: Customize the Output Messages

Just for fun, let's add one of our custom SVGs to the AJAX output messages. 

To do this we won’t use any CSS; instead we’ll take advantage of Contact Form 7’s AJAX events:

const wpcf7Elm = document.querySelector(".wpcf7");
const output = document.querySelector(".wpcf7-response-output");
const html = `
  <svg>
    <use xlink:href="#fieldset"></use>
  </svg>
`;

wpcf7Elm.addEventListener("wpcf7submit", () => {
  setTimeout(() => {
    output.classList.add("form-wrapper");
    output.insertAdjacentHTML("beforeend", html);
  }, 100);
});

5. Call the Contact Form

Last but not least, we’ll include the generated CF7 shortcode in the desired part of our project:

[contact-form-7 id="5" title="Handmade SVG Form" html_class="handmade-form container"]

Notice the classes added via the html_class attribute.

Premium Contact Form Plugins

Free plugins are great when you’re getting started with WordPress, but if you want to go to the next level with your sites and save yourself time while you’re doing it, consider a premium contact form plugin from CodeCanyon.

• 
  WordPress
  Best WordPress Contact Form Plugins
  Nona Blackman
• 
  WordPress
  Choose a Form Builder: The 7 Best WordPress Form Builders Compared
  Nona Blackman
• 
  WordPress Plugins
  Create a Drag-and-Drop Contact Form With the FormCraft 3 WordPress Plugin
  Daniel Strongin

You’ve Customized a Contact Form 7 with SVG!

And we’re done folks! In this tutorial we walked through the process of converting a static SVG form into something dynamic by incorporating it into a popular WordPress form plugin. Hopefully the steps were clear to you and you’ll give it a try. 

Have you ever done any customization for Contact Form 7?

If you have any questions or problems, do let me know in the comments below!