Created
August 28, 2022 13:12
-
-
Save CforED/9f4d85c01a06822c193e34a475586fd5 to your computer and use it in GitHub Desktop.
Front Browser Petition Form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| ::-moz-selection { | |
| color: #ffffff; | |
| background: #2cb9d9; | |
| } | |
| ::selection { | |
| color: #ffffff; | |
| background: #2cb9d9; | |
| } | |
| html { | |
| font-size: 62.5%; | |
| scroll-behavior: smooth; | |
| } | |
| :focus * { | |
| outline: 0; | |
| } | |
| .form-group { | |
| margin-bottom: 0; | |
| } | |
| figure { | |
| margin: 0; | |
| } | |
| p { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| a { | |
| text-decoration: none; | |
| display: inline-block; | |
| color: #fff !important; | |
| } | |
| a:hover { | |
| text-decoration: none; | |
| } | |
| .h1, | |
| .h2, | |
| .h3, | |
| .h4, | |
| .h5, | |
| .h6, | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| margin: 0; | |
| padding: 0; | |
| text-transform: none; | |
| line-height: 1; | |
| } | |
| ul { | |
| margin: 0; | |
| } | |
| li { | |
| list-style-type: none; | |
| } | |
| img { | |
| display: block; | |
| width: 100%; | |
| max-width: 100%; | |
| height: 100%; | |
| -o-object-fit: contain; | |
| object-fit: contain; | |
| } | |
| svg { | |
| object-fit: contain; | |
| width: auto; | |
| } | |
| button { | |
| cursor: pointer; | |
| } | |
| body { | |
| font-family: 'IBM Plex Sans', sans-serif; | |
| font-weight: 400; | |
| font-size: 17px; | |
| line-height: 19px; | |
| } | |
| .container { | |
| max-width: 1240px; | |
| width: 100%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .text__center { | |
| text-align: center; | |
| } | |
| /* Header Area */ | |
| .header__area { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .header__content { | |
| display: flex; | |
| padding-top: 30px; | |
| } | |
| .header__logo svg { | |
| height: 40px; | |
| margin-top: -10px; | |
| } | |
| .header__content p { | |
| font-weight: 500 !important; | |
| font-size: 48px !important; | |
| line-height: 53px !important; | |
| color: #ffffff !important; | |
| margin-left: 10px; | |
| } | |
| /* Header Area */ | |
| /* Landing Banner */ | |
| /* .landing__banner { | |
| background-image: url(https://user-images.githubusercontent.com/62242483/163563573-11e133fc-f347-4c57-b041-57bc0d6e34b4.jpg); | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| background-position: center center; | |
| height: 760px; | |
| } */ | |
| .landing__banner-content { | |
| max-width: 745px; | |
| width: 100%; | |
| padding-top: 180px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .landing__banner-content h1 { | |
| font-weight: 700 !important; | |
| font-size: 60px !important; | |
| line-height: 90px !important; | |
| color: #ffffff !important; | |
| } | |
| .custom__btn { | |
| width: 100%; | |
| height: 55px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| color: #ffffff; | |
| font-weight: 500; | |
| font-size: 18px; | |
| line-height: 23px; | |
| background: #8a0303; | |
| text-transform: uppercase; | |
| border-radius: 10px; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| -ms-border-radius: 10px; | |
| -o-border-radius: 10px; | |
| border: 2px solid #8a0303; | |
| transition: all 0.2s ease-out; | |
| -webkit-transition: all 0.2s ease-out; | |
| -moz-transition: all 0.2s ease-out; | |
| -ms-transition: all 0.2s ease-out; | |
| -o-transition: all 0.2s ease-out; | |
| } | |
| .custom__btn:hover { | |
| background: transparent; | |
| color: #8a0303; | |
| } | |
| .landing__banner-content a { | |
| margin-top: 80px; | |
| } | |
| .landing__banner-content a:hover { | |
| background: #8a0303; | |
| color: #ffffff; | |
| } | |
| /* Landing Banner */ | |
| /* Fedarel Students */ | |
| .federal__students { | |
| padding-top: 50px; | |
| padding-bottom: 50px; | |
| } | |
| .federal__students-heading { | |
| max-width: 620px; | |
| width: 100%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| font-weight: 700 !important; | |
| font-size: 36px !important; | |
| line-height: 60px !important; | |
| color: #333333 !important; | |
| margin-bottom: 30px; | |
| } | |
| .federal__students-content { | |
| display: flex; | |
| box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.07); | |
| border-radius: 10px; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| -ms-border-radius: 10px; | |
| -o-border-radius: 10px; | |
| padding: 23px 18px; | |
| } | |
| .federal__students-text p { | |
| font-weight: 400 !important; | |
| font-size: 24px !important; | |
| line-height: 40px !important; | |
| letter-spacing: 1px !important; | |
| color: #5f5f5f !important; | |
| } | |
| .federal__students-image { | |
| flex: 0.4; | |
| } | |
| .federal__students-image img { | |
| object-fit: cover; | |
| } | |
| .federal__students-text { | |
| flex: 0.6; | |
| padding-left: 30px; | |
| } | |
| /* Fedarel Students */ | |
| /* Donate Box Area */ | |
| .donate__box-area { | |
| background: #f7f7f7; | |
| padding: 35px 0; | |
| } | |
| .donate__box-wrapper { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 100px; | |
| } | |
| .single__donate-box { | |
| width: 100%; | |
| background: #3270a2; | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 10px; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| -ms-border-radius: 10px; | |
| -o-border-radius: 10px; | |
| box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); | |
| color: #ffffff !important; | |
| padding: 40px 25px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-around; | |
| } | |
| .single__donate-box h5 { | |
| font-weight: 700 !important; | |
| font-size: 24px !important; | |
| line-height: 38px !important; | |
| color: #ffffff !important; | |
| text-align: center; | |
| max-width: 350px; | |
| width: 100%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-bottom: 35px; | |
| } | |
| .single__donate-box p { | |
| font-weight: 400 !important; | |
| font-size: 24px !important; | |
| line-height: 40px !important; | |
| letter-spacing: 1px; | |
| color: #ffffff !important; | |
| } | |
| .single__donate-box a { | |
| letter-spacing: 0.1px; | |
| text-decoration-line: underline; | |
| color: #ffffff; | |
| font-weight: 700 !important; | |
| font-size: 20px !important; | |
| line-height: 24px !important; | |
| margin-top: 30px; | |
| } | |
| .single__donate-box a span { | |
| margin-left: 10px; | |
| } | |
| .full__width-box h5 { | |
| max-width: 80%; | |
| } | |
| /* Donate Box Area */ | |
| /* Strategy Area */ | |
| .strategy__area { | |
| padding: 50px 0; | |
| } | |
| .single__strategy { | |
| display: flex; | |
| margin-bottom: 100px; | |
| } | |
| .single__strategy:last-of-type { | |
| margin-bottom: 0; | |
| } | |
| .reverse__strategy { | |
| flex-direction: row-reverse; | |
| } | |
| .strategy__content { | |
| flex: 0.7; | |
| padding-right: 50px; | |
| } | |
| .reverse__strategy .strategy__content { | |
| padding-right: 0px; | |
| padding-left: 50px; | |
| } | |
| .strategy__image { | |
| flex: 0.3; | |
| } | |
| .strategy__image img { | |
| object-fit: cover; | |
| } | |
| .strategy__content h5 { | |
| font-weight: 700 !important; | |
| font-size: 36px !important; | |
| line-height: 47px !important; | |
| color: #333333 !important; | |
| margin-bottom: 30px; | |
| } | |
| .strategy__content p { | |
| font-weight: 400 !important; | |
| font-size: 24px !important; | |
| line-height: 44px !important; | |
| color: #757575 !important; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| .strategy__items { | |
| margin-top: 30px; | |
| } | |
| .strategy__items li { | |
| font-weight: 400; | |
| font-size: 24px; | |
| line-height: 24px; | |
| display: flex; | |
| align-items: center; | |
| letter-spacing: 0.1px; | |
| color: #333333; | |
| margin-bottom: 20px; | |
| } | |
| .strategy__items li span { | |
| margin-right: 15px; | |
| } | |
| /* Strategy Area */ | |
| /* Contact Section */ | |
| .contact__form { | |
| background: #f7f7f7; | |
| padding: 50px 0; | |
| } | |
| .contact__form-area { | |
| display: flex; | |
| } | |
| .contact__form-left, | |
| .contact__form-right { | |
| flex: 1; | |
| } | |
| .contact__form-left { | |
| padding-right: 50px; | |
| } | |
| .contact__form-left h3 { | |
| font-weight: 700 !important; | |
| font-size: 36px !important; | |
| line-height: 47px !important; | |
| color: #000000 !important; | |
| margin-bottom: 30px; | |
| } | |
| .contact__form-left p { | |
| font-weight: 400 !important; | |
| font-size: 24px !important; | |
| line-height: 35px !important; | |
| color: #757575 !important; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| .contact__input-style { | |
| width: 100%; | |
| height: 55px; | |
| border: 1px solid #000; | |
| border-radius: 3px; | |
| background: transparent; | |
| font-weight: 400; | |
| font-size: 16px; | |
| line-height: 21px; | |
| color: #000000; | |
| padding: 15px; | |
| } | |
| ::-webkit-input-placeholder { | |
| color: #000000; | |
| font-weight: 500; | |
| font-size: 16px; | |
| line-height: 21px; | |
| font-weight: 700; | |
| } | |
| ::-moz-placeholder { | |
| color: #000000; | |
| font-weight: 500; | |
| font-size: 16px; | |
| line-height: 21px; | |
| font-weight: 700; | |
| } | |
| :-ms-input-placeholder { | |
| color: #000000; | |
| font-weight: 500; | |
| font-size: 16px; | |
| line-height: 21px; | |
| font-weight: 700; | |
| } | |
| :-moz-placeholder { | |
| color: #000000; | |
| font-weight: 500; | |
| font-size: 16px; | |
| line-height: 21px; | |
| font-weight: 700; | |
| } | |
| .contact__field-wrap { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| column-gap: 20px; | |
| row-gap: 25px; | |
| } | |
| .contact__email-field { | |
| grid-column: 1 / 3; | |
| } | |
| .comment__field { | |
| height: 153px; | |
| grid-column: 1 / 3; | |
| } | |
| .comment__btn { | |
| width: 100%; | |
| height: 43px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background: #8a0303; | |
| border: 2px solid #8a0303; | |
| border-radius: 5px; | |
| font-weight: 500; | |
| font-size: 18px; | |
| line-height: 23px; | |
| color: #ffffff; | |
| margin-top: 30px; | |
| transition: all 0.2s ease-out; | |
| -webkit-transition: all 0.2s ease-out; | |
| -moz-transition: all 0.2s ease-out; | |
| -ms-transition: all 0.2s ease-out; | |
| -o-transition: all 0.2s ease-out; | |
| } | |
| .comment__btn:hover { | |
| color: #8a0303; | |
| background: #ffffff; | |
| } | |
| /* Contact Section */ | |
| /* Footer Petition */ | |
| .footer__box { | |
| padding: 45px 0; | |
| display: flex; | |
| margin-bottom: 0; | |
| } | |
| .footer__left { | |
| flex: 1; | |
| } | |
| .footer__right { | |
| flex: 1; | |
| text-align: right; | |
| } | |
| .footer__social-icons { | |
| display: flex; | |
| margin-top: 15px; | |
| } | |
| .footer__social-icons li { | |
| margin-right: 10px; | |
| } | |
| .footer__logo-info { | |
| margin-top: 30px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .footer__logo-info img, | |
| .footer__logo-info svg { | |
| height: 40px; | |
| width: auto; | |
| margin-bottom: -5px; | |
| margin-left: -5px; | |
| width: fit-content; | |
| } | |
| .footer__left p { | |
| max-width: 463px; | |
| width: 100%; | |
| font-weight: 500 !important; | |
| font-size: 16px !important; | |
| line-height: 32px !important; | |
| color: #333333 !important; | |
| } | |
| .footer__logo-info p { | |
| font-weight: 600 !important; | |
| font-size: 18px !important; | |
| line-height: 28px !important; | |
| } | |
| .footer__right p { | |
| font-weight: 400 !important; | |
| font-size: 16px !important; | |
| line-height: 33px !important; | |
| color: #333333 !important; | |
| } | |
| /* Footer Petition */ | |
| /* Responsive Code */ | |
| @media (max-width: 1199.98px) { | |
| .header__content p { | |
| font-size: 40px !important; | |
| line-height: 48px !important; | |
| } | |
| .landing__banner-content h1 { | |
| font-size: 50px !important; | |
| line-height: 70px !important; | |
| } | |
| .landing__banner-content { | |
| max-width: 650px; | |
| } | |
| .federal__students-image { | |
| flex: 1; | |
| } | |
| .federal__students-text { | |
| flex: 1; | |
| padding-left: 0; | |
| } | |
| .federal__students-content { | |
| flex-direction: column; | |
| padding: 30px; | |
| } | |
| .federal__students-image img { | |
| height: 600px; | |
| } | |
| .federal__students-image { | |
| margin-bottom: 30px; | |
| } | |
| .federal__students-heading { | |
| font-size: 36px !important; | |
| line-height: 50px !important; | |
| } | |
| .donate__box-wrapper { | |
| gap: 30px; | |
| } | |
| .single__strategy { | |
| flex-direction: column; | |
| margin-bottom: 60px; | |
| } | |
| .strategy__image { | |
| margin-top: 30px; | |
| } | |
| .reverse__strategy .strategy__content { | |
| padding-left: 0; | |
| } | |
| .strategy__content h5 { | |
| margin-bottom: 20px; | |
| } | |
| .contact__form-left { | |
| padding-right: 80px; | |
| } | |
| .strategy__content { | |
| padding-right: 0; | |
| } | |
| .strategy__content p { | |
| max-width: 100%; | |
| } | |
| section, | |
| footer { | |
| padding-left: 30px !important; | |
| padding-right: 30px !important; | |
| } | |
| } | |
| @media (max-width: 991.98px) { | |
| .contact__form-area { | |
| flex-direction: column; | |
| } | |
| .contact__form-right { | |
| margin-top: 50px; | |
| } | |
| .area__wrapper { | |
| padding: 0 50px; | |
| } | |
| .landing__banner-content { | |
| max-width: 100%; | |
| padding-top: 250px; | |
| } | |
| .landing__banner-content h1 { | |
| font-size: 36px !important; | |
| line-height: 50px !important; | |
| } | |
| .landing__banner-content a { | |
| margin-top: 50px; | |
| } | |
| .donate__box-wrapper { | |
| grid-template-columns: repeat(1, 1fr); | |
| } | |
| section, | |
| footer { | |
| padding-left: 30px !important; | |
| padding-right: 30px !important; | |
| } | |
| .contact__form-left { | |
| padding-right: 0; | |
| } | |
| .contact__form-left p { | |
| max-width: 100%; | |
| } | |
| } | |
| @media (max-width: 575.98px) { | |
| .contact__form-left h3 { | |
| font-size: 22px !important; | |
| line-height: 30px !important; | |
| margin-bottom: 10px; | |
| } | |
| .contact__form-left p { | |
| font-size: 18px !important; | |
| line-height: 32px !important; | |
| } | |
| .contact__field-wrap { | |
| grid-template-columns: repeat(1, 1fr); | |
| row-gap: 20px; | |
| } | |
| .contact__email-field { | |
| grid-column: initial; | |
| } | |
| .contact__input-style { | |
| height: 48px; | |
| } | |
| .comment__field { | |
| height: 100px; | |
| grid-column: initial; | |
| } | |
| .contact__form-right { | |
| margin-top: 30px; | |
| } | |
| .footer__right { | |
| text-align: left; | |
| margin-top: 30px; | |
| } | |
| .footer__logo-info p { | |
| font-size: 16px !important; | |
| line-height: 26px !important; | |
| } | |
| .footer__box { | |
| padding-top: 30px; | |
| padding-bottom: 30px; | |
| flex-direction: column; | |
| } | |
| .header__content { | |
| flex-direction: column; | |
| } | |
| .header__logo svg { | |
| width: auto; | |
| margin-bottom: 5px; | |
| } | |
| .header__content p { | |
| font-size: 24px !important; | |
| line-height: 28px !important; | |
| margin-top: -5px; | |
| } | |
| .landing__banner-content h1 { | |
| font-size: 26px !important; | |
| line-height: 36px !important; | |
| } | |
| .landing__banner { | |
| height: 650px; | |
| } | |
| .federal__students-heading { | |
| font-size: 26px !important; | |
| line-height: 36px !important; | |
| } | |
| .federal__students-content { | |
| padding: 0; | |
| } | |
| .federal__students-text { | |
| padding: 25px; | |
| padding-top: 0; | |
| } | |
| .federal__students-text p { | |
| font-size: 20px !important; | |
| line-height: 36px !important; | |
| } | |
| .federal__students-image img { | |
| height: 285px; | |
| } | |
| .federal__students { | |
| padding-top: 50px; | |
| padding-bottom: 50px; | |
| } | |
| .single__donate-box h5 { | |
| font-size: 22px !important; | |
| line-height: 30px !important; | |
| margin-bottom: 20px; | |
| } | |
| .single__donate-box p { | |
| font-size: 20px !important; | |
| line-height: 36px !important; | |
| } | |
| .single__donate-box a { | |
| font-size: 18px !important; | |
| line-height: 22px !important; | |
| margin-top: 30px; | |
| } | |
| .full__width-box h5 { | |
| max-width: 100%; | |
| } | |
| .strategy__area { | |
| padding: 50px 0; | |
| } | |
| .strategy__content h5 { | |
| font-size: 26px !important; | |
| line-height: 36px !important; | |
| margin-bottom: 20px; | |
| } | |
| .strategy__content p { | |
| font-size: 20px !important; | |
| line-height: 36px !important; | |
| } | |
| .strategy__content { | |
| padding-right: 0; | |
| } | |
| .strategy__items li { | |
| font-size: 20px; | |
| line-height: 24px; | |
| margin-bottom: 15px; | |
| align-items: initial; | |
| } | |
| .strategy__items li span { | |
| margin-right: 10px; | |
| } | |
| .federal__students-image { | |
| margin-bottom: 20px; | |
| } | |
| #page-theme [data-bach-id='DED80AC7-CB93-5FA4-464A-8F0BCD72A316'] { | |
| padding: 0px !important; | |
| } | |
| section, | |
| footer { | |
| padding-left: 20px !important; | |
| padding-right: 20px !important; | |
| } | |
| } | |
| /* Responsive Code */ | |
| </style> | |
| <!-- Contact Section --> | |
| <section class="contact__form"> | |
| <div class="container"> | |
| <div class="contact__form-area"> | |
| <div class="contact__form-left"> | |
| <h3>Will You Consider Signing the Petition?</h3> | |
| <p> | |
| If you have concerns, questions, or suggestions, | |
| we would like to hear from you. Please complete | |
| and submit your comments. | |
| </p> | |
| </div> | |
| <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=IBM+Plex+Sans:wght@500&display=swap" | |
| rel="stylesheet"> | |
| <!-- <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100&family=Open+Sans:wght@300&display=swap" rel="stylesheet"> --> | |
| <div class="contact__form-right"> | |
| <form method="POST" action="https://cfored.activehosted.com/proc.php" id="_form_16_" novalidate> | |
| <div class="contact__field-wrap"> | |
| <input type="hidden" name="u" value="16" /> | |
| <input type="hidden" name="f" value="16" /> | |
| <input type="hidden" name="s" /> | |
| <input type="hidden" name="c" value="0" /> | |
| <input type="hidden" name="m" value="0" /> | |
| <input type="hidden" name="act" value="sub" /> | |
| <input type="hidden" name="v" value="2" /> | |
| <input class="contact__input-style" type="text" id="firstname" name="firstname" | |
| placeholder="First Name" required /> | |
| <input class="contact__input-style" type="text" id="lastname" name="lastname" | |
| placeholder="Last Name" required /> | |
| <input class="contact__input-style contact__email-field" type="text" id="email" name="email" | |
| placeholder="Email" required /> | |
| <input class="contact__input-style comment__field" type="textarea" rows="0" id="field[8]" | |
| name="field[8]" value="" placeholder="Comments" /> | |
| <input type="hidden" data-callback="recaptchaTest" class="g-recaptcha-response" | |
| name="g-recaptcha-response"> | |
| </div> | |
| <div class="_button-wrapper _full_width"> | |
| <button id="_form_16_submit" class="comment__btn" type="submit"> | |
| Comments | |
| </button> | |
| </div> | |
| <div class="_clear-element"> | |
| </div> | |
| </div> | |
| <div class="_form-thank-you" style="display:none;"> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script type="text/javascript"> | |
| let check_recaptcha = false; | |
| function recaptchaTest() { | |
| check_recaptcha = true; | |
| } | |
| function thankYou() { | |
| const fname = document.getElementById("firstname").value; | |
| const lname = document.getElementById("lastname").value; | |
| const mail = document.getElementById("email").value; | |
| if (fname === "" || lname === "" || mail === "") { } | |
| else { | |
| window.location.href = "https://cfored.ac-page.com/thank-you"; | |
| } | |
| } | |
| window.cfields = { "8": "comments" }; | |
| window._show_thank_you = function (id, message, trackcmp_url, email) { | |
| var form = document.getElementById('_form_' + id + '_'), thank_you = form.querySelector('._form-thank-you'); | |
| form.querySelector('._form-content').style.display = 'none'; | |
| thank_you.innerHTML = message; | |
| thank_you.style.display = 'block'; | |
| const vgoAlias = typeof visitorGlobalObjectAlias === 'undefined' ? 'vgo' : visitorGlobalObjectAlias; | |
| var visitorObject = window[vgoAlias]; | |
| if (email && typeof visitorObject !== 'undefined') { | |
| visitorObject('setEmail', email); | |
| visitorObject('update'); | |
| } else if (typeof (trackcmp_url) != 'undefined' && trackcmp_url) { | |
| // Site tracking URL to use after inline form submission. | |
| _load_script(trackcmp_url); | |
| } | |
| if (typeof window._form_callback !== 'undefined') window._form_callback(id); | |
| }; | |
| window._show_error = function (id, message, html) { | |
| var form = document.getElementById('_form_' + id + '_'), err = document.createElement('div'), button = form.querySelector('button'), old_error = form.querySelector('._form_error'); | |
| if (old_error) old_error.parentNode.removeChild(old_error); | |
| err.innerHTML = ""; | |
| err.className = '_error-inner _form_error _no_arrow'; | |
| var wrapper = document.createElement('div'); | |
| wrapper.className = '_form-inner'; | |
| wrapper.appendChild(err); | |
| button.parentNode.insertBefore(wrapper, button); | |
| document.querySelector('[id^="_form"][id$="_submit"]').disabled = false; | |
| if (html) { | |
| var div = document.createElement('div'); | |
| div.className = '_error-html'; | |
| div.innerHTML = html; | |
| err.appendChild(div); | |
| } | |
| }; | |
| window._load_script = function (url, callback) { | |
| var head = document.querySelector('head'), script = document.createElement('script'), r = false; | |
| script.type = 'text/javascript'; | |
| script.charset = 'utf-8'; | |
| script.src = url; | |
| if (callback) { | |
| script.onload = script.onreadystatechange = function () { | |
| if (!r && (!this.readyState || this.readyState == 'complete')) { | |
| r = true; | |
| callback(); | |
| } | |
| }; | |
| } | |
| head.appendChild(script); | |
| }; | |
| (function () { | |
| if (window.location.search.search("excludeform") !== -1) return false; | |
| var getCookie = function (name) { | |
| var match = document.cookie.match(new RegExp('(^|; )' + name + '=([^;]+)')); | |
| return match ? match[2] : null; | |
| } | |
| var setCookie = function (name, value) { | |
| var now = new Date(); | |
| var time = now.getTime(); | |
| var expireTime = time + 1000 * 60 * 60 * 24 * 365; | |
| now.setTime(expireTime); | |
| document.cookie = name + '=' + value + '; expires=' + now + ';path=/'; | |
| } | |
| var addEvent = function (element, event, func) { | |
| if (element.addEventListener) { | |
| element.addEventListener(event, func); | |
| } else { | |
| var oldFunc = element['on' + event]; | |
| element['on' + event] = function () { | |
| oldFunc.apply(this, arguments); | |
| func.apply(this, arguments); | |
| }; | |
| } | |
| } | |
| var _removed = false; | |
| var form_to_submit = document.getElementById('_form_16_'); | |
| var allInputs = form_to_submit.querySelectorAll('input, select, textarea'), tooltips = [], submitted = false; | |
| var getUrlParam = function (name) { | |
| var regexStr = '[\?&]' + name + '=([^&#]*)'; | |
| var results = new RegExp(regexStr, 'i').exec(window.location.href); | |
| return results != undefined ? decodeURIComponent(results[1]) : false; | |
| }; | |
| for (var i = 0; i < allInputs.length; i++) { | |
| var regexStr = "field\\[(\\d+)\\]"; | |
| var results = new RegExp(regexStr).exec(allInputs[i].name); | |
| if (results != undefined) { | |
| allInputs[i].dataset.name = window.cfields[results[1]]; | |
| } else { | |
| allInputs[i].dataset.name = allInputs[i].name; | |
| } | |
| var fieldVal = getUrlParam(allInputs[i].dataset.name); | |
| if (fieldVal) { | |
| if (allInputs[i].dataset.autofill === "false") { | |
| continue; | |
| } | |
| if (allInputs[i].type == "radio" || allInputs[i].type == "checkbox") { | |
| if (allInputs[i].value == fieldVal) { | |
| allInputs[i].checked = true; | |
| } | |
| } else { | |
| allInputs[i].value = fieldVal; | |
| } | |
| } | |
| } | |
| var remove_tooltips = function () { | |
| for (var i = 0; i < tooltips.length; i++) { | |
| tooltips[i].tip.parentNode.removeChild(tooltips[i].tip); | |
| } | |
| tooltips = []; | |
| }; | |
| var remove_tooltip = function (elem) { | |
| for (var i = 0; i < tooltips.length; i++) { | |
| if (tooltips[i].elem === elem) { | |
| tooltips[i].tip.parentNode.removeChild(tooltips[i].tip); | |
| tooltips.splice(i, 1); | |
| return; | |
| } | |
| } | |
| }; | |
| var create_tooltip = function (elem, text) { | |
| var tooltip = document.createElement('div'), arrow = document.createElement('div'), inner = document.createElement('div'), new_tooltip = {}; | |
| if (elem.type != 'radio' && elem.type != 'checkbox') { | |
| tooltip.className = '_error'; | |
| arrow.className = '_error-arrow'; | |
| inner.className = '_error-inner'; | |
| tooltip.style.color = "red"; | |
| inner.innerHTML = text; | |
| tooltip.appendChild(arrow); | |
| tooltip.appendChild(inner); | |
| elem.parentNode.appendChild(tooltip); | |
| } else { | |
| tooltip.className = '_error-inner _no_arrow'; | |
| tooltip.innerHTML = text; | |
| elem.parentNode.insertBefore(tooltip, elem); | |
| new_tooltip.no_arrow = true; | |
| } | |
| new_tooltip.tip = tooltip; | |
| new_tooltip.elem = elem; | |
| tooltips.push(new_tooltip); | |
| return new_tooltip; | |
| }; | |
| var resize_tooltip = function (tooltip) { | |
| var rect = tooltip.elem.getBoundingClientRect(); | |
| var doc = document.documentElement, scrollPosition = rect.top - ((window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)); | |
| if (scrollPosition < 40) { | |
| tooltip.tip.className = tooltip.tip.className.replace(/ ?(_above|_below) ?/g, '') + ' _below'; | |
| } else { | |
| tooltip.tip.className = tooltip.tip.className.replace(/ ?(_above|_below) ?/g, '') + ' _above'; | |
| } | |
| }; | |
| var resize_tooltips = function () { | |
| if (_removed) return; | |
| for (var i = 0; i < tooltips.length; i++) { | |
| if (!tooltips[i].no_arrow) resize_tooltip(tooltips[i]); | |
| } | |
| }; | |
| var validate_field = function (elem, remove) { | |
| var tooltip = null, value = elem.value, no_error = true; | |
| remove ? remove_tooltip(elem) : false; | |
| if (elem.type != 'checkbox') elem.className = elem.className.replace(/ ?_has_error ?/g, ''); | |
| if (elem.getAttribute('required') !== null) { | |
| if (elem.type == 'radio' || (elem.type == 'checkbox' && /any/.test(elem.className))) { | |
| var elems = form_to_submit.elements[elem.name]; | |
| if (!(elems instanceof NodeList || elems instanceof HTMLCollection) || elems.length <= 1) { | |
| no_error = elem.checked; | |
| } | |
| else { | |
| no_error = false; | |
| for (var i = 0; i < elems.length; i++) { | |
| if (elems[i].checked) no_error = true; | |
| } | |
| } | |
| if (!no_error) { | |
| tooltip = create_tooltip(elem, "Please select an option."); | |
| } | |
| } | |
| else if (elem.type == 'checkbox') { | |
| var elems = form_to_submit.elements[elem.name], found = false, err = []; | |
| no_error = true; | |
| for (var i = 0; i < elems.length; i++) { | |
| if (elems[i].getAttribute('required') === null) continue; | |
| if (!found && elems[i] !== elem) return true; | |
| found = true; | |
| elems[i].className = elems[i].className.replace(/ ?_has_error ?/g, ''); | |
| if (!elems[i].checked) { | |
| no_error = false; | |
| elems[i].className = elems[i].className + ' _has_error'; | |
| err.push("Checking %s is required".replace("%s", elems[i].value)); | |
| } | |
| } | |
| if (!no_error) { | |
| tooltip = create_tooltip(elem, err.join('<br/>')); | |
| } | |
| } | |
| else if (elem.tagName == 'SELECT') { | |
| var selected = true; | |
| if (elem.multiple) { | |
| selected = false; | |
| for (var i = 0; i < elem.options.length; i++) { | |
| if (elem.options[i].selected) { | |
| selected = true; | |
| break; | |
| } | |
| } | |
| } else { | |
| for (var i = 0; i < elem.options.length; i++) { | |
| if (elem.options[i].selected && !elem.options[i].value) { | |
| selected = false; | |
| } | |
| } | |
| } | |
| if (!selected) { | |
| elem.className = elem.className + ' _has_error'; | |
| no_error = false; | |
| tooltip = create_tooltip(elem, "Please select an option."); | |
| } | |
| } | |
| else if (value === undefined || value === null || value === '') { | |
| elem.className = elem.className + ' _has_error'; | |
| no_error = false; | |
| if (elem === document.getElementById("email")) | |
| tooltip = create_tooltip(elem, "Missing Email Address"); | |
| if (elem === document.getElementById("firstname")) | |
| tooltip = create_tooltip(elem, "Missing First Name"); | |
| if (elem === document.getElementById("lastname")) | |
| tooltip = create_tooltip(elem, "Missing Last Name"); | |
| } | |
| } | |
| if (no_error && elem.name == 'email') { | |
| if (!value.match(/^[\+_a-z0-9-'&=]+(\.[\+_a-z0-9-']+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/i)) { | |
| elem.className = elem.className + ' _has_error'; | |
| no_error = false; | |
| tooltip = create_tooltip(elem, "Enter a valid email address."); | |
| } | |
| } | |
| if (no_error && /date_field/.test(elem.className)) { | |
| if (!value.match(/^\d\d\d\d-\d\d-\d\d$/)) { | |
| elem.className = elem.className + ' _has_error'; | |
| no_error = false; | |
| tooltip = create_tooltip(elem, "Enter a valid date."); | |
| } | |
| } | |
| tooltip ? resize_tooltip(tooltip) : false; | |
| return no_error; | |
| }; | |
| var needs_validate = function (el) { | |
| if (el.getAttribute('required') !== null) { | |
| return true | |
| } | |
| if (el.name === 'email' && el.value !== "") { | |
| return true | |
| } | |
| return false | |
| }; | |
| var validate_form = function (e) { | |
| var err = form_to_submit.querySelector('._form_error'), no_error = true; | |
| if (!submitted) { | |
| submitted = true; | |
| for (var i = 0, len = allInputs.length; i < len; i++) { | |
| var input = allInputs[i]; | |
| if (needs_validate(input)) { | |
| if (input.type == 'text') { | |
| addEvent(input, 'blur', function () { | |
| this.value = this.value.trim(); | |
| validate_field(this, true); | |
| }); | |
| addEvent(input, 'input', function () { | |
| validate_field(this, true); | |
| }); | |
| } else if (input.type == 'radio' || input.type == 'checkbox') { | |
| (function (el) { | |
| var radios = form_to_submit.elements[el.name]; | |
| for (var i = 0; i < radios.length; i++) { | |
| addEvent(radios[i], 'click', function () { | |
| validate_field(el, true); | |
| }); | |
| } | |
| })(input); | |
| } else if (input.tagName == 'SELECT') { | |
| addEvent(input, 'change', function () { | |
| validate_field(this, true); | |
| }); | |
| } else if (input.type == 'textarea') { | |
| addEvent(input, 'input', function () { | |
| validate_field(this, true); | |
| }); | |
| } | |
| } | |
| } | |
| } | |
| remove_tooltips(); | |
| for (var i = 0, len = allInputs.length; i < len; i++) { | |
| var elem = allInputs[i]; | |
| if (needs_validate(elem)) { | |
| if (elem.tagName.toLowerCase() !== "select") { | |
| elem.value = elem.value.trim(); | |
| } | |
| validate_field(elem) ? true : no_error = false; | |
| } | |
| } | |
| if (!no_error && e) { | |
| e.preventDefault(); | |
| } | |
| resize_tooltips(); | |
| return no_error; | |
| }; | |
| addEvent(window, 'resize', resize_tooltips); | |
| addEvent(window, 'scroll', resize_tooltips); | |
| window['recaptcha_callback'] = function () { | |
| } | |
| // Get all recaptchas in the DOM (there may be more than one form on the page). | |
| var siteKey = '6LcwIw8TAAAAACP1ysM08EhCgzd6q5JAOUR1a0Go'; | |
| _load_script("//www.google.com/recaptcha/api.js?render=" + siteKey); | |
| var forms = document.getElementsByTagName('form'); | |
| for (var i = 0; i < forms.length; i++) { | |
| var cForm = forms[i]; | |
| var recaptchaResponseInput = cForm.querySelectorAll('input.g-recaptcha-response'); | |
| if (recaptchaResponseInput.length > 0) { | |
| cForm.addEventListener("submit", function (e) { | |
| grecaptcha.ready(function () { | |
| grecaptcha.execute(siteKey, { action: 'subscribe_newsletter' }).then(function (token) { | |
| for (var j = 0; j < recaptchaResponseInput.length; j++) { | |
| recaptchaResponseInput[j].value = token; | |
| } | |
| }); | |
| }); | |
| }); | |
| } | |
| } | |
| window._old_serialize = null; | |
| if (typeof serialize !== 'undefined') window._old_serialize = window.serialize; | |
| _load_script("//d3rxaij56vjege.cloudfront.net/form-serialize/0.3/serialize.min.js", function () { | |
| window._form_serialize = window.serialize; | |
| if (window._old_serialize) window.serialize = window._old_serialize; | |
| }); | |
| var form_submit = function (e) { | |
| e.preventDefault(); | |
| if (validate_form()) { | |
| // use this trick to get the submit button & disable it using plain javascript | |
| document.querySelector('#_form_16_submit').disabled = true; | |
| var serialized = _form_serialize(document.getElementById('_form_16_')).replaceAll('%0A', '\\n'); | |
| var err = form_to_submit.querySelector('._form_error'); | |
| err ? err.parentNode.removeChild(err) : false; | |
| _load_script('https://cfored.activehosted.com/proc.php?' + serialized + '&jsonp=true'); | |
| } | |
| return false; | |
| }; | |
| addEvent(form_to_submit, 'submit', form_submit); | |
| })(); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment