Create an Author Contact Form with Breakdance

Introduction

In this lesson, you’ll learn how to create a professional, custom contact form for your author website using Breakdance’s built-in form builder. We’re going to put the form inside a Global Block so we can reuse it anywhere on the site. 

Breakdance Form Builder

Breakdance has a built in form builder so no need for an extra plugin. I’m not going to cover every feature just the ones that we need for our contact and newsletter sign up forms. We will cover more advanced forms in the Author Website Playbook

Global Blocks

I’m going to build the contact form inside a global block. Even though we only use the contact form in one location in this course it’s a good habit to get into as you may wish to reuse forms on other pages for special promotions.

• From the WordPress admin dashboard go to Breakdance > Global Blocks.
• Add a new Global Block and call it Global Contact Form
• Edit this new global block in Breakdance

Form Builder

• Inside the Breakdance editor click the add button
• Search for Form
• Click on the FORM BUILDER element to add it to the canvas
• Rename to the form to Global Contact Form

By default Breakdance adds the three most commonly used fields to the new form. Name, email and Message. We’re going to leave most of this in place with only a few adjustments.

• I’m changing the SUBMIT TEXT field to ‘CONTACT DIRK’ which instantly updates the button on the canvas. Contact Dirk is a more active call to action than the default ‘Submit’ text.
• After the form has been submitted I want to take the visitor to the Contact Thank You Page we built in the previous lesson. 
• Enable Redirect on Submit
• Click on REDIRECT URL 
• Click on the link icon inside the URL entry box and search for the TY Contact page from the previous lesson.
• I click on that page and ADD LINK

Style the form

As Dirk is a multi-genre author I’m using a fairly neutral colour scheme for his website branding. This can make it difficult for the form fields to stand out on the page. I’m going to make the input fields pop by adding a 1 pixel border using the brand colour and keep the corners consistent with the rest of the site with an 8 pixel radius.

• From the Design tab for the element go to Form > Spacing
• Set between fields to 3 rem pixels
• Then go to the Fields sub-tab
• Click on borders
• Set the radius to 8 pixels
• Width to 1 pixel
• Change the colour to brand
• Go back to FIELDS
• Click on REQUIRED
• Change the colour to BRAND so the asterisk on the form match the borders of the input fields and the overall look of the site
• Save the form styling as a Preset named Standard Form
• Go back to the form section
• Save the work so far.

Summary

We now have a a fully functional contact form within a global block using Breakdance’s default settings and a few strategic style enhancements. This ensures consistent design across the site, makes it easy to reuse the form, and simplifies reader interactions.

Next Lesson

We also set up an action for our form to redirect to our contact thank you page. In the next lesson we are going to add more actions to the form to ensure the message gets to where it needs to go.