Opt-In Check Box & Rich Text alignment issue

[Patrick_Vesely]

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.

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;

}

[SanfordWhiteman]

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

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

[Patrick_Vesely]

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

[Grégoire_Miche2 · Accepted solution]

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

[Patrick_Vesely]

Thank you, Gregoire Michel  and Sanford Whiteman

[Emilia_Chioncel]

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

[SanfordWhiteman]

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.

[Grégoire_Miche2]

Hi Emilia,

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

-Greg

[Emilia_Chioncel]

Did so, Gregoire!

Thanks a lot,

Emilia