Customize Contact form

Hey oeilneuf74,

Thank you for using Enfold.

Looks like you’ve switched to the theme’s contact form. Do you still require help with this?

Best regards,
Ismael

Hi,

Thank you for the update.

Use the following css code to adjust the style of the contact fields.

#top .main_color .input-text, #top .main_color input[type='text'], #top .main_color input[type='input'], #top .main_color input[type='password'], #top .main_color input[type='email'], #top .main_color input[type='number'], #top .main_color input[type='url'], #top .main_color input[type='tel'], #top .main_color input[type='search'], #top .main_color textarea, #top .main_color select {
    color: #fff;
    border-color: #fff;
    border-width: 2px !important;
    background-color: transparent;
}

If you want to separate the input fields into columns, wrap the cf7 field shortcodes inside a paragraph tag and apply the appropriate class attributes. Example:

<p class="first_form form_element form_element_half">[cf7 shortcode here]</p>
<p class=" form_element form_element_half">[cf7 shortcode here]</p>

Best regards,
Ismael

Hi,

Thank you for the update.

I just found out that you have to wrap the fields inside a container with the class attribute “avia_ajax_form”.

We created an example for you. (see private field)

<div class="avia_ajax_form">
<p class="first_form form_element form_element_half">
<label> Votre nom (obligatoire)
    [text* your-name] </label>

<p class=" form_element form_element_half">
<label> Votre adresse de messagerie (obligatoire)
    [email* your-email] </label>

<p class=" form_element">
[submit "Envoyer"]

</div>

Best regards,
Ismael

Hi,

You’re welcome! Glad we could help. Please don’t hesitate to open a new thread if you need anything else.

Have a nice day!

Best regards,
Ismael