"contact form styling" (#1929673) / ClaPat Studio

cristian started the conversation

March 12, 2019 at 10:37am

hello,

I copied the styling of the contact form from another help ticket here and it works fine.

here is what I copied:

_______

<div id="contact-formular">

    <div class="name-box">[text* your-name placeholder "Full Name*"]</div>

    <div class="email-box">[email* your-email placeholder "Email*"]</div>

<div class="message-box">[textarea* your-message placeholder "Your Message*"]</div>
<div class="submit-box">[submit "Submit"]</div>

</div>

________________

But I might want to modify it a litte.

- I was wondering if you have a list of styling options somehwere I can copy?

- if I want to add a field, eg. subject, how do I do that?

- if I want to style the response answers differently? At the moment they have a not so pretty colored square around them (screenshot)

- if I want to style font type, size etc how where do I do that ?

1,811

Support replied

March 13, 2019 at 6:48pm

Hello Cristian

To add a new field (which covers the whole width of the form) such as subject modify the contact form as follows

<div id="contact-formular">

<div class="name-box">[text* your-name placeholder "Full Name*"]</div>

<div class="email-box">[email* your-email placeholder "Email*"]</div>

<div class="subject-box">[text* your-subject placeholder "Subject*"]</div>

<div class="message-box">[textarea* your-message placeholder "Your Message*"]</div>
<div class="submit-box">[submit "Submit"]</div>

</div>

and then add the following in customiser -> additional CSS

.subject-box {
width: 100%;
float: left;
margin-bottom: 20px;
margin-right: 6%;
position: relative;
}

All the styles related with contact form can be found in /css/shortcodes.css

under

/* 8. Contact Formular */

You need to inspect the response field and the modify the styles correspondingly in customizer -> additional CSS

https://d.pr/free/i/lTWzbG

Thank you.

Clapat Support