WP Forms customisation

Support
#1

Hello

I am using WP Form on my site.

I would like to make the text area fields:

  • semi transparent
  • & be able to change colour
  • also change the padding between the fields
    Also make the following changes to the button:
  • font, width, colour, transparency

Could you please provide a dummy guide step by step on what I need to do?

#2

Hi Tatyana,

Thank you for reaching out to us. You can do this with custom CSS, try adding the following code in the Theme Options > CSS:

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 {
    background-color: rgba(255,255,255,0.5) !important;
    color: #ff002d !important;
    max-width: 100% !important;
}
  • For the button you can make use of the following code:
div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit], div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: rgba(5, 4, 4, 0.5) !important;
    border: none !important;
    color: #fff !important;
    font-size: 20px !important;
    width: 100% !important;
}

Feel free to make adjustments in the code as per your need but please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope.

Cheers!

#3

thank you so much!

It works beautifully :)))

A few more additional changes that I would like to kindly ask your help with please:

  • how do I change the font text from bold to non-bold?
  • How do I change the border colour from white to something else?

#4

also, please help me with arranging the columns.

I would like to have TWO columns perfectly aligned in size to each other as in the attached document

1st Column:
Name
Email
Preferred Appointment Time

2nd Column:
Got Questions? Ask Away
Get In touch Button

What is the CSS to achieve this?

#5

Hi Tatyana,

Please try this code:

div.wpforms-container-full .wpforms-form .wpforms-field-label {
    font-weight: normal !important;
}

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-color: #efefef !important;
}

In order to achieve this, you will also need to restructure the fields of your form in the form settings. As this is third party plugin, we are not certain how the form fields are structured. Kindly refer to the original developer for assistance.

Hope this helps

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.