SOLVED

Opt-In Check Box & Rich Text alignment issue

Go to solution
Highlighted

Opt-In Check Box & Rich Text alignment issue

I see a few discussions on this topic but nothing is working for me.  I am trying to line up the Checkbox with the Rich text in our Forms, but I am running into issues.

- The Opt-In is a Checkbox and the copy is Rich Text.  (I tried using Checkboxes- but the hyperlink for the Privacy Policy does not work).

- The ultimate goal is to have the  Checkbox aligned to the Left and the Rich Text to right

Any guidance or assistance will be so helpful.

Optin_rich text.png

Below is the current CSS that we are using:

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */

    color: #A0A0A0;

    opacity: 1; /* Firefox */

}

:-ms-input-placeholder { /* Internet Explorer 10-11 */

    color: #A0A0A0;

}

::-ms-input-placeholder { /* Microsoft Edge */

    color: #A0A0A0;

}

.mktoForm input[type=text],

.mktoForm input[type=url],

.mktoForm input[type=email],

.mktoForm input[type=tel],

.mktoForm input[type=number],

.mktoForm input[type=date],

.mktoForm select.mktoField,

.mktoForm textarea.mktoField {

    -webkit-appearance: none;

    background-color: #FFFFFF;

    line-height: 30px;

    color: #666666;

    border: 2px solid #e7e7e7;

    -webkit-border-radius: 0px;

    -moz-border-radius: 0px;

    border-radius: 0px;

    padding: 0.1em 0.2em;

    box-shadow: inset 0px 0px 0px 0px #ddd;

    min-height: 1.5em;

    font-family: 'Helvetica';

    font-size: 15px;

    font-weight: 300;

    padding-left: 10px;

}

select

{

    color: #A0A0A0 !important;

}

option

{

    color: #000;

}

option:first-child

{

    color: #A0A0A0 !important;

}

option:not(::first-child)

{

    color: #000 !important;

}

.mktoButton {

    height: auto;

    position: relative;

    z-index: 100;

    background-color: #C94927 !important;

    border: none;

    box-shadow: 0 1px 3px rgba(0,0,0,0.5);

    border-radius: 2px;

    color: #FFFFFF;

    font-size: 16px;

    font-weight: 300;

    line-height: 20px;

    min-width: 140px;

    padding: 10px 15px;

    text-align: center;

    text-transform: uppercase;

border:0 !important;

}

.mktoButton:active {

    box-shadow: none !important;

    -webkit-box-shadow: none !important;

}

.mktoButton:hover {

background-color: #e4551f !important;

color: #ffffff !important;

}

.mktoButton:focus {

color: #ffffff !important;

}

.mktoForm .mktoRequiredField .mktoAsterix { 

display: none!important; 

}

.mktoForm .mktoOffset {

    float: left;

    height:0 !important;

    width:10px;

}

.mktoForm .mktoGutter {

     float: unset;

     height: unset;

     width: 0px;

}

input:not([type]):focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {

    border-bottom: 2px solid #e7e7e7 !important;

    box-shadow: none !important;

}

input:focus,

select:focus,

textarea:focus{

    outline: none;

}

/* responsive */

.mktoForm {

  width:100% !important;

}

.mktoFormRow, .mktoFieldWrap, .mktoFormCol, .mktoButtonRow {

  width:100%;

}

.mktoForm input[type=url],

.mktoForm input[type=text],

.mktoForm input[type=date],

.mktoForm input[type=tel],

.mktoForm input[type=email],

.mktoForm input[type=number],

.mktoForm select.mktoField,

.mktoButton {

  width:100% !important;

  height: 40px !important;

}

.mktoForm textarea.mktoField {

  width:100% !important;

  height: 120px !important;

}

 

.mktoButtonRow {

  text-align:center !important;

  width:100% !important;

}

.mktoButtonWrap {

  margin-left:0 !important;

}

input[name="FirstName"],

input[name="LastName"],

input[name="Company"]{

  text-transform: capitalize;

}

#interestshp, label[for=interestshp] {display:none !important;}

input[type="checkbox"]

{

    vertical-align:middle;

}

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted

Re: Opt-In Check Box & Rich Text alignment issue

Use a Checkboxes, instead of the checkbox. Remove the label and set it's width to 0. add the rich text HTML to the field display value and "yes" as a store value.

The display value should be

<p style="margin-left: 15px;">Yes, I would like to receive marketing communications from IBISWorld. IBISWorld respects my data security as described in the <a href="https://www.ibisworld.co.uk/about/privacy/" target="_blank">Privacy Policy</a>.</p>

-Greg

View solution in original post

8 REPLIES 8
Highlighted
Level 10 - Community Moderator

Re: Opt-In Check Box & Rich Text alignment issue

A link to your page is more useful than a CSS dump.

(Also, please always highlight code using the Advanced Editor's syntax highlighter.)

Highlighted

Re: Opt-In Check Box & Rich Text alignment issue

Here is the URL:  https://www.ibisworld.co.uk/about/contact/

Sorry, I thought I had included it in the first part of my message

Highlighted

Re: Opt-In Check Box & Rich Text alignment issue

Use a Checkboxes, instead of the checkbox. Remove the label and set it's width to 0. add the rich text HTML to the field display value and "yes" as a store value.

The display value should be

<p style="margin-left: 15px;">Yes, I would like to receive marketing communications from IBISWorld. IBISWorld respects my data security as described in the <a href="https://www.ibisworld.co.uk/about/privacy/" target="_blank">Privacy Policy</a>.</p>

-Greg

View solution in original post

Highlighted

Re: Opt-In Check Box & Rich Text alignment issue

Highlighted

Re: Opt-In Check Box & Rich Text alignment issue

Hi everyone,

Stepping in with a question here. Does the consent need to be a checkbox? Is it mandatory?

Would a Select type of field with Yes/No as displayed values and True/False as stored values would work?

Asking this, as we might encounter an issue with implementing the checkboxes on the website.

Thanks a lot,

Emilia

Highlighted
Level 10 - Community Moderator

Re: Opt-In Check Box & Rich Text alignment issue

Would a Select type of field with Yes/No as displayed values and True/False as stored values would work?

You can use any widget (input type) you want. There isn't a legal requirement to use a checkbox, it's just the input type that's generally accepted to be backed by a Boolean.

If you have more questions please open new thread, though.

Highlighted

Re: Opt-In Check Box & Rich Text alignment issue

Hi Emilia,

Pls open a new question, you will get more visibility and will have more numerous and quicker answers.

-Greg

Highlighted

Re: Opt-In Check Box & Rich Text alignment issue

Did so, Gregoire!

Thanks a lot,

Emilia