Customization

Hi @wantedstarling,

Great question! This can be achieved using the Multi-Column set up along with the CSS codes:

1. First, please hide the label and use the placeholder.

2. Next, use the below CSS code:

div.wpforms-container-full .wpforms-form input[type=date], div.wpforms-container-full .wpforms-form input[type=datetime], div.wpforms-container-full .wpforms-form input[type=datetime-local], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=month], div.wpforms-container-full .wpforms-form input[type=number], div.wpforms-container-full .wpforms-form input[type=password], div.wpforms-container-full .wpforms-form input[type=range], div.wpforms-container-full .wpforms-form input[type=search], div.wpforms-container-full .wpforms-form input[type=tel], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=time], div.wpforms-container-full .wpforms-form input[type=url], div.wpforms-container-full .wpforms-form input[type=week], div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form textarea {
    border-bottom: 1px solid #c5bfbf !important;
    border: none;
}

div.wpforms-container-full .wpforms-form button[type=submit] {
    border: none !important;
    background-color: transparent !important;
    font-weight: bold;
    text-transform: uppercase !important;
}

And in case it helps, here’s a tutorial on how to add custom CSS like this to your site.

Hope this helps! 🙂