This is the source for an Youtube tutorial posted on my channel.
Contact forms are an ubuiquitous component of WordPress websites. By using one you allow your visitors to message you and also avoid exposing your email to spam bots.
Contact form plugins are easy to use and can get you pretty far in the creation process. However, there are some finer points that you need to do for having your form work correctly and look consistent with the rest of the website.
In this tutorial we are going to create a contact form with a captcha, configure the SMTP settings and most importantly improve the style of the form.
div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form textarea {
background-color: #ADC9BF;
}
div.wpforms-container-full .wpforms-form button[type=submit] {
background-color: var(--global--color-primary);
color: var(--global--color-background);
border-width: 3px;
border-color: var(--global--color-primary);
}
div.wpforms-container-full .wpforms-form button[type=submit]:hover {
background-color: var(--global--color-backgound);
color: var(--global--color-primary);
border-width: 3px;
border-color: var(--global--color-primary);
}