Caldera Forms Styling

/* START Caldera */
.control-label{
color: #696298;
font-weight: normal !important;
}
.caldera-grid .btn-default {
font-size: 20px;
padding: .3em 1em;
}
.caldera-grid .btn-default {
background-color:#CDBAD6;
color: #696298;
border: 1px solid #696298;
}
.caldera-grid .btn:hover {
background-color: #696298 !important ;
color: #CDBAD6 !important;
border: 1px solid #CDBAD6 !important;
}
.cf-toggle-switch .btn-success {
background-color: #696298;
border-color: #CDBAD6;
color: #CDBAD6;
}
.caldera-grid .form-control {
border-color: #CDBAD6 !important;
}
.caldera-grid .form-control:focus {
border-color: #696298 !important;
box-shadow: 0 0 0 #CDBAD6, 0 0 8px #CDBAD6 !important;
}
/* END Caldera */
Code language: CSS (css)

Default value for Toggle Switch, dropdown select etc

If you have a form with a toggle switch, you can set a default value in different ways.

21/3/2019: looks like this only works for dropdowns, not toggle select

<https://calderaforms.com/doc/using-magic-tags-caldera-forms/>

Embedded Post data

Use this if the same form is embedded in multiple pages, where the default value of the select field depends on the page in wich it has been embedded. Downside: it shows the postID (not the label) in the form entry list. And it probably won't work if you have a multi-lingual website where each translated page has it's own pageID. It also doesn't work for a toggle switch.

1. For the toggle switch, enter a variable in the default option field.

Example:

1. In the 'Value' field of each select options, enter the postID of the

post that holds the form in which that toggle should be default. Examples:

1. Important: de standard variables {} and the {summery} variable for

the email + processor prints the contents of the value field. To print the label, insert a variable like this:

• %slug:label%
• Not %slug%
• You can't change it in the {summary}

## Get Variable (URL)

This is a "query string parameters" that is passed in the URL.

Use this if you have a single page where the form is embedded, where the default value of the select field can be set with the link that points to the page with the form.

1. For the toggle switch, enter a variable in the default option field.

Example:

1. Add the content of the 'value' field of the select option to the url

you use to link to the page that holds the form. Example:

• <https://www.bakkerinvorden.nl/zalen/reserveer-een-bijeenkomst/?type=zaal>
• <https://www.bakkerinvorden.nl/zalen/reserveer-een-bijeenkomst/?type=bruiloft>