Icons cover text!

Hi @smiklau

The icons shouldn’t cover the text – maybe there’s some conflicting CSS, or maybe your form code has some errors.

Could you please paste your form code here for me to check? And if your website or form is public, could you send me a link so that I can debug?

I’m unsure what you mean by “higher fields”, you might have to elaborate or send a screenshot example.

Thanks,
Angus

https://www.kawayanholidayresort.com/online-check-in/

<p class=”ozy-full-input”>ANGABEN ZUR BUCHUNG:</p>
[md-form]
[md-text label=”Buchungsnummer” outlined=”yes” desktopwidth=”6″]
[text* text-413]
[/md-text]
[md-text label=”Reiseanbieter” icon=”support_agent” outlined=”yes” desktopwidth=”6″]
[text* text-870]
[/md-text]
[md-text label=”Anreisedatum” icon=”date_range” outlined=”yes” desktopwidth=”6″]
[date* arrive]
[/md-text]
[md-text label=”Abreisedatum” icon=”date_range” outlined=”yes” desktopwidth=”6″]
[date* depart]
[/md-text]
[md-select label=”Anzahl G?ste” outlined=”yes” desktopwidth=”6″]
[select* menu-366 “1” “2” “3 (Nur im Prestige mit Zusatzbett m?glich)” “4 (Nur im Prestige mit Zusatzbett m?glich)”]
[/md-select]

[md-select label=”Ankunftszeit” outlined=”yes” desktopwidth=”6″]
[select* menu-755 “Weiss ich nicht” “07.00 – 08.00 ” “08.00 – 09.00” “09.00 – 10.00” “10.00 – 11.00” “11.00 – 12.00” “12.00 – 13.00” “13.00 – 14.00” “14.00 – 15.00” “15.00 – 16.00” “16.00 – 17.00” “17.00 – 18.00” “18.00 – 19.00″]
[/md-select]
[/md-form]
<p class=”ozy-full-input”></p>
<p class=”ozy-full-input”>ANGABEN ZU PERSONEN:</p>
[md-form]
[md-text label=”Vorname” outlined=”yes” desktopwidth=”6″]
[text* your-name]
[/md-text]
[md-text label=”Vorname” outlined=”yes” desktopwidth=”6″]
[text* your-name2]
[/md-text]

[md-text label=”Nachname” outlined=”yes” desktopwidth=”6″]
[text* last-name]
[/md-text]
[md-text label=”Nachname Begleitung” outlined=”yes” desktopwidth=”6″]
[text* last-name2]
[/md-text]

[md-text label=”Geburtstdatum” outlined=”yes” desktopwidth=”6″]
[date* date-549]
[/md-text]
[md-text label=”Geburtsdatum Begleitung” outlined=”yes” desktopwidth=”6″]
[date* date-20]
[/md-text]
[/md-form]
<p class=”ozy-full-input”></p>
<p class=”ozy-full-input”>ANGABEN ZUM WOHNORT:</p>
[md-form]
[md-text label=”Strasse” outlined=”yes” desktopwidth=”6″]
[text* Strasse]
[/md-text]

[md-text label=”Stadt” outlined=”yes” desktopwidth=”6″]
[text* city]
[/md-text]

[md-text label=”Postleitzahl” outlined=”yes” desktopwidth=”6″]
[text* zip]
[/md-text]

[md-text label=”Telefonnummer” outlined=”yes” desktopwidth=”6″]
[tel* tel-970]
[/md-text]

[md-text label=”Email” outlined=”yes” desktopwidth=”6″]
[email* your-email]
[/md-text]

[md-select label=”Land” outlined=”yes” desktopwidth=”6″]
[select* your-country “Land w?hlen” “Schweiz (CH)” “Deutschland (DE)” “?sterreich (AT)” “United Kingdom (UK)” “Sweden (SE)” “Finland (FI)” “Norway (NO)” “Australia (AU)” “New Zealand (NZ)” “Singapore (SG)” “Hong Kong (HK)” “United States (US)” “Canada” “Mexico” “Bahamas” “Bahrain” “Barbados” “Belarus” “Belgium” “Belize” “Benin” “Bermuda” “Bhutan” “Bolivia” “Bonaire” “Bosnia and Herzegovina” “Botswana” “Bouvet Island (Bouvetoya)” “Brazil” “British Indian Ocean Territory (Chagos Archipelago)” “British Virgin Islands” “Brunei Darussalam” “Bulgaria” “Burkina Faso” “Burundi” “Cambodia” “Cameroon” “Cape Verde” “Cayman Islands” “Central African Republic” “Chad” “Chile” “Christmas Island” “Cocos (Keeling) Islands” “Colombia” “Comoros” “Congo” “Congo” “Cook Islands” “Costa Rica” “Cote d’Ivoire” “Croatia” “Cuba” “Cura?ao” “Cyprus” “Cyprus” “Czech Republic” “Denmark” “Djibouti” “Dominica” “Dominican Republic” “Ecuador” “Egypt” “El Salvador” “Equatorial Guinea” “Eritrea” “Estonia” “Ethiopia” “Falkland Islands (Malvinas)” “Faroe Islands” “Fiji” “France” “French Guiana” “French Polynesia” “French Southern Territories” “Gabon” “Gambia” “Georgia” “Georgia” “Gibraltar” “Greece” “Greenland” “Grenada” “Guadeloupe” “Guam” “Guatemala” “Guernsey” “Guinea” “Guinea-Bissau” “Guyana” “Haiti” “Heard Island and McDonald Islands” “Holy See (Vatican City State)” “Honduras” “Hungary” “Iceland” “Indonesia” “Ireland” “Isle of Man” “Israel” “Italy” “Jamaica” “Japan” “Jersey” “Jordan” “Liechtenstein” “Lithuania” “Luxembourg” “Macao” “Macedonia” “Madagascar” “Malawi” “Malaysia” “Maldives” “Mali” “Malta” “Marshall Islands” “Martinique” “Mauritania” “Mauritius” “Mayotte” “Micronesia” “Moldova” “Monaco” “Mongolia” “Montenegro” “Montserrat” “Morocco” “Mozambique” “Myanmar” “Namibia” “Nauru” “Nepal” “Netherlands” “Netherlands Antilles” “New Caledonia” “Oman” “Pakistan” “Palau” “Panama” “Papua New Guinea” “Paraguay” “Peru” “Philippines” “Pitcairn Islands” “Poland” “Portugal” “Puerto Rico” “Qatar” “Reunion” “Romania” “Rwanda” “Saint Barthelemy” “Saint Helena” “Saint Kitts and Nevis” “Saint Lucia” “Saint Martin” “Saint Pierre and Miquelon” “Saint Vincent and the Grenadines” “Samoa” “San Marino” “Sao Tome and Principe” “Senegal” “Serbia” “Seychelles” “Sierra Leone” “Sint Maarten (Netherlands)” “Slovakia (Slovak Republic)” “Slovenia” “Solomon Islands” “Somalia” “South Africa” “South Georgia & S. Sandwich Islands” “Spain” “Sri Lanka” “Sudan” “Suriname” “Svalbard & Jan Mayen Islands” “Swaziland” “Syrian Arab Republic” “Taiwan” “Tajikistan” “Tanzania” “Thailand” “Timor-Leste” “Togo” “Tokelau” “Tonga” “Trinidad and Tobago” “Tunisia” “Turkey” “Turkey” “Turkmenistan” “Turks and Caicos Islands” “Tuvalu” “U.S. Virgin Islands” “U.S. Minor Outlying Islands” “Uganda” “Ukraine” “United Arab Emirates” “Uruguay” “Uzbekistan” “Vanuatu” “Venezuela” “Vietnam” “Wallis and Futuna” “Western Sahara” “Yemen” “Zambia” “Zimbabwe”]
[/md-select]
[/md-form]
<p class=”ozy-full-input”></p>
<p class=”ozy-full-input”>ANGABEN ZU PASS/ID:</p>
[md-form]
[md-text label=”Pass/ID Nummer” outlined=”yes” desktopwidth=”6″]
[text* your-pass]
[/md-text]

[md-text label=”Ausstellungsort” outlined=”yes” desktopwidth=”6″]
[text* your-village]
[/md-text]
[/md-form]

<p class=”ozy-full-input”>Pro Gast bitte eine Kopie oder ein Foto vom Pass oder einer ID hochladen (Format: jpg, png, pdf, doc). Nur amtliche Ausweise gültig:</p>
[md-form]
[md-file label=”Passfoto/ID hochladen”]
[multifile* multifile-763 limit:1000000 filetypes:jpg|jpeg|png|pdf|doc]
[/md-file]
[/md-form]

<p class=”ozy-full-input”></p>
<p class=”ozy-full-input”>ANGABEN ZU EXTRAS:</p>
<p class=”ozy-full-input”>Hier noch ein paar Extras die Sie dazu buchen k?nnen wenn Sie m?chten. Vielleicht haben Sie diese bei der Buchnung verpasst.</p>
[md-form]
[md-select label=”Flugangebot ab Cebu buchen” outlined=”yes”]
[select* menu-108 “Nein. Wir m?chten keinen Flug buchen” “Nein. Wir haben schon einen Flug gebucht” “2 Pax Cebu – Siquijor ? 27’000.-” “2 Pax Siquijor – Cebu ? 27’000.-” “2 Pax Cebu – Siquijor – Cebu ? 53’000.-“]
[/md-select]
[md-select label=”Transfer buchen” outlined=”yes”]
[select* menu-166 “Wir m?chten keinen Transfer buchen” “Wir haben schon einen Transfer gebucht” “Siquijor Pier zum Hotel. Preis/Kleinbus ? 1000.-” “Larena Pier Siquijor zum Hotel. Preis/Kleinbus ? 1800.-” “Flughafen zum Hotel. Preis/Kleinbus ? 800.-” “Dumaguete Flughafen zum Hotel. Preis/Kleinbus ? 2400.-“]
[/md-select]
[md-select label=”Tauchpaket buchen” outlined=”yes”]
[select* menu-78 “Wir m?chten kein Tauchpaket buchen” “Wir haben schon ein Tauchpaket gebucht” “6 Tauchg?nge. Preis/Person ? 11970.-” “12 Tauchg?nge. Preis/Person ? 21400.-” “18 Tauchg?nge. Preis/Person ? 31900.-” “24 Tauchg?nge. Preis/Person ? 39000.-“]
[/md-select]
[md-select label=”Massagen buchen” outlined=”yes”]
[select* menu-74 “Wir m?chten keine Massage buchen” “Wir haben schon Massagen gebucht” “2 x 1 Std. Preis ? 1700.-” “4 x 1 Std. Preis ? 3100.-” “6 x 1 Std. Preis ? 4400.-“]
[/md-select]
[md-textarea label=”Bemerkungen” outlined=”yes”]
[textarea your-message x3]
[/md-textarea]
[/md-form]
<p class=”ozy-full-input”></p>
<p class=”ozy-full-input”>SONSTIGE ANGABEN:</p>
[md-form]
[md-select label=”Zahlungsmethode vor Ort” outlined=”yes”]
[select* menu-693 “Barzahlung ? -4%” “PayPal +5%” “Kreditkarte +5%” “Vor Ort Banküberweisung EUR” “Vor Ort Banküberweisung CHF” “Vor Ort Banküberweisung USD” “Vor Ort Banküberweisung PHP”]
[/md-select]

[md-select label=”Newsletter bestellen” outlined=”yes”]
[select* menu-29 “Ja” “Nein”]
[/md-select]

[md-select label=”Sind Sie Taucher?” outlined=”yes”]
[select* menu-266 “Ja” “Nein” “Würde es gerne probieren” “M?chte gerne einen Tauchkurs machen”]
[/md-select]

[md-select label=”Sind Sie Schnorchler?” outlined=”yes”]
[select* menu-26 “Nein” “An Schnorcheln-Ausflügen interessiert” “Schnorcheln am Hausriff” “Schnorcheln mit Guide” “Schorchelkurs”]
[/md-select]
[/md-form]
<p class=”ozy-full-input”></p>
<p class=”ozy-full-input”>HOTEL INFORMATIONEN:</p>
[md-form]
[md-accept label=”Bitte lesen und akzeptieren”]
[checkbox* checkbox-618 “Das Mitbringen von Essen und Getr?nken ist aus hygienischen Gründen untersagt. Wir legen Wert auf Privatsph?re und Sicherheit, darum erlauben wir keine Besucher. Bitte Tiere NICHT füttern!
Das Kawayan Holiday Resort lehnt jegliche Haftung ab. Es gelten unsere AGB‘s. Wi-Fi: Unser Netzwerk verfügt über eine begrenzte Kapazit?t (Fair Use). Die Verfügbarkeit wird nicht garantiert. Wi-Fi – ist kostenlos für unsere registrierten G?ste. DROHNEN fliegen nur erlaubt mit der Erlaubnis des Managements”]
[/md-accept]
[/md-form]

<p class=”ozy-full-input”></p>
<p class=”ozy-full-input”>DIGITALE UNTERSCHRIFT:
<p class=”ozy-full-input”>Bitte unten auf dem Pad mit Mauszeiger oder Stift unterschreiben. Sie best?tigen hiermit die Richtigkeit Ihrer Angaben:</p>
<p class=”ozy-full-input”>[signature* signature-434 background:#ffffff cols:761 “Unterschrift”]</p>
<p>[checkbox* gdpr “Ich erlaube die Verarbeitung meiner personenbezogenen Daten gem?ss DSGVO. (Pflichtfeld*)”]</p>
<p>[submit “CheckIn-Folmular abschicken”]</p>

I would have liked to have the text boxes higher and the text bigger
Higher means instead of 1cm 2cm for example
But actually nothing I can set up

Hi @smiklau

Your theme is overriding the padding on date fields, which is making the icons overlap. You can fix the icons by adding this CSS under Appearance > Customize > Material Design Forms > Custom CSS:

#cf7md-form .mdc-text-field__input[type="date"] {
    padding: 12px 16px 14px 48px !important;
}

Making the text boxes taller is not supported – the sizes follow Google’s Material Design guidelines and changing them requires a lot of brittle custom CSS. Sorry about that.

Thanks,
Angus

Okay thx for that. Date is working. But all the other fields not. What do I have to enter for all the fields?
By the way, how can I add another icon which I cannot find in your choice?

Hi @smiklau

For me only the dates were ever overlapping. Which browser are you using?

Anyway try changing the CSS I gave you to the following:

#cf7md-form .mdc-text-field--with-leading-icon .mdc-text-field__input,
#cf7md-form .mdc-select--with-leading-icon .mdc-select__native-control {
    padding: 12px 16px 14px 48px !important;
}

Thanks,
Angus

@smiklau unfortunately you are limited to Material Design icons as they can be positioned reliably while other icon sets can’t.

Thanks,
Angus

O I see ?? Thx. May you can at least help me with the font change for the field. They are to bold. Can you kindly give me a css cod to fix that design?

A sorry. Firefox I’m using

Hi @smiklau

You can choose the font for your forms in the customizer (Appearance > Customize > Material Design Forms).

Thanks,
Angus

But i only have one font and no choice to change weight or steyl of the font.
thats why I wrote you. This plugin costs a lot but can do almost nothing. No offense but thats the true

Hi @smiklau

It looks like your website is using the Roboto font, which is also the default Material Design font. That’s why you’re seeing only one font option (usually it shows all the fonts used in your theme).

If you want the font to be lighter, you could try adding this CSS rule:

* {
  -moz-osx-font-smoothing: grayscale;
}

Let me know if that doesn’t do what you were hoping.

This plugin costs a lot but can do almost nothing. No offense but thats the true

The plugin adds Material Design to your forms for free. The premium version lets you integrate it into your theme better with custom colours, fonts and layouts, but it still sticks to Material Design guidelines. It is not meant to be a “design your own contact form” plugin and is not advertised as such. If you have any ideas for further customization, please let me know as I’m always keen to improve the plugin ??

Thanks,
Angus