Support » Plugin: Material Design for Contact Form 7 » Icons cover text!

  • Resolved smiklau

    (@smiklau)


    Good day

    First off all I have to say im am I am very disappointed about what this plugin brings for the price – nothing cool. And then it doesn’t even work.
    I bought the Premium version because of the icons. But they are pointless now because the icons cover the text and the text is therefore not readable!

    Next I want to have higher fields, I tried allse with CSS – nothing works.
    Would I know what I know now I would not buy it anymore. But now I have it, maybe you can help

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    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

    Thread Starter smiklau

    (@smiklau)

    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>

    Thread Starter smiklau

    (@smiklau)

    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

    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    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

    Thread Starter smiklau

    (@smiklau)

    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?

    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    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

    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

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

    Thanks,
    Angus

    Thread Starter smiklau

    (@smiklau)

    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?

    Thread Starter smiklau

    (@smiklau)

    A sorry. Firefox I’m using

    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    Hi @smiklau

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

    Thanks,
    Angus

    Thread Starter smiklau

    (@smiklau)

    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

    Plugin Author GusRuss89

    (@gusruss89)

    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

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Icons cover text!’ is closed to new replies.