Your software
My Mautic version is: 4.4.10
My PHP version is: 8.0.29
I created a simple form that contains only two elements - an email field and a marketing consent checkbox. However, I wanted its display to be nicely styled with CSS. So, I created a FI - Modal, into which I pasted the following HTML code in the “Content” section:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lato:wght@100&family=Manrope:wght@400;600;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300&display=swap"
rel="stylesheet"
/>
<div class="modal_background_overlay">
<div class="modal_container">
<div class="background_left_side">
<svg
class="logo"
width="232"
height="64"
viewBox="0 0 232 64"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M30.4856 18.0357C27.5309 14.6157 22.9616 12.7464 18.1522 13.421C9.51356 14.6344 5.28689 23.1317 7.06822 31.1077C8.06156 35.4957 10.6056 39.4624 13.8216 42.6304C16.2842 45.0784 19.1109 47.109 22.0936 48.897C22.3242 49.0344 22.6136 49.025 22.8349 48.8704C23.0536 48.7184 23.1642 48.449 23.1149 48.185L22.9576 47.3397C22.9364 47.2309 22.916 47.1255 22.8962 47.0234C22.3798 44.3593 22.3033 43.965 21.2709 43.2677C21.2173 43.2313 21.1618 43.1937 21.1047 43.1549C20.6451 42.8428 20.0799 42.4591 19.5189 42.089C19.1042 41.8157 18.2349 41.241 18.0722 40.961C17.8192 40.5269 17.6566 39.9117 17.5765 39.6087L17.5762 39.6077C16.5469 35.7744 14.4642 27.3024 13.9402 25.161C13.8709 24.8797 14.0309 24.593 14.3069 24.5037C14.5989 24.4077 14.9136 24.5677 15.0096 24.8597L18.6882 36.073C18.7829 36.3664 19.0936 36.5304 19.3909 36.4464C19.6962 36.3597 19.8736 36.0424 19.7869 35.737L16.5616 24.381C16.4722 24.0677 16.6536 23.7437 16.9682 23.6544C17.2642 23.5704 17.5722 23.7277 17.6776 24.0157L21.7442 35.0997C21.8482 35.3824 22.1522 35.5357 22.4416 35.453C22.5936 35.4104 22.7202 35.3077 22.7936 35.169C22.8669 35.0317 22.8816 34.869 22.8336 34.7197L19.2016 23.549C19.1522 23.3957 19.1669 23.2304 19.2416 23.089C19.3176 22.9477 19.4469 22.8437 19.6016 22.7997C19.8882 22.7184 20.1882 22.8637 20.3016 23.1397C21.1442 25.193 24.4576 33.281 25.9309 37.109C26.1762 37.745 26.2909 38.3117 26.1576 38.813C26.0682 39.149 25.8389 39.8557 25.5309 40.6237C25.1482 41.5797 25.0376 41.8957 24.8909 42.457C24.7269 43.0797 24.8202 43.665 25.1536 44.4624L26.4109 47.6024C27.4482 50.1957 29.3029 52.3784 31.6936 53.8237L31.8576 53.9237C32.0749 54.0544 32.3456 54.0544 32.5629 53.925C32.7789 53.7944 32.9069 53.557 32.8936 53.3037C32.7309 50.017 32.2909 41.4544 32.0909 39.881C31.9762 38.9744 31.6242 38.137 29.9442 36.801C29.9246 36.7856 29.9047 36.7698 29.8845 36.7538C29.4512 36.4118 28.875 35.9568 28.5056 35.5237C27.2162 34.0104 26.9149 31.9837 26.8056 31.201C26.6429 30.0504 26.6269 29.3917 26.7336 28.4224C26.9176 26.7784 27.5242 25.169 28.4909 23.7557C29.0202 22.9904 29.7016 22.4597 30.4829 22.1957C30.8669 22.0704 31.5589 22.009 32.0376 22.0624C32.8056 22.1437 33.5896 22.5397 34.3682 23.253C36.1336 24.853 37.2282 26.8144 37.6616 29.165C37.9589 30.7717 38.0149 32.8317 37.2309 34.365C37.0312 34.7555 36.7412 35.1815 36.4304 35.638C36.324 35.7942 36.2153 35.9539 36.1069 36.117C35.2589 37.397 34.8642 38.3837 34.9869 39.377C35.0642 40.0144 37.3736 49.9984 38.1336 53.2704C38.1816 53.4837 38.3402 53.6544 38.5496 53.7197C38.7589 53.7837 38.9856 53.7317 39.1456 53.5824C40.7816 52.0664 41.9776 50.1384 42.6122 48.001C43.2856 45.7304 43.7469 43.461 43.8349 41.1917C43.8442 40.9424 43.7562 40.6984 43.5909 40.509L42.2416 38.9624C41.9216 38.597 41.7536 38.1237 41.7709 37.6397C41.8229 36.217 41.9296 33.1237 41.9696 31.357C42.1962 21.409 46.1869 20.1264 47.3642 20.1304L47.4309 20.129C47.5389 20.1277 47.6429 20.1704 47.7176 20.2477C47.7922 20.3237 47.8336 20.429 47.8296 20.5357L47.2389 37.0957L46.9722 44.4117C46.9616 44.697 47.1296 44.9584 47.3962 45.0677C47.6589 45.1757 47.9629 45.109 48.1562 44.8984C50.3629 42.481 52.3616 39.8877 53.9882 36.989C56.1656 33.0624 57.5616 28.5837 57.3029 24.093C56.8149 15.9304 50.4909 8.91971 41.8109 10.1384C37.0136 10.8144 33.1016 13.8717 31.2536 17.925C31.1909 18.0704 31.0576 18.1717 30.9002 18.1957C30.7442 18.217 30.5869 18.157 30.4856 18.0357ZM81.2363 39.1787C79.9083 40.1707 78.2523 40.6667 76.2683 40.6667C74.5483 40.6667 73.0683 40.2907 71.8283 39.5387C70.5963 38.7787 69.6483 37.7227 68.9843 36.3707C68.3283 35.0187 68.0003 33.4507 68.0003 31.6667C68.0003 29.8747 68.3283 28.3067 68.9843 26.9627C69.6483 25.6107 70.5963 24.5587 71.8283 23.8067C73.0683 23.0467 74.5483 22.6667 76.2683 22.6667C78.2523 22.6667 79.9083 23.1627 81.2363 24.1547C82.5723 25.1467 83.5083 26.4907 84.0443 28.1867L81.1283 28.9907C80.7923 27.8707 80.2203 26.9907 79.4123 26.3507C78.6043 25.7107 77.5563 25.3907 76.2683 25.3907C74.5323 25.3907 73.2283 25.9667 72.3563 27.1187C71.4843 28.2627 71.0443 29.7787 71.0363 31.6667C71.0363 33.5547 71.4723 35.0747 72.3443 36.2267C73.2243 37.3707 74.5323 37.9427 76.2683 37.9427C77.5563 37.9427 78.6043 37.6227 79.4123 36.9827C80.2203 36.3427 80.7923 35.4627 81.1283 34.3427L84.0443 35.1467C83.5083 36.8347 82.5723 38.1787 81.2363 39.1787ZM92.9311 40.1627C92.2111 40.4987 91.3351 40.6667 90.3031 40.6667C89.3671 40.6667 88.5751 40.4907 87.9271 40.1387C87.2791 39.7787 86.7871 39.3027 86.4511 38.7107C86.1231 38.1187 85.9591 37.4667 85.9591 36.7547C85.9591 35.8107 86.1951 35.0187 86.6671 34.3787C87.1391 33.7307 87.8871 33.2307 88.9111 32.8787C89.5911 32.6547 90.4151 32.4667 91.3831 32.3147C92.3591 32.1547 93.4151 31.9907 94.5511 31.8227C94.4951 31.0787 94.2591 30.5307 93.8431 30.1787C93.4271 29.8187 92.7791 29.6387 91.8991 29.6387C91.3151 29.6387 90.7511 29.7747 90.2071 30.0467C89.6631 30.3187 89.2831 30.7867 89.0671 31.4507L86.4271 30.6227C86.7471 29.5267 87.3591 28.6467 88.2631 27.9827C89.1671 27.3187 90.3791 26.9867 91.8991 26.9867C93.0511 26.9867 94.0631 27.1747 94.9351 27.5507C95.8151 27.9267 96.4671 28.5427 96.8911 29.3987C97.1231 29.8547 97.2631 30.3227 97.3111 30.8027C97.3591 31.2747 97.3831 31.7907 97.3831 32.3507V40.3067H94.8511V38.5667C94.2991 39.2867 93.6591 39.8187 92.9311 40.1627ZM89.3191 37.8947C89.6791 38.2067 90.1991 38.3627 90.8791 38.3627C91.5351 38.3627 92.0951 38.2467 92.5591 38.0147C93.0231 37.7827 93.3911 37.4987 93.6631 37.1627C93.9431 36.8267 94.1311 36.5107 94.2271 36.2147C94.3471 35.9187 94.4231 35.5867 94.4551 35.2187C94.4871 34.8427 94.5071 34.5027 94.5151 34.1987C93.4831 34.3587 92.6471 34.4987 92.0071 34.6187C91.3671 34.7307 90.8191 34.8627 90.3631 35.0147C89.8671 35.1987 89.4791 35.4227 89.1991 35.6867C88.9271 35.9507 88.7911 36.2947 88.7911 36.7187C88.7911 37.1907 88.9671 37.5827 89.3191 37.8947ZM108.103 40.3067V37.8827C107.295 38.0027 106.575 38.0347 105.943 37.9787C105.311 37.9227 104.851 37.6547 104.563 37.1747C104.411 36.9267 104.327 36.6067 104.311 36.2147C104.303 35.8147 104.299 35.3587 104.299 34.8467V29.6147H108.103V27.3467H104.299V23.7467H101.419V27.3467H99.0672V29.6147H101.419V35.0147C101.419 35.7587 101.427 36.4227 101.443 37.0067C101.459 37.5827 101.615 38.1507 101.911 38.7107C102.247 39.3267 102.739 39.7787 103.387 40.0667C104.035 40.3467 104.767 40.4947 105.583 40.5107C106.407 40.5347 107.247 40.4667 108.103 40.3067ZM119.546 39.7067C118.514 40.3467 117.374 40.6667 116.126 40.6667C114.814 40.6667 113.662 40.3827 112.67 39.8147C111.678 39.2467 110.902 38.4587 110.342 37.4507C109.79 36.4427 109.514 35.2827 109.514 33.9707C109.514 32.5547 109.786 31.3227 110.33 30.2747C110.874 29.2267 111.63 28.4187 112.598 27.8507C113.566 27.2747 114.686 26.9867 115.958 26.9867C117.302 26.9867 118.442 27.2987 119.378 27.9227C120.322 28.5467 121.022 29.4307 121.478 30.5747C121.934 31.7187 122.106 33.0707 121.994 34.6307H112.61C112.722 35.7027 113.062 36.5267 113.63 37.1027C114.198 37.6707 114.974 37.9547 115.958 37.9547C117.406 37.9547 118.418 37.3387 118.994 36.1067L121.85 36.9707C121.354 38.1467 120.586 39.0587 119.546 39.7067ZM118.142 30.2267C117.662 29.7547 116.974 29.5187 116.078 29.5187C114.158 29.5187 113.026 30.4947 112.682 32.4467H119.066C118.938 31.4307 118.63 30.6907 118.142 30.2267ZM124.671 40.3067H127.575V33.7187C127.575 32.9667 127.711 32.2987 127.983 31.7147C128.263 31.1307 128.699 30.6787 129.291 30.3587C129.691 30.1267 130.139 29.9907 130.635 29.9507C131.131 29.9027 131.575 29.9347 131.967 30.0467V27.3467C131.383 27.2587 130.783 27.2707 130.167 27.3827C129.551 27.4867 129.003 27.7027 128.523 28.0307C128.251 28.1987 128.007 28.4027 127.791 28.6427C127.575 28.8747 127.387 29.1347 127.227 29.4227V27.3467H124.671V40.3067ZM143.143 39.8027C142.175 40.3787 141.043 40.6667 139.747 40.6667C138.451 40.6667 137.319 40.3747 136.351 39.7907C135.383 39.2067 134.631 38.4027 134.095 37.3787C133.567 36.3467 133.303 35.1627 133.303 33.8267C133.303 32.4667 133.575 31.2747 134.119 30.2507C134.663 29.2267 135.419 28.4267 136.387 27.8507C137.355 27.2747 138.475 26.9867 139.747 26.9867C141.051 26.9867 142.187 27.2787 143.155 27.8627C144.123 28.4467 144.875 29.2547 145.411 30.2867C145.947 31.3107 146.215 32.4907 146.215 33.8267C146.215 35.1707 145.943 36.3587 145.399 37.3907C144.863 38.4147 144.111 39.2187 143.143 39.8027ZM137.215 36.8387C137.791 37.5827 138.635 37.9547 139.747 37.9547C140.891 37.9547 141.743 37.5707 142.303 36.8027C142.871 36.0347 143.155 35.0427 143.155 33.8267C143.155 32.5707 142.871 31.5707 142.303 30.8267C141.735 30.0747 140.883 29.6987 139.747 29.6987C138.587 29.6987 137.731 30.0827 137.179 30.8507C136.635 31.6107 136.363 32.6027 136.363 33.8267C136.363 35.0827 136.647 36.0867 137.215 36.8387ZM148.835 40.3067H151.751V32.3267C151.751 31.5187 151.971 30.8627 152.411 30.3587C152.859 29.8547 153.451 29.6027 154.187 29.6027C154.947 29.6027 155.547 29.8547 155.987 30.3587C156.427 30.8627 156.647 31.5667 156.647 32.4707V40.3067H159.527V32.3267C159.527 31.4707 159.759 30.8027 160.223 30.3227C160.695 29.8427 161.279 29.6027 161.975 29.6027C162.719 29.6027 163.311 29.8547 163.751 30.3587C164.199 30.8547 164.423 31.5467 164.423 32.4347V40.3067H167.315V31.7027C167.315 30.2947 166.931 29.1627 166.163 28.3067C165.403 27.4507 164.307 27.0227 162.875 27.0227C162.035 27.0227 161.267 27.2067 160.571 27.5747C159.875 27.9427 159.327 28.4467 158.927 29.0867C158.583 28.4547 158.095 27.9547 157.463 27.5867C156.831 27.2107 156.059 27.0227 155.147 27.0227C154.371 27.0227 153.655 27.1787 152.999 27.4907C152.351 27.7947 151.815 28.2147 151.391 28.7507V27.3467H148.835V40.3067ZM176.697 40.1627C175.977 40.4987 175.101 40.6667 174.069 40.6667C173.133 40.6667 172.341 40.4907 171.693 40.1387C171.045 39.7787 170.553 39.3027 170.217 38.7107C169.889 38.1187 169.725 37.4667 169.725 36.7547C169.725 35.8107 169.961 35.0187 170.433 34.3787C170.905 33.7307 171.653 33.2307 172.677 32.8787C173.357 32.6547 174.181 32.4667 175.149 32.3147C176.125 32.1547 177.181 31.9907 178.317 31.8227C178.261 31.0787 178.025 30.5307 177.609 30.1787C177.193 29.8187 176.545 29.6387 175.665 29.6387C175.081 29.6387 174.517 29.7747 173.973 30.0467C173.429 30.3187 173.049 30.7867 172.833 31.4507L170.193 30.6227C170.513 29.5267 171.125 28.6467 172.029 27.9827C172.933 27.3187 174.145 26.9867 175.665 26.9867C176.817 26.9867 177.829 27.1747 178.701 27.5507C179.581 27.9267 180.233 28.5427 180.657 29.3987C180.889 29.8547 181.029 30.3227 181.077 30.8027C181.125 31.2747 181.149 31.7907 181.149 32.3507V40.3067H178.617V38.5667C178.065 39.2867 177.425 39.8187 176.697 40.1627ZM173.085 37.8947C173.445 38.2067 173.965 38.3627 174.645 38.3627C175.301 38.3627 175.861 38.2467 176.325 38.0147C176.789 37.7827 177.157 37.4987 177.429 37.1627C177.709 36.8267 177.897 36.5107 177.993 36.2147C178.113 35.9187 178.189 35.5867 178.221 35.2187C178.253 34.8427 178.273 34.5027 178.281 34.1987C177.249 34.3587 176.413 34.4987 175.773 34.6187C175.133 34.7307 174.585 34.8627 174.129 35.0147C173.633 35.1987 173.245 35.4227 172.965 35.6867C172.693 35.9507 172.557 36.2947 172.557 36.7187C172.557 37.1907 172.733 37.5827 173.085 37.8947ZM184.273 40.3067H187.177V33.7187C187.177 32.9667 187.313 32.2987 187.585 31.7147C187.865 31.1307 188.301 30.6787 188.893 30.3587C189.293 30.1267 189.741 29.9907 190.237 29.9507C190.733 29.9027 191.177 29.9347 191.569 30.0467V27.3467C190.985 27.2587 190.385 27.2707 189.769 27.3827C189.153 27.4867 188.605 27.7027 188.125 28.0307C187.853 28.1987 187.609 28.4027 187.393 28.6427C187.177 28.8747 186.989 29.1347 186.829 29.4227V27.3467H184.273V40.3067ZM196.787 40.3067H193.835L193.859 23.0267H196.787V33.5867L201.527 27.3467H205.139L200.111 33.8267L205.571 40.3067H201.743L196.787 34.0667V40.3067ZM212.43 40.6667C213.678 40.6667 214.818 40.3467 215.85 39.7067C216.89 39.0587 217.658 38.1467 218.154 36.9707L215.298 36.1067C214.722 37.3387 213.71 37.9547 212.262 37.9547C211.278 37.9547 210.502 37.6707 209.934 37.1027C209.366 36.5267 209.026 35.7027 208.914 34.6307H218.298C218.41 33.0707 218.238 31.7187 217.782 30.5747C217.326 29.4307 216.626 28.5467 215.682 27.9227C214.746 27.2987 213.606 26.9867 212.262 26.9867C210.99 26.9867 209.87 27.2747 208.902 27.8507C207.934 28.4187 207.178 29.2267 206.634 30.2747C206.09 31.3227 205.818 32.5547 205.818 33.9707C205.818 35.2827 206.094 36.4427 206.646 37.4507C207.206 38.4587 207.982 39.2467 208.974 39.8147C209.966 40.3827 211.118 40.6667 212.43 40.6667ZM212.382 29.5187C213.278 29.5187 213.966 29.7547 214.446 30.2267C214.934 30.6907 215.242 31.4307 215.37 32.4467H208.986C209.33 30.4947 210.462 29.5187 212.382 29.5187ZM228.572 37.8827V40.3067C227.716 40.4667 226.876 40.5347 226.052 40.5107C225.236 40.4947 224.504 40.3467 223.856 40.0667C223.208 39.7787 222.716 39.3267 222.38 38.7107C222.084 38.1507 221.928 37.5827 221.912 37.0067C221.896 36.4227 221.888 35.7587 221.888 35.0147V29.6147H219.536V27.3467H221.888V23.7467H224.768V27.3467H228.572V29.6147H224.768V34.8467C224.768 35.3587 224.772 35.8147 224.78 36.2147C224.796 36.6067 224.88 36.9267 225.032 37.1747C225.32 37.6547 225.78 37.9227 226.412 37.9787C227.044 38.0347 227.764 38.0027 228.572 37.8827Z"
fill="#0DB84D"
></path>
</svg>
<h2 class="modal_title" class="mb-3">
Odbierz dodatkową <span class="--bolded">zniżkę</span> w wysokości
<span class="--bolded">5%</span>
</h2>
<h3 class="modal_subtitle" class="mb-5">
na bezpieczne zakupy w <span class="--pink">Cateromarket.pl</span>
</h3>
<div class="badge_container">
<span class="--bigger">-5%</span>
na zakupy w cateromarket.pl
</div>
<div
class="mauticform-message"
id="mauticform_formularzzapisudonewslettera5znizki_message"
></div>
<div
id="mauticform_wrapper_formularzzapisudonewslettera5znizki"
class="mauticform_wrapper"
>
<form
autocomplete="false"
role="form"
method="post"
action="https://ma.cateromarket.pl/form/submit?formId=7"
id="mauticform_formularzzapisudonewslettera5znizki"
data-mautic-form="formularzzapisudonewslettera5znizki"
enctype="multipart/form-data"
>
<div
class="mauticform-error"
id="mauticform_formularzzapisudonewslettera5znizki_error"
></div>
<div class="mauticform-innerform">
<div
class="mauticform-page-wrapper mauticform-page-1"
data-mautic-form-page="1"
>
<div class="d-flex email_container">
<div
id="mauticform_formularzzapisudonewslettera5znizki_email"
data-validate="email"
data-validation-type="email"
class="mauticform-row mauticform-email mauticform-field-1 mauticform-required"
>
<input
id="mauticform_input_formularzzapisudonewslettera5znizki_email"
name="mauticform[email]"
value=""
class="mauticform-input"
type="email"
placeholder="Email"
/>
</div>
<div
id="mauticform_formularzzapisudonewslettera5znizki_submit"
class="mauticform-row mauticform-button-wrapper mauticform-field-3"
>
<button
type="submit"
name="mauticform[submit]"
id="mauticform_input_formularzzapisudonewslettera5znizki_submit"
value=""
class="mauticform-button btn btn-default"
>
Wyślij
</button>
</div>
</div>
<span class="mauticform-errormsg" style="display: none"
>Prosimy o podanie adresu e-mail.</span
>
<div
id="mauticform_formularzzapisudonewslettera5znizki_zgoda_marketingowa"
data-validate="zgoda_marketingowa"
data-validation-type="checkboxgrp"
class="mauticform-row mauticform-checkboxgrp mauticform-field-2 mauticform-required"
>
<div class="mauticform-checkboxgrp-row">
<input
class="mauticform-checkboxgrp-checkbox"
name="mauticform[zgoda_marketingowa][]"
id="mauticform_checkboxgrp_checkbox_zgoda_marketingowa_Yes0"
type="checkbox"
value="Yes"
/>
<label
id="mauticform_checkboxgrp_label_zgoda_marketingowa_Yes0"
for="mauticform_checkboxgrp_checkbox_zgoda_marketingowa_Yes0"
class="mauticform-checkboxgrp-label"
>Wyrażam zgodę na przetwarzanie moich danych osobowych
przez CATEROMARKET sp. z o.o. w celach marketingowych
zgodnie z Polityką prywatności</label
>
</div>
<span class="mauticform-errormsg" style="display: none"
>Ta informacja jest nam potrzebna do przetworzenie Twoich
danych.</span
>
</div>
</div>
</div>
<input
type="hidden"
name="mauticform[formId]"
id="mauticform_formularzzapisudonewslettera5znizki_id"
value="7"
/>
<input
type="hidden"
name="mauticform[return]"
id="mauticform_formularzzapisudonewslettera5znizki_return"
value=""
/>
<input
type="hidden"
name="mauticform[formName]"
id="mauticform_formularzzapisudonewslettera5znizki_name"
value="formularzzapisudonewslettera5znizki"
/>
</form>
</div>
<div class="close_button">
<img
src="https://static.zespolmarketingu.pl/images/close_button.svg"
alt="Ikona strzałki"
/>
</div>
</div>
</div>
</div>
<style>
.d-flex {
display: flex;
}
span.mauticform-errormsg {
font-size: 12px;
color: red;
line-height: 1;
}
.mauticform-message {
text-align: center;
font-size: 22px;
}
.mauticform-post-success {
display: none;
}
.email_container {
margin-bottom: 20px;
gap: 16px;
flex-wrap: wrap;
}
.email_container > div {
width: 100%;
}
.mauticform-checkboxgrp-row .mauticform-checkboxgrp-label {
font-size: 12px;
color: #202723;
font-weight: 400;
line-height: 1.5;
}
.logo {
max-width: 190px;
margin-bottom: 20px;
}
._form-thank-you {
font-size: 22px;
margin: 15px 0;
color: #1e4b3e;
font-weight: 700;
text-align: center;
}
.mauticform-button.btn.btn-default {
padding: 10px 35px;
font-size: 16px;
color: #fff;
background: #0db84d;
border: none;
border-radius: 4px;
width: 100%;
height: 100%;
margin: 0;
}
.modal_background_overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 20;
display: none;
}
._form-thank-you {
font-size: 22px;
margin: 15px 0;
color: #1e4b3e;
font-weight: 700;
text-align: center;
}
.modal_container {
position: absolute;
width: 90%;
max-width: 90%;
z-index: 2000;
background: url(https://static.zespolmarketingu.pl/images/cateromarket/gourmet-salad-with-zucchini-and-grilled-chicken.webp);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-size: cover;
background-repeat: no-repeat;
font-family: "Manrope", Arial, sans-serif;
border-radius: 5%;
height: 90vh;
}
.modal_title {
color: #000;
font-size: 18px;
text-align: center;
font-weight: 400;
margin: 0;
margin-bottom: 20px;
}
.modal_subtitle {
color: #000;
font-weight: 400;
margin: 0;
margin-bottom: 40px;
font-size: 16px;
text-align: center;
}
span.--bolded {
font-weight: 700 !important;
}
.background_left_side {
background: #fff;
width: 90%;
max-width: 90%;
padding: 60px 40px;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
span.--pink {
color: #e80b79;
}
.badge_container {
background: #e80b79;
color: white;
padding: 40px 10px;
height: 115px;
width: 115px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
justify-items: center;
text-align: center;
flex-direction: column;
padding: 0 10px;
box-sizing: border-box;
position: absolute;
top: -50px;
left: -36px;
font-size: 12px;
}
.badge_container span.--bigger {
font-size: 24px;
}
.logo_container {
max-width: 100px;
margin-bottom: 15px;
}
.modal_title .--bigger {
font-size: 1.3em;
}
.modal_list {
color: #1e4b3e;
font-size: 14px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
padding-left: 15px;
}
.input_container input {
font-size: 14px;
padding: 15px 30px;
border-radius: 3.688em;
border: 3px solid #1e4b3e;
background: transparent;
color: #1e4b3e;
text-transform: lowercase;
width: 100%;
}
.mauticform-email input {
box-sizing: border-box;
width: 100%;
max-height: 40px;
height: 40px;
margin: 0;
margin-right: 5px;
padding: 10px 16px;
font-size: 16px;
outline: 1px solid #c8ced3;
border: none;
border-radius: 4px;
}
.mauticform-email input:focus-visible {
outline: 1px solid #8e9398;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
.close_button {
color: black;
z-index: 2001;
position: absolute;
font-size: 16px;
right: 20px;
top: 20px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
}
.close_button:hover {
opacity: 0.98;
cursor: pointer;
}
.mauticform-checkboxgrp-row {
position: relative;
display: flex;
align-items: flex-start;
}
.mauticform-checkboxgrp-row input[type="checkbox"] {
display: none;
}
.mauticform-checkboxgrp-row label {
margin-left: 30px;
text-align: left;
}
.mauticform-checkboxgrp-row label:before {
content: "";
background: transparent;
border: 2px solid #c8ced3;
text-align: center;
width: 20px;
height: 20px;
font-size: 1.4rem;
transition: border 0.15s, background-color 0.15s;
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 5px;
margin-top: 5px;
}
.mauticform-checkboxgrp-row
input[type="checkbox"]:checked
+ label:before {
background: #0db84d;
border: 2px solid #0db84d;
}
.mauticform-checkboxgrp-row input[type="checkbox"]:checked + label:after {
content: "";
left: 7px;
top: 13px;
width: 100%;
height: 100%;
display: block;
position: absolute;
background: url(https://static.zespolmarketingu.pl/images/cateromarket/arrow_catero.svg);
background-repeat: no-repeat;
}
.link_modal {
color: #1e4b3e;
font-size: 12px;
text-decoration-thickness: 0.15rem;
text-underline-offset: 6px;
}
.link_modal:hover {
text-decoration: none;
}
@media (min-width: 757px) {
.logo_container {
max-width: 150px;
margin-bottom: 15px;
}
.modal_list {
font-size: 18px;
}
._form-thank-you {
font-size: 36px;
margin: 30px 0;
}
}
@media (min-width: 1024px) {
.input_container input {
font-size: 22px;
}
.email_container {
gap: 5px;
}
.input_container button._submit {
font-size: 26px;
}
.mauticform-email {
flex: 1;
}
.mauticform-email input {
flex: 1;
}
.email_container > div {
width: unset;
}
.background_left_side {
margin: unset;
margin-left: auto;
width: calc(100% - 37.5%);
max-width: calc(100% - 37.5%);
border-radius: 0 5% 5% 0;
padding: 40px 80px;
top: unset;
left: unset;
transform: unset;
height: 100%;
}
.badge_container {
height: 150px;
width: 150px;
top: 50%;
left: calc(0px - (150px / 2));
transform: translateY(-50%);
font-size: 16px;
}
.badge_container span.--bigger {
font-size: 34px;
}
.modal_container {
width: 820px;
max-width: 820px;
height: 450px;
}
.modal_title {
font-size: 24px;
line-height: 1.5;
margin-bottom: 10px;
}
.logo_container {
margin-bottom: unset;
}
.close_button {
right: 30px;
top: 30px;
}
}
</style>
<script type="text/javascript">
/** This section is only needed once per page if manually copying **/
if (typeof MauticSDKLoaded == "undefined") {
var MauticSDKLoaded = true;
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.type = "text/javascript";
script.src =
"https://ma.cateromarket.pl/media/js/mautic-form.js?v77ad4a86";
script.onload = function () {
MauticSDK.onLoad();
};
head.appendChild(script);
var MauticDomain = "https://ma.cateromarket.pl";
var MauticLang = {
submittingMessage: "Please wait...",
};
} else if (typeof MauticSDK != "undefined") {
MauticSDK.onLoad();
}
</script>
<script>
"use strict";
var modalContainer = document.querySelector(".modal_container");
var modalBackgroundOverlay = document.querySelector(
".modal_background_overlay"
);
var closeButton = document.querySelector(".close_button");
function openModal() {
modalContainer.style.display = "block";
modalBackgroundOverlay.style.display = "block";
}
function closeModal() {
modalContainer.style.display = "none";
modalBackgroundOverlay.style.display = "none";
}
// Event listeners
openModal();
closeButton.addEventListener("click", closeModal);
</script>```
In the “Custom CSS” section, I added:
iframe {
width: 100vw;
height: 100vh;
}
The problem is that my modal in debug mode looks like this:
https://drive.google.com/file/d/18jk3SkEWPhLxsaqUhceVE_pigcfP6Cr0/view?usp=drive_link
After closing it, it looks like this:
https://drive.google.com/file/d/11UX_W3P10ODflt4U02FqmSNRFYNsaxti/view?usp=drive_link
And after adding it to the page, it looks like this:
https://drive.google.com/file/d/1o9gdpa8CL5IGOLjePrEWooUAxfbzuoZk/view?usp=drive_link
Has anyone tried to create more advanced modals with forms? I looked for information but couldn’t find any.