Embedded Form Styling

Hey wp1,

Could you post a link to where we can see the element in question please? Also please let us know what you would like to change.

Best regards,
Rikard

Hi,

We would prefer if you don’t email, as the information would not be available to all moderators if you do. Please post a link in private, if you don’t want to share it publicly.

Best regards,
Rikard

Hi,

Thank you for the inquiry.

The contact form is probably using the default contact form styles in the theme. Would you mind providing a link to the actual form demo so that we can compare the styles?

The default forms styles are located in the theme enfold/css/base.css file starting around line 201.

Best regards,
Ismael

Hi,

Thank you for the info.

You may need to contact the script authors in order to modify the donation form and override the theme styles. For starters, you can add this code in the Quick CSS field to override the default contact form styles but the positioning of the form fields will still require some modifications.

#bbox-root {
    font-size: 13px;
}

#top .bbox-root .input-text, #top .bbox-root input[type="text"], #top .bbox-root input[type="input"], #top .bbox-root input[type="password"], #top .bbox-root input[type="email"], #top .bbox-root input[type="number"], #top .bbox-root input[type="url"], #top .bbox-root input[type="tel"], #top .bbox-root input[type="search"], #top textarea, #top select {
    -webkit-appearance: none;
    border: 1px solid #e1e1e1;
    padding: 4px 0;
    outline: none;
    font: 1em "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    margin-bottom: 0;
    background: #fff;
    line-height: 1.4em;
    padding-left: 5px;
    display: inline;
    font-family: inherit;
    float: none;
    border-radius: 3px;
    width: 50%;
    max-width: 171px;
    margin-right: 4px;
}

Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

Best regards,
Ismael

Hi,

Looks like the code is not yet added to the site. Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css. The display property in the css code above should make the fields inline and place them beside each other. Please contact the script authors for additional assistance.

Best regards,
Ismael

Hi,

Yes, please disable both options temporarily while you are editing the site. Have you asked the plugin authors about the css issue? The css for the donation form should load after the base.css file, which contains the default form styling.

Best regards,
Ismael

Hi,
Thank you for your patience please try this css to correct some of the fields breaking down a line:

#top #mongo-form input[type="text"],
#top #mongo-form input[type="tel"],
#top #mongo-form input[type="password"],
#top #mongo-form select {
  display: inline;
}
#top #mongo-form #DC_ValidOther {
    min-width: 100%;
}
#top #mongo-form #DCCreditSecurityCode label {
	display: inline;
	width: 160px;
	margin: 0;
}
#top #mongo-form #bboxdonation_comment_txtComments {
    margin-left: 161px;
}

After applying the css, please clear your browser cache and check.
Please see the screenshot in the Private Content area of the expected results.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike