[cxanderParticipant]

I’m using the Renew stack and I have installed Caldera Forms. I added a form on the home page of my site, but would like to make a few changes to it. I’m pretty sure custom CSS will do the trick, but I’m not exactly sure of the codes needed to achieve my desired look. My website is http://www.soundinnovationdj.com and the form is place over a background image on my homepage. Below are the changes I would like to make.

1-Have very little space inbetween all of the fields (above below and In between multiple fields that are in one line ex first/last name)
2-Make the fields a little thinner (top to bottom).
3-I’d also like to add a thin 1px red boarder around all the fields if someone skips over it as all fields are required.

Thank you in advance for your help. I’m so please with how the site is turning out and so happy I decided to purchase the X theme as the support has been outstanding!

Regards,
Chad

[NicoModerator]

Hi There,

Thanks for writing in.

1. Add this in your customizer > Custom > CSS:

.caldera-grid .form-group{
    margin-bottom: 0px;
    margin-top: 5px;
}

.caldera-grid .row {
    margin-left: 10.5px;
    margin-right: 14.5px;
}

2.

 .caldera-grid .form-control{
    height: 24px;
}

3. It is quite a plugin customization which is beyond the scope of our support. The functionality should be added on the plugin. For this customization, it would be best that you will contact a custom developer.

Thank you for understanding.

[cxanderParticipant]

Hmmm, I have tried the CSS, but those figures didn’t make a change.

.caldera-grid .form-group{
margin-bottom: 0px;
margin-top: 5px;
}

^I had to set these to negative values to make the change I needed. I changed the margin-top to -13px and the margin-bottom at 0px. I also added the following for the submit button:

.caldera-grid input[type=submit] {
margin-top: 5px;
margin-bottom: -18px;
}

.caldera-grid .row {
margin-left: 10.5px;
margin-right: 14.5px;
}
^This CSS code made no change regardless of the values input.

I just realized for the 3rd customization I inquired on my first post I was mistaken. There actually is a red boarder when a user submits the form without filling in a required field, but there is also a message letting the user know about the error. Is there a way to hide the required field message?

I have the form looking pretty much how I want with one exception: I would still like to eliminate more space (left/right) between the first/last name and city/state fields.

Thanks again for your help.

[Rue NelModerator]

Hello There,

Thanks for updating in! Regretfully your site is under construction mode. To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[cxanderParticipant]

My apologies, I forgot that I left the site in under construction. The site is now free to view if you would have a chance to look at it, I’d greatly appreciate it.

[RahulModerator]

Hey There,

Thanks for writing in!

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[cxanderParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please find this code and add semicolon at the ens of CSS property :

.x-navbar .desktop .x-nav li>a>span:after{content: "\f0d7" !important}

Then add the code Nico provided in previous replay.

Add following code as well :

.caldera-grid .form-control {
    height: 29px;
    padding: 2px 12px;
}

Hope it helps.

[RadModerator]

Hi there,

Please add this CSS too

  .caldera_ajax_error_block {
  display: none !important;
  }
.caldera-grid .col-lg-1, .caldera-grid .col-lg-10, .caldera-grid .col-lg-11, .caldera-grid .col-lg-12, .caldera-grid .col-lg-2, .caldera-grid .col-lg-3, .caldera-grid .col-lg-4, .caldera-grid .col-lg-5, .caldera-grid .col-lg-6, .caldera-grid .col-lg-7, .caldera-grid .col-lg-8, .caldera-grid .col-lg-9, .caldera-grid .col-md-1, .caldera-grid .col-md-10, .caldera-grid .col-md-11, .caldera-grid .col-md-12, .caldera-grid .col-md-2, .caldera-grid .col-md-3, .caldera-grid .col-md-4, .caldera-grid .col-md-5, .caldera-grid .col-md-6, .caldera-grid .col-md-7, .caldera-grid .col-md-8, .caldera-grid .col-md-9, .caldera-grid .col-sm-1, .caldera-grid .col-sm-10, .caldera-grid .col-sm-11, .caldera-grid .col-sm-12, .caldera-grid .col-sm-2, .caldera-grid .col-sm-3, .caldera-grid .col-sm-4, .caldera-grid .col-sm-5, .caldera-grid .col-sm-6, .caldera-grid .col-sm-7, .caldera-grid .col-sm-8, .caldera-grid .col-sm-9, .caldera-grid .col-xs-1, .caldera-grid .col-xs-10, .caldera-grid .col-xs-11, .caldera-grid .col-xs-12, .caldera-grid .col-xs-2, .caldera-grid .col-xs-3, .caldera-grid .col-xs-4, .caldera-grid .col-xs-5, .caldera-grid .col-xs-6, .caldera-grid .col-xs-7, .caldera-grid .col-xs-8, .caldera-grid .col-xs-9 {
padding-left: 0px;
}

And change this

.caldera-grid .row {
    margin-left: -7.5px;
    margin-right: -7.5px;
}

to this

.caldera-grid .row {
    margin-left: -7.5px;
    margin-right: -15px;
}

Hope this helps.

[cxanderParticipant]

Perfect thank you

[ThaiModerator]

If you need anything else please let us know.

[cxanderParticipant]

Okay, the first form looks great. I created another form on a different page that has a different look as it’s all in one line. If I wanted to make adjustments to the submit button as I did for the form on my home page, how do I go about that? The CSS is already there, but it isn’t showing up in the new form.

[Paul RModerator]

Hi,

Can you provide us the exact url of the page where we can see your new form.

Thanks

[cxanderParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

You can apply your CSS specific to a page, example,

.home .caldera-grid input[type=submit] {
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 5px;
    margin-bottom: -20px;
    border-radius: 4px;
    border: 2px solid #009fe4;
    background: #009fe4;
    color: #ffffff;
    font-size: 20px;
    font-family: "Georgia";
    font-weight: bold;
    font-style: italic;
}
.home .caldera-grid input[type=submit]:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: #009fe4;
    color: #009fe4;
    transition: all 0.4s ease-in-out;
}

This means it will only take effect to .caldera-grid input[type=submit] element on home page.

Thanks!

[Author]

Posts