How to Add Contact Forms to a Static WordPress Site for Free

6. The subsequent step is to insert one other Customized HTML block into your submit. Add it immediately above the present block and paste within the following CSS code:

<model>
#contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

label {
  show: block;
  margin-bottom: 5px;
  font-weight: daring;
}

enter, textarea {
  width: 100%;
  padding: 10px;
  border: 1px strong #ddd;
  border-radius: 4px;
}

button {
  background-color: #0066cc;
  colour: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0052a3;
}
</model>Code language: HTML, XML (xml)

The CSS will give your kind an aesthetic look. In case your web site has a sure colour scheme, you may also tweak the code to make it match.

Even when you don’t come from a coding background, CSS is pretty intuitive so this isn’t too troublesome to do. For instance, when you needed to regulate the colour of the button, you’d modify this a part of the code:

button {
  background-color: #0066cc;
  colour: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}Code language: CSS (css)

Should you’re undecided which particular colours your web site is utilizing, you are able to do the next:

• Screenshot some a part of your web site that accommodates the colours you’d like to copy for the shape.
• Add that screenshot to a free device like image color picker and it’ll establish the six digit hex codes (e.g., #0066cc within the present model of the background colour area) of the colours for you.
• Copy them and substitute them into the code to make your edits. You possibly can exchange the colour with hex code within the fields which have written colour phrases too (e.g., change white to #faf0e6).

Once you end, preview what the shape will seem like on the frontend of your web site:

Should you’re happy, save your work!

⚠️ Suggestion: Though not required, I like to recommend turning on reCAPTCHA to your contact kind. It helps forestall spam submissions and Formspree makes it too straightforward to not reap the benefits of it.

Simply return to the display screen the place you copied the shape endpoint. The endpoint is on the Integration a part of the menu. Faucet on Settings after which scroll down till you see CAPTCHA. Toggle it on and also you’re good to go.

The subsequent step is to push your up to date web page/submit with the shape to your dwell web site.

Deploy your web page or submit with the contact kind added

Assuming you adopted my tutorial on organising your static web site, it means you’re going to regenerate your static information utilizing the Merely Static plugin:

Then do the next:

cd ~/Desktop/website-toolsCode language: JavaScript (javascript)

./update-website.sh

✋🤔 If that is complicated to you otherwise you want extra context, head over to the static WordPress site tutorial after which come again right here after.

After you execute the script, wait a couple of minutes and verify your dwell web site to ensure the shape was correctly added. Then check your kind to ensure it really works. If all the things goes easily, you’ll get a affirmation message:

Additionally verify your inbox to make sure that the supply aspect of issues is working correctly:

If all the things appears to be like good, then you definitely’re all set!

The place there’s a will, there’s a manner 💪🏻

Not with the ability to add contact types to a static WordPress web site by default is perhaps irritating at first, however fortunately there are some workarounds to get the job executed. For easy blogs or small-to-medium quantity companies, utilizing the free Formspree plan is arguably the most suitable choice for fixing this frequent static web site difficulty.

For extra advanced wants, an alternate method is to make use of Cloudflare Employees mixed with an electronic mail internet hosting supplier like Zoho Mail. I didn’t cowl that right here as a result of it’s considerably extra intensive, however when you’re concerned about it, drop a remark under and let me know. Maybe I’ll replace this tutorial or write one other one which focuses on this methodology.

💡 You may additionally be concerned about my follow-up information on how to add search functionality to a static WordPress site (additionally without spending a dime).

Have you ever applied contact types in your static web site? Share your expertise under.