Form does not have the right layout

Dear Enfold-experts,

I just added a support contact form on my enfold theme.

The problem is that is does not look like the forms here:

I would like the following:
– In my version I have borders around the different text fields – I would like it like in the above link
– There is too much padding under the submit-button
– There does not come a red border when it validates the form

When I try to add some of the CSS modifications on my quick css it does not affect anything:

Here is how I inserted the form:

[av_contact (Email address hidden if logged out) ' title='How can we help you?' on_send='' sent='Your message has been sent! We will get back to you shortly.' link='manually,http://' subject='Support Request' autorespond='' captcha='' form_align='' color='' custom_class='' admin_preview_bg='' av_uid='av-hroj83']
[av_contact_field label='Name' type='text' options='' check='is_empty' width='' multi_select='' av_contact_preselect='' av_uid='av-hkvmv7'][/av_contact_field]
[av_contact_field label='E-Mail' type='text' options='' check='is_email' width='' multi_select='' av_contact_preselect='' av_uid='av-hhfwe3'][/av_contact_field]
[av_contact_field label='Message' type='textarea' check='is_empty' options='' multi_select='' av_contact_preselect='' width='' av_uid='av-h5d55n'][/av_contact_field]
[/av_contact]

I tried to change to layout by:

.av-contact-form-title fieldset h3 {
font-size: 24px;
text-transform: uppercase;
}

or
/*—————————————-
// CSS – Contact form label icons
//————————————–*/
#top .avia_ajax_form.cf-label-icons label{
padding-left: 20px;
}
#top .avia_ajax_form.cf-label-icons label::before {
position: absolute;
left:0;
font-family: ‘entypo-fontello’;
}
#top .avia_ajax_form.cf-label-icons fieldset p:nth-child(2) label:before{
content:”e80a”;
}
#top .avia_ajax_form.cf-label-icons fieldset p:nth-child(3) label:before{
content:”e805″;
}
#top .avia_ajax_form.cf-label-icons fieldset p:nth-child(4) label:before{
content:”e826″;
}
#top .avia_ajax_form.cf-label-icons fieldset p:nth-child(5) label:before{
content:”e83b”;
}
/* Input field do not support pseudo elements so we target the last p in the fieldset which is usually the submit button */
#top .avia_ajax_form.cf-label-icons fieldset p:last-child:before{
content:”e844″;
color:#FFF;
font-family: ‘entypo-fontello’;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
}

But nothing changes

I hope you can help.

• This topic was modified 6 years, 5 months ago by ksnoo04.