<svg style="display:none;">
<symbol id="input1" viewBox="0 0 347.11 49.7" preserveAspectRatio="none">
<path fill="none" stroke="#000" stroke-miterlimit="10" d="M344.61 3c-1.26-2-5.67-1.03-7.68-1.01-6.3.05-12.6.19-18.89-.21-6.36-.4-12.56-.8-18.95-.8-4.83 0-9.31.56-14.1.93-7.83.62-16.14-1.16-23.87.31-3.27.62-6.16.82-9.51.78-4.27-.05-8.2.56-12.42.91-6.91.59-14.09.09-21.04.09-4.35 0-8.69.01-13.04-.02-4.86-.03-9.5.89-14.33 1.07-16.09.62-32.38-.05-48.5-.05-13.41 0-26.82-.02-40.23 0-6.45.01-13.08-1.55-19.45-.92-8.06.8-15.95 1.17-24.11.98-6.36-.15-12.61-1.12-19-1.09-4.76.01-9.52.03-14.28.03-1.74 0-3.64-.24-5.37-.05-1.84.2-3.4.98-5.25 1.07C12.3 5.15 9.95 5 7.66 5 5.56 5 .88 3.97.53 6.46c-.21 1.49.98 3.36 1.08 4.97.16 2.62.92 5.09 1.04 7.69.17 3.75.16 7.82-.54 11.42-.57 2.92-.5 5.89-.5 8.96 0 2.47-.53 5.8.15 8.13C4.41 46.18 9.21 47 11.99 47h62.03c15.31 0 30.8-.71 46.09-.05 4.21.18 8.21 1.12 12.45 1.07 4.2-.04 8.4-.01 12.6-.03 3.82-.02 7.25.12 10.97.79 4.53.81 9.42.22 14.01.22 22 .01 43.99-.09 65.99.02 5.32.03 10.48-.55 15.76-.94 4.84-.36 9.79-.08 14.65-.09 5.29 0 10.6.19 15.89.05 5.79-.16 11.46-1.1 17.27-1.06 6.56.04 13-1.09 19.5-1.01 4.21.05 8.42.02 12.63.02 4.93 0 13.43 1.67 13.8-5 .43-7.6.02-15.38-.02-23-.02-3.21 1.02-5.8 1-9-.02-3 0-6 0-9"/>
</symbol>
<symbol id="input2" viewBox="0 0 345.27 56.51" preserveAspectRatio="none">
<path fill="none" stroke="#000" stroke-miterlimit="10" d="M5.51 3.68c10.87 0 21.78.34 32.64.05 4.83-.13 9.56-1.01 14.4-1.09 4.36-.07 8.7.32 13.05-.18C73.31 1.57 81 1.99 88.68.9 94.06.14 99.8.67 105.22.68c4.66 0 9.52-.46 14.14.22 2.7.4 4.94.83 7.68.8 6.99-.09 13.98-.02 20.97-.02 14.77 0 29.36.72 44.09.96 4.19.07 8.23.88 12.39 1.09 5.06.25 10.22-.05 15.28-.05H328.89c4.85 0 10.8-.95 15.52.15-1.79 8.51-.89 17.99-.89 26.86 0 4.3-.79 9.52.22 13.77.53 2.22 2.1 7.95-.09 9.29-.72.44-3.37-.07-4.28-.07-3.14-.01-6.27 0-9.41 0-5.06 0-9.92-.1-14.96-.54-5.99-.52-11.8.61-17.8.56-5.9-.05-11.89-.27-17.79-.07-6.15.2-12.19 1.11-18.36 1.07-7.39-.05-14.51.03-21.85.75-16.65 1.64-33.48-.94-50.14-.75-5.79.06-11.47-1.07-17.31-1.07-5.88 0-11.66.94-17.52 1.08-13.9.35-27.86-.04-41.76-.04-12.19 0-24.2-.99-36.37-1-12.84-.01-25.54-1-38.37-1-3.57 0-7.15.03-10.72.02-2.78 0-5.28-.88-8.02-1.07-4.63-.32-9.36.23-13.99.07-2.53-.08-2.06.11-2.49-1.99-.42-2.02-.95-3.87-1.03-6-.1-2.67.33-5.4-.06-8.05-.53-3.64-.91-6.52-.91-10.28V9.67c0-1.66.04-3.33 0-5-.06-2.93-.01-3.06 3-3 1.92.04 3.88-.14 5.8-.03 1.89.11 2.7.95 4.61 1.03 2.52.11 5.06-.05 7.58-.01 2.04.03 4.15-1.39 6.01-1"/>
</symbol>
<symbol id="input3" viewBox="0 0 344.17 48.76" preserveAspectRatio="none">
<path fill="none" stroke="#000" stroke-miterlimit="10" d="M1.75 1.76C2.08 3.59.8 5.6.73 7.5c-.1 2.69.02 5.4.02 8.09v10.68c0 6.61.61 13.56-.07 20.13 1.41-1.87 7.81-.37 9.9-.85 4.71-1.07 8.65-.67 13.56 0 10.07 1.37 20.97.22 31.14.22 3.75 0 7.51.01 11.26-.02 4.68-.04 9.2 1.12 13.85.85 7.59-.44 15.05-.88 22.67-.83 8 .05 15.9-.99 23.94-1 19.25-.01 38.49 0 57.74 0 17.66 0 35.61.92 53.26.05 3.83-.19 7.4-1.11 11.28-1.07 3.86.04 7.72.03 11.58 0 9.38-.08 18.99.8 28.29 1.8 5.51.59 10.98.32 16.5 1 2.69.33 5.27.23 7.98.22 5.25-.03 10.5 0 15.75 0 3.35 0 12.22 1.6 14.22-1.25-1.38-3.41-1.86-7.29-1.85-11.26.01-3.29-.62-7.33.22-10.49 1.02-3.8.78-7.73.78-11.77 0-3.41.71-7.78-.08-11.07-2.65-.84-6.71-.15-9.42-.15-4.86 0-9.71.03-14.57 0-3.15-.02-5.86.27-8.96.77-4 .65-8.36.22-12.4.22-10.73 0-21.34 1.03-32.06 1-6.02-.02-12.04-.03-18.07.01-5.58.04-11.36-1.39-16.87-.96-2.4.19-4.65 1.03-7.08 1.03-1.98 0-3.95-.66-5.94-.62-2.44.05-3.63-.2-6.03-.52-7.63-1.02-15.23 1.22-22.73 1.06-3.92-.09-7.65.9-11.55 1.05-4.13.16-8.07-.33-12.14.45-7.86 1.5-16.64.5-24.66.5-3.31 0-6.62-.01-9.93.02-4.57.04-8.91-1.09-13.49-1.05-3.82.04-7.74.3-11.55.07-4.41-.27-8.61-1.07-13.08-1.05-6.54.05-12.85-1.06-19.36-1.01-3.16.02-6.08.88-9.2 1.09-5.67.4-11.54-1.12-17.26-1.08-5.19.03-10.39.01-15.58.01-5.12 0-9.79 1.01-14.9 1-3.26-.01-6.86.4-10.1.02-.8-.09-3.25-1.45-3.83-.87-.57.56.9 4.24 1.09 4.87C6.89 20.1 5.75 34.63 5.75 48.76"/>
</symbol>
<symbol id="input4" viewBox="0 0 347.13 54.94" preserveAspectRatio="none">
<path fill="none" stroke="#000" stroke-miterlimit="10" d="M4.5.39C3 1.57 3.8 2.57 3.53 4.17c-.21 1.22-.87 2.03-1.09 3.22-.33 1.8.05 4.13.05 5.97V26.4c0 1.76.29 3.79-.09 5.5-.44 2.04-.93 3.28-.91 5.5.02 3.52-.93 8.58.16 11.9 5.66-1.42 11.8-.9 17.77-.9h25.01c15.85 0 31.7.11 47.55-.02 4.24-.04 8.24.86 12.43 1.07 4.27.22 8.66-.04 12.93-.06 3.47-.02 6.48.23 9.85.79 4.73.79 9.64-.06 14.4.31 8.25.64 16.28.91 24.57.91 9.07 0 18.75-.96 27.74.22 9.61 1.26 19.36.78 29.05.78 3.34 0 6.69.02 10.03-.02 3.84-.05 7.47.96 11.28 1.06 6.38.16 12.42-.5 18.7-1.09 10.03-.95 20.93.14 30.9 1.3 5.45.63 10.63.75 16.11.75 2.33 0 4.68.1 7.01.02 3.08-.1 5.99-.97 9.06-1.06 5.22-.16 10.48.03 15.71.04.91 0 3.48.45 4.2-.04.99-.67.6-3.56.55-4.72-.09-2.16-.94-4.1-1.07-6.27-.14-2.31.05-4.74.05-7.06V22.37c0-1.66-.01-3.32.01-4.98.03-2.14-.67-3.06-1.06-5-.64-3.14.64-6.7-.01-9.85-1.79-.57-4-.14-5.87-.14-4.43 0-8.76.09-13.18.49-7.66.7-15.84 1.04-23.47 0-4.61-.63-9.18-.47-13.83-.52-4.6-.05-8.95 1.05-13.59 1.02-5.15-.03-10.03.02-15.1.78-8.63 1.3-18.02.23-26.74.22-11.58-.01-23.03-.61-34.59-1.05-8.96-.34-18.52-.44-27.46.14-23.14 1.5-46.41.91-69.63.91-17.01 0-34.02.07-51.03 0-5.66-.02-11.1 1.08-16.73 1.02-4.75-.05-9.5-.06-14.24 0-3.21.04-5.98-1.08-9.18-1.02-1.77.03-3.16-.26-4.78-.5-1.31-.19-3.1-.25-4.39-.66-.04-.28-.08-.56-.11-.84"/>
</symbol>
<symbol id="textarea" viewBox="0 0 704.84 271.56" preserveAspectRatio="none">
<path fill="none" stroke="#000" stroke-miterlimit="10" d="M9 .06c.26 1.96-.92 3.92-1.05 5.88-.22 3.15.05 6.39.05 9.55-.01 6.46-1.06 12.69-1.01 19.11.04 5.74.01 11.48.01 17.22 0 5.86.75 12.23-.22 18-.93 5.53.09 11.31-1 16.75-1.05 5.2-1.8 10.61-1.77 15.95.03 5.09 0 10.18 0 15.27 0 10.11-1.07 20.1-1.01 30.18.06 11.88-1 23.51-1 35.42 0 10.51 1 20.71 1 31.19v16.71c-.01 6.4-1.05 12.63-1 18.97.04 4.1-.18 8.23-.01 12.33.15 3.79 2.07 3.5 5.5 3.48 4.63-.02 9.56-.46 14.13.22 8.56 1.29 17.3.78 25.95.78h92.16c7.79 0 15.57.01 23.36-.02 6.42-.03 12.68.89 19.06 1.07 7.77.22 15.59-.05 23.36-.05 10.63 0 21.11.53 31.72 1 10.78.48 21.39 1 32.2 1h21.18c18.27 0 36.36.77 54.62 1 5.64.07 11.02-1.9 16.69-2.03 11.4-.27 22.83.3 34.23.07 5.01-.1 9.8-1.08 14.82-1.04 8.01.06 15.78-2.08 23.82-2.02 7.79.06 16.14.91 23.79-.48 8.33-1.51 17.4-.5 25.87-.5 2.58 0 5.59.39 8.12-.09 1.82-.35 3.34-.9 5.25-.94 6.05-.13 12.3-.37 18.31.22 4.16.41 8.08 1.75 12.31 1.85 1.84.04 3.69-.04 5.53-.05 7.16-.03 14.28-.27 21.37.78 6.57.97 12.79-.87 19.28-.8 2.77.03 5.53.02 8.3.05 4.44.04 8.72-.99 13.14-1.06 3.09-.05 6.18.03 9.27.06 3.7.04 7.19-.95 10.89-1.07 6.37-.22 13.24.95 19.55-.17 4.35-.77 8.4-.78 12.84-.78 2.06 0 4.5.44 6.5.05 3.08-.6 5.25-1.12 8.68-1.05 2.16.05 3.8-.57 5.92-.81 2.36-.26 4.79-.05 7.1-.22 3.07-.23 6.23.01 9.31.04 2.86.02 4.93-.9 7.65-1.06 3.07-.18 4.97.25 7.63-1.07.27-.14 2.29-.85 2.45-1.06 1.23-1.64-.53-6.05-.81-7.86-.96-6.01-2.42-11.86-2.06-17.98.29-4.93 1.86-9.84 2.1-14.8.63-13.07-1.19-26.35.73-39.33 1.61-10.91-.77-22.22-.78-33.12-.01-7.15 0-14.29 0-21.44 0-3.71-.02-7.42.01-11.13.03-3.25-.82-6-1.08-9.15-.21-2.48.73-4.97.99-7.42.25-2.33.09-4.71.09-7.06-.01-6.38 0-12.75 0-19.13V37.55 21.21c0-2.54 1.28-9.87-.62-11.61-1.18-1.07-3.8-.54-5.3-.53-2.36.02-4.71 0-7.07 0h-11.47c-8.4 0-16.92-.48-25.27.53-4.24.51-8.53.07-12.74.22-2.79.1-5.63-.8-8.54-1.24-5.6-.84-11.17-2.16-16.83-2.46-6.42-.34-12.89-.05-19.32-.05-13.71 0-27.34-.21-41.01.77-8.64.62-16.9-.11-25.52-.55-7.77-.4-15.54-.22-23.32-.22-17.8-.01-35.61-.02-53.41-.01-15.32.01-30.65.33-45.95-.46C395 5 383.35 4.14 371.69 4.01c-20.43-.22-40.81-1.97-61.24-1.97-10.86 0-21.33 1.5-32.1 2.24-13.82.96-27.57 1.78-41.38 2.56-14.05.79-28.09.19-42.13.19-5.76 0-11.53.02-17.29.05-5.25.03-10.3-1.02-15.52-1.06-17.57-.14-35.48 1.1-52.95-.72C96.05 3.95 82.59 2.99 69.5 2.99c-4.02 0-7.79 1.01-11.78 1.13-5.11.15-10.25-.05-15.36-.06-4.76-.02-9.5.57-14.25.57-5.61 0-11.25-.57-16.9-.55-3.73.01-7.47 0-11.2 0"/>
</symbol>
<symbol id="fieldset" viewBox="0 0 998.06 602.62" preserveAspectRatio="none">
<path fill="none" stroke="#000" stroke-miterlimit="10" d="M994.5 591.62c-1.92-.28-2.94.46-4.7.78-1.94.35-3.79.23-5.75.22-5.48-.03-11.04.35-16.49-.22-15.32-1.59-30.5.22-45.87.22-17.9 0-35.67.99-53.55 1.02-23.01.03-45.98-1.08-69-.99-10.65.04-20.84-1.45-31.41-.25-5.25.6-10.55.06-15.81.19-4.71.11-9.32.88-14.05.98-5.57.12-10.92 1.38-16.56 1.11-3.03-.15-5.9-.99-8.94-1.1-6.01-.22-12.1.05-18.11.05-8.71 0-17.42.03-26.13 0-8.81-.02-17.47.82-26.25 1.05-4.06.11-8.13-.27-12.18-.1-3.25.13-6.41.84-9.66 1.05-12.86.82-25.59 1-38.48 1-15.24 0-30.48-.07-45.72.02-7.33.05-14.47-1.09-21.82-1.05-9.14.05-18.29-.03-27.43.02-7.09.04-14.01-1.09-21.1-1.02-11.56.11-23.13-.74-34.69-1.22-10.38-.43-20.68-.75-31.07-.75-10.62 0-21.09 1.09-31.71 1.03-12.91-.07-25.7 1.05-38.6 1-5.76-.02-11.58.22-17.34.03-4.19-.14-8.25-.97-12.43-1.1-17.17-.53-34.45.12-51.64.06-7.99-.03-15.84 1.08-23.82 1.02-6.77-.05-13.55-.02-20.32-.02-18.68 0-37.4.33-56.09.05-9.8-.14-19.51-1.05-29.34-1.05-12.69 0-25.29-.36-37.95-.97-2.54-.12-4.91-.92-7.43-1.08-3.74-.24-7.6.05-11.35.05h-34.6c-1.8 0-3.91-.27-5.69-.02-1.43.2-2.5.78-3.91 1.07-2.5.52-5.29-.41-7.8.17-.66.15-.94 1.58-2.03.68-.79-.67-.16-3.71-.17-4.64 0 1.55-.57 3.71 1.27 4.4 1.88-1.8.11-3.06-.35-4.75-.52-1.89.53-4.33.83-6.14.25-1.5.19-3.1.49-4.61 1.48-7.19 2.76-14.1 2.75-21.54-.01-5.2 0-10.4 0-15.61 0-1.96-.02-3.92 0-5.87.02-3.33-.67-5.94-1.02-9.07-.29-2.6-.11-4.59-.75-7.06-.46-1.74-.22-3.62-.2-5.42.02-2.04-.61-3.49-.82-5.38-.21-1.81.22-2.18.58-3.98.72-3.58.22-7.63.22-11.25 0-7.17-1-14.02-1-21.15 0-10.51.45-21.14.02-31.64-.11-2.8-.91-5.44-1.05-8.22-.14-2.81 0-5.7.02-8.51.02-2.97-.87-5.14-1.05-8.02-.48-7.89.05-15.99.05-23.9 0-12.72.39-25.45-.78-38.12-.5-5.43-.25-10.96-.23-16.41.03-7.9-1.07-15.61-.97-23.51.09-6.88-1.19-13.66-1.05-20.57.11-5.62-.59-11.39-1.22-16.97-.54-4.8-.41-9.45-.7-14.25-.13-2.23-.98-4.2-1.1-6.43-.15-2.56.13-5.16.1-7.73C1.46 237.09.51 227.08.5 217c-.01-8.65.03-17.3 0-25.94-.02-6.79 1.07-13.39 1.02-20.14-.07-8.48 0-16.96-.02-25.44-.02-8.68.54-17.37 1.77-25.96 1.14-7.94.07-16.46.15-24.4.17-15.27 5-29.97 5.08-45.26.03-6.14-.94-12.12-1.02-18.18-.03-2.35.21-4.75.07-7.1-.2-3.38-1.42-6.71-1.85-10.08-.66-5.19-.2-5.66-.2-10.88h16c2.33 0 4.66-.03 6.99-.02 4.21.01 8.3 1.02 12.51 1.12 3.94.1 7.81-1.07 11.74-1.14 2.77-.05 5.55.04 8.32.04 5.03 0 10.06.02 15.08 0 8.75-.03 17.36 1.02 26.12.99 5.28-.02 10.57-.01 15.85-.03 8.14-.04 16.19 1.12 24.33 1.07 15.14-.08 30.5.72 45.6-.12 5.1-.29 10.04-.97 15.17-.94 4.18.02 8.39.21 12.57.07 4.45-.15 8.8-1.01 13.26-1.09 4.5-.08 9.01.04 13.5.04h65.38c12.02 0 24.03-.06 36.05.01 3.86.02 7.3-.3 11.12-.79 5.67-.72 11.6-.22 17.3-.22 9.03 0 18.07.01 27.1-.04 5.81-.03 11.52.89 17.31 1.09 5.04.18 10.11-.29 15.15-.11 3.59.13 7.29 1.36 10.89.88 3.69-.49 6.96-.86 10.72-.84 9.14.05 18.07-.04 27.16.79 12.28 1.11 24.95.26 37.28.19 4.69-.03 9.24.95 13.91 1.09 3.75.11 7.54-.05 11.29-.05 3.88 0 7.83.31 11.69-.09 3.77-.38 7.14-.96 11-.94 10.26.07 20.61-.43 30.85.25 14.62.97 29.2.78 43.85.78 8.67 0 17.59.61 26.24.05 2.93-.19 5.63-1.03 8.6-1.08 3.56-.06 6.67-.19 10.16-.75 2.84-.45 5.72-.23 8.59-.21 3.81.02 6.96-.38 10.65-.93 4.46-.66 9.38-.12 13.9-.09 7.32.05 14.58-1 21.97-.99 15.43.02 30.86 0 46.3 0 18.36 0 37.12-1.09 55.33.92 3.74.41 7.18-.28 10.87-.7 4.22-.48 8.52-.23 12.75-.22 4.61.01 9.21-.01 13.82.02 5.5.04 10.86-.94 16.35-1.07 7.23-.18 14.5.05 21.73.05 3.72 0 7.44.01 11.17-.02 4.34-.04 8.43.93 12.75 1.07 4.74.16 9.53-.05 14.28-.05 2.76 0 5.52.01 8.28-.02 2.98-.03 5.63.94 8.59 1.07 5.02.23 10.11-.06 15.13-.05 3.57 0 5.11-.67 6.71 2.78.9 1.93.74 3.93.73 6.22-.02 2.55.93 4.57 1.03 7 .1 2.5 1 4.49.97 7-.04 2.67 0 5.35 0 8.03 0 5.15.12 10.32.01 15.47-.05 2.32-1.04 4.14-1.01 6.5.03 2.5 0 4.99 0 7.49 0 12.65.22 25.32.01 37.97-.05 3-.78 6.2-1.51 9.05-.59 2.3-.53 4.56-.5 6.99.03 2.99-.96 5.38-1 8.39-.07 6.2-1 12.35-1 18.62 0 4.01-.01 8.02 0 12.02.02 7.64-1.02 15.13-.99 22.76.02 4.36.53 9-.5 13.22-.4 1.65-.51 2.92-.47 4.59.09 4.04-.99 7.92-1.08 11.95-.15 6.27-.97 12.36-.94 18.63.02 4.53 0 9.05 0 13.58v38.08c0 1.31-.25 2.92-.04 4.2.2 1.16.83 1.76 1.07 2.92.2.96-.19 2.06-.07 3.04.15 1.3.84 2.24 1.09 3.51.27 1.35-.13 3.01-.09 4.39.11 3.51 1.05 6.87 1.07 10.42.05 7.56-.09 15.12-.04 22.68.02 2.67-.16 5.14-.5 7.79-.75 5.89-.08 11.84-1 17.7-1.01 6.46.61 13.32-.72 19.69-1.03 4.9-.78 9.76-.78 14.83 0 3.52.46 6.57.91 10.05.5 3.84.09 7.98.09 11.86v26.84c0 4.89.23 9.83.05 14.71-.2 5.57-1.13 11.03-1.08 16.62.05 5.02.21 10.05-.17 15.06-.4 5.18-1.51 10.24-1.72 15.44-.37 9.44-1.08 18.7-1.09 28.18-.01 17.19 0 34.37 0 51.56v22.16"/>
</symbol>
<symbol id="checkbox_empty" viewBox="0 0 33.18 33.34">
<path fill="none" stroke="#000" stroke-miterlimit="10" d="M31.74 0v18c0 2.74 1.29 12.29-.5 13.96-1.65 1.53-7.08-.9-8.91-1-2.68-.15-5.44.04-8.13.04-2.41 0-12.1-1.27-13.53.63C1.16 26.5.74 21.15.74 16c0-2.65-.17-5.36-.02-8 .08-1.5.58-2.6 1.05-4.02.67-2.02-.31-1.91 2.46-1.99C9.59 1.85 14.97 2 20.32 2c2.97 0 5.95-.08 8.92-.01 1.95.05 1.97-.23 2.53 1.47.44 1.34.28 2.19.96 3.54"/>
</symbol>
<symbol id="checkmark" viewBox="0 0 37.92 33.3" preserveAspectRatio="none">
<path fill="none" stroke="#000" stroke-miterlimit="10" d="M.59 19.57c1.41.11 2.74 1.49 3.93 2.22 1.96 1.22 4.34 1.97 6.16 3.29 1.94 1.41 3.17 3.68 5.03 5.09-1.01-1.05-2.52-1.47-3.7-2.3-2.15-1.5-4.06-2.99-6.49-4.1-1.46-.67-6.06-1.54-4.8-4.07 1.76-.33 5.43 3.09 6.68 4.15 1.47 1.24 2.42 2.87 3.98 4 2.01 1.45 2.09 1.24 3.97-.52 1.43-1.34 2.28-2.68 3.24-4.25 1.04-1.71 2.62-3.12 3.79-4.72.31-.42.64-1.52.93-2 .87-1.48 2.1-2.58 3.3-3.77 2.23-2.22 4.27-4.42 6.27-6.8.59-.7 1.46-1.2 2-1.93.58-.77.73-1.66 1.33-2.42C33 3 31.46 7.7 29.34 10.35c-1.99 2.48-4.31 4.87-5.75 7.71-2.38 4.67-5.6 10.27-9.65 13.43.83-1.6 2.49-2.55 3.65-3.87 1.51-1.72 2.8-3.72 4.22-5.52 1.87-2.37 3.39-4.85 4.96-7.23 1.27-1.94 3.29-4.64 5.02-6.3 1.25-1.19 2.15-1.5 3.07-3 .61-.99.87-1.86 1.83-2.6-4.07 4.06-7.78 8.84-11.07 13.55-2.11 3.02-4.17 6.06-6.3 9.07-1 1.42-3.02 5.22-4.37 5.89.89-1.76 2.86-2.94 4.07-4.49 2.66-3.42 4.5-7.43 7.04-10.94 1.59-1.98 3.18-3.97 4.77-5.96.41-.84.74-1.72 1-2.62.72-1.07 1.95-1.79 2.76-2.91"/>
</symbol>
<symbol id="button" viewBox="0 0 256.6 60.02" preserveAspectRatio="none">
<path d="M3.98 0c9.31-.01 18.44.99 27.76 1 10.44.01 20.89 0 31.33 0 7.99 0 16.09-.41 24.06.22 10.76.85 21.39.78 32.2.78 4.39 0 8.82.21 13.2.05 4.46-.16 8.62-1.07 13.12-1.05 19.4.1 38.81 0 58.21 0 4.58 0 9.16.02 13.74-.01 5.99-.04 11.84.86 17.8 1.06 6.92.24 14.3.49 21.2-.12-.87.98-1.21 2.86-1.65 4.09-.31.89-.81 2-1.02 2.93-.78 3.31.16 7.86.07 11.25-.1 3.99-1.02 7.75-1.02 11.8v11.02c0 3.58.19 7.22.02 10.8-.13 2.66-.6 2.22-3.15 2.18-4.54-.08-9.09 0-13.63 0-5.38 0-10.75-.02-16.13.02-5.74.05-11.37-.86-17.09-1.07-6.42-.24-12.91.09-19.34.06-4.9-.03-9.57.9-14.44 1.05-2.54.08-5.26-.44-7.78.03-1.32.24-2.48.79-3.82.94-3.63.41-7.47.87-11.13 1.02-4.97.2-9.47-.21-14.38.73-6.11 1.17-13 .22-19.24.22-8.9 0-17.92-.4-26.81-.05-5.32.21-10.52 1.12-15.85 1.07-9.41-.07-18.81-.02-28.2-.02H12.98c-1.5 0-3-.02-4.5 0-1.59.02-2.54-.51-3.72-.78-.89-.2-4.02.24-4.65-.38-.48-.47.81-5.66.87-6.65.17-2.71 1.06-5.14 1.02-7.92-.04-3.34 0-6.68-.02-10.02-.02-4.3.96-7.94 1-12.27.03-4.3-1.41-8.11-2.05-12.2C.61 7.77.02.47 2.71.18c.77 1.2 2.03.84 3.27.82"/>
</symbol>
</svg>
<form class="handmade-form">
<div class="container">
<h1>Contact us</h1>
<ul>
<li class="grid grid-2">
<div class="form-wrapper">
<input type="text" placeholder="Name*" required>
<svg>
<use xlink:href="#input1"></use>
</svg>
</div>
<div class="form-wrapper">
<input type="text" placeholder="Surname*" required>
<svg>
<use xlink:href="#input2"></use>
</svg>
</div>
</li>
<li class="grid grid-2">
<div class="form-wrapper">
<input type="email" placeholder="Email*" required>
<svg>
<use xlink:href="#input3"></use>
</svg>
</div>
<div class="form-wrapper">
<input type="tel" placeholder="Phone">
<svg>
<use xlink:href="#input4"></use>
</svg>
</div>
</li>
<li class="form-wrapper">
<textarea placeholder="Message"></textarea>
<svg>
<use xlink:href="#textarea"></use>
</svg>
</li>
<li class="form-wrapper">
<fieldset>
<legend>Select preferred method of contact</legend>
<ul class="checkbox-list">
<li>
<input type="radio" id="email" name="contact-method" checked>
<label for="email">
<svg>
<use xlink:href="#checkbox_empty"></use>
</svg>
<svg class="checkmark">
<use xlink:href="#checkmark"></use>
</svg>
By Email
</label>
</li>
<li>
<input type="radio" id="phone" name="contact-method">
<label for="phone">
<svg>
<use xlink:href="#checkbox_empty"></use>
</svg>
<svg class="checkmark">
<use xlink:href="#checkmark"></use>
</svg>
By Phone
</label>
</li>
</ul>
<svg>
<use xlink:href="#fieldset"></use>
</svg>
</fieldset>
</li>
<li class="grid grid-3">
<div class="form-wrapper">
<button type="submit">SUBMIT</button>
<svg>
<use xlink:href="#button"></use>
</svg>
</div>
<div class="form-wrapper">
<button type="reset">RESET</button>
<svg>
<use xlink:href="#button"></use>
</svg>
</div>
</li>
</ul>
</div>
</form>
<footer>
<div class="container">
<small>Made with <span>❤</span> by <a href="http://georgemartsoukos.com/" target="_blank">George Martsoukos</a>
</small>
</div>
</footer>/* RESET RULES & INITIAL SET UP
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@font-face {
font-family: "Summer";
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/Summer%20Font%20Regular.woff);
}
@font-face {
font-family: "Summer Bold";
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/Summer%20Font%20Bold.woff);
}
:root {
--white: #fff;
--red: #e31b23;
}
* {
padding: 0;
margin: 0;
border: none;
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
input,
textarea,
button {
font-family: inherit;
font-size: 100%;
background: none;
outline: none;
}
[type="radio"] {
position: absolute;
left: -9999px;
}
button,
label {
cursor: pointer;
}
textarea {
resize: none;
}
ul {
list-style: none;
}
body {
font: 32px/1.2 "Summer";
margin: 1.5rem 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* FORM ELEMENTS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.handmade-form h1,
.handmade-form li,
.handmade-form .grid > *:not(:last-child) {
margin-bottom: 1.5rem;
}
.handmade-form .form-wrapper,
.handmade-form input:not([type="radio"]),
.handmade-form textarea,
.handmade-form button,
.handmade-form .checkbox-list label {
position: relative;
}
.handmade-form input:not([type="radio"]),
.handmade-form textarea,
.handmade-form button,
.handmade-form .checkbox-list label {
z-index: 1;
}
.handmade-form input:not([type="radio"]),
.handmade-form textarea,
.handmade-form button {
width: 100%;
}
.handmade-form input:not([type="radio"]),
.handmade-form textarea,
.handmade-form fieldset {
padding: 15px;
}
.handmade-form textarea {
height: 200px;
vertical-align: top;
}
.handmade-form legend {
padding-top: 15px;
margin: 0 auto;
}
.handmade-form ::placeholder {
color: inherit;
/*Fix opacity issue on Firefox*/
opacity: 1;
}
.handmade-form .form-wrapper svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.handmade-form button {
font-family: "Summer Bold";
color: var(--white);
padding: 5px 10px;
}
/* RADIO BUTTONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.handmade-form .checkbox-list {
display: flex;
justify-content: center;
}
.handmade-form .checkbox-list li:not(:last-child) {
margin-right: 50px;
}
.handmade-form .checkbox-list li {
margin-bottom: 0;
}
.handmade-form .checkbox-list label svg {
top: 50%;
left: -25px;
width: 20px;
height: 20px;
transform: translateY(-50%);
}
.handmade-form .checkbox-list label .checkmark {
/*the value of the stroke-* properties comes from the getTotalLength() method*/
stroke-dasharray: 233.69552612304688;
stroke-dashoffset: 233.69552612304688;
transition: stroke-dashoffset 0.5s linear;
}
.handmade-form [type="radio"]:checked + label .checkmark {
stroke-dashoffset: 0;
}
/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer {
font-family: "Summer Bold";
font-size: 1.2rem;
text-align: right;
}
footer span {
color: var(--red);
}
/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 600px) {
.handmade-form .grid {
display: grid;
grid-gap: 1.5rem;
}
.handmade-form .grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.handmade-form .grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.handmade-form .grid > *:not(:last-child) {
margin-bottom: 0;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.