[Resolved] Web Form’s HTML Code

Home Forums Support [Resolved] Web Form’s HTML Code

Home Forums Support Web Form’s HTML Code

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1730047
    Juned

    Hi,

    Where to copy this HTML Code to display Subscription Form at my site:

    `<form action=”https://api.elasticemail.com/contact/add?version=2&#8243; data-id=”nTMIbTaubR” method=”post” id=”ewf_subscriptionForm_nTMIbTaubR” class=”EWF__form Inline”>

    <h4 id=”ewf_formheader” class=”EWF__header”>Subscribe to our newsletter
    </h4>
    <p id=”ewf_formdesc”>Enter specific and clear language on the intended use of the collected information.
    </p>

    <fieldset style=”border:none;” class=”webform-custominputs”>

    <label for=”email” class=”requiredInput”>Email
    </label>
    <input maxlength=”60″ class=”form-control webform__form-control” name=”email” size=”20″ type=”email” required=”” placeholder=”Please enter your email address”>
    <label for=”field_firstname”>First name
    </label>
    <input maxlength=”60″ class=”form-control webform__form-control” name=”field_firstname” size=”20″ type=”text” false=”” placeholder=”Please enter your first name”>
    <label for=”field_lastname”>Last name
    </label>
    <input maxlength=”60″ class=”form-control webform__form-control” name=”field_lastname” size=”20″ type=”text” false=”” placeholder=”Please enter your last name”>
    <label class=”container-box”>
    <input type=”checkbox” name=”publiclistid” id=”WVxZtnxE” value=”974c238e-0861-470d-9193-3972d4848daf”>
    </label>
    <label class=”publiclistlabel” for=”WVxZtnxE”>I am Consumer
    </label>
    <label class=”container-box”>
    <input type=”checkbox” name=”publiclistid” id=”lGitPMMk” value=”f5e4db4f-7ce4-4cee-9499-890513f8b990″>
    </label>
    <label class=”publiclistlabel” for=”lGitPMMk”>I am Reseller
    </label>

    <p id=”ewf_datadisclaimer”>We use Elastic Email as our marketing automation service. By submitting this form, you agree that the information you provide will be transferred to Elastic Email for processing in accordance with their
    Terms of Use and
    Privacy Policy.
    </p>
    </fieldset>
    <fieldset class=”webform-options style-updated” style=”border:none;”>

    <script type=”text/javascript”>var grecaptchaready = function () { var eewebformsubmit = document.getElementById(“eesubmit”); grecaptcha.render(‘webformcaptcha’, { ‘sitekey’: ‘6Lca-iUUAAAAAAQ6T6vYEAp3YybZWpeKUXRJ5E8S’, ‘callback’: function (response) { if (response) { eewebformsubmit.disabled = false; } } }); }</script>

    <script id=”recaptchaScript” src=”https://www.google.com/recaptcha/api.js?onload=grecaptchaready&render=explicit&#8221; async=”” defer=””>
    </script>
    <input type=”submit” name=”submit” value=”Subscribe” id=”eesubmit” class=”EWF__subscribe” disabled=””>
    <input type=”hidden” name=”publicaccountid” value=”4798d76d-46c4-4c6e-8c5f-b926ecb45f4d”>
    <input type=”hidden” name=”returnUrl” value=””>
    <input type=”hidden” name=”activationReturnUrl” value=””>
    <input type=”hidden” name=”alreadyactiveurl” value=””>
    <input type=”hidden” name=”activationTemplate” value=””>
    <input type=”hidden” name=”source” value=”WebForm”>
    <input type=”hidden” name=”verifyemail” value=”false” id=”ewf_verifyEmails”>
    <input type=”hidden” id=”ewf_captcha” name=”captcha” value=”true”>
    <input type=”hidden” name=”notifyEmail” value=””>
    <button type=”button” name=”dismissForm” id=”ewf_dismissForm” style=”display:none; position: absolute; top: 0; right: 0; float: right”>X
    </button>
    </fieldset>

    <style id=”webform__main-styles”>form.EWF__form {
    background:#f0f2f8;
    padding-top:40px;
    padding-left:40px;
    padding-bottom:40px;
    padding-right:40px;
    border-radius:6px;
    box-sizing:border-box;
    box-shadow:0px 0px 0px rgba(0, 0, 0, 0);
    }
    form.EWF__form p {
    color:#7d8da8;
    text-align:left;
    line-height:14px;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    margin:12px 0;
    font-style:normal;
    font-weight:normal;
    }
    form.EWF__form .EWF__header {
    background:transparent;
    padding-top:0px;
    color:#32325c;
    padding-left:0px;
    padding-bottom:0px;
    padding-right:0px;
    text-align:left;
    line-height:24px;
    font-size:22px;
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    font-style:normal;
    font-weight:bold;
    }
    form.EWF__form label {
    line-height:16px;
    font-size:14px;
    color:#32325c;
    display:block;
    font-family:Arial, Helvetica, sans-serif;
    margin-bottom:5px;
    font-style:normal;
    font-weight:bold;
    text-align:left;
    }
    form.EWF__form .EWF__subscribe {
    background:#6262fe;
    padding-top:12px;
    line-height:18px;
    font-size:16px;
    color:#ffffff;
    padding-left:12px;
    padding-bottom:12px;
    padding-right:12px;
    border-radius:6px;
    border:0;
    display:inline-block;
    width:auto;
    max-width:100%;
    font-family:Arial, Helvetica, sans-serif;
    font-style:normal;
    font-weight:normal;
    }
    .EWF__form .webform-options {
    text-align:center;
    }
    form.EWF__form input {
    background:#ffffff;
    padding-top:12px;
    color:#000000;
    padding-left:12px;
    padding-bottom:12px;
    padding-right:12px;
    border-radius:0px;
    line-height:18px;
    font-size:16px;
    border:0;
    width:100%;
    max-width:100%;
    display:block;
    font-family:Arial, Helvetica, sans-serif;
    font-style:normal;
    font-weight:normal;
    text-align:left;
    }
    form.EWF__form input::placeholder {
    color:#000000;
    font-size:14px;
    }
    form.EWF__form .inputs > div {
    margin-bottom:1rem;
    }
    form.EWF__form .checkboxes label,form.EWF__form .consent label {
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }
    form.EWF__form * {
    box-sizing:border-box;
    }
    form.EWF__form fieldset {
    display:block;
    padding:0;
    margin:0;
    }
    form.EWF__form .checkboxes input[type=”checkbox”],form.EWF__form .consent input[type=”checkbox”] {
    border: 1px solid #CFD6DB;
    border-radius: 4px;
    padding: 12px;
    width: 0;
    display: inline-block;
    margin-right: 20px;
    }
    form.EWF__form .checkboxes input[type=”checkbox”]:before,form.EWF__form .consent input[type=”checkbox”]:before {
    background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg&#8217; xmlns:xlink=’http://www.w3.org/1999/xlink&#8217; version=’1.1′ id=’Warstwa_1′ x=’0px’ y=’0px’ viewBox=’0 0 16 16′ style=’enable-background:new 0 0 16 16;’ xml:space=’preserve’ width=’16’ height=’16’%3E%3Cstyle type=’text/css’%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23FFFFFF;stroke:%23CFD6DB;%7D%0A%3C/style%3E%3Cg transform=’translate(-925 -324)’%3E%3Cg transform=’translate(925 324)’%3E%3Cpath class=’st0′ d=’M4,0h8c2.2,0,4,1.8,4,4v8c0,2.2-1.8,4-4,4H4c-2.2,0-4-1.8-4-4V4C0,1.8,1.8,0,4,0z’/%3E%3Cpath class=’st1′ d=’M4,0.5h8c1.9,0,3.5,1.6,3.5,3.5v8c0,1.9-1.6,3.5-3.5,3.5H4c-1.9,0-3.5-1.6-3.5-3.5V4C0.5,2.1,2.1,0.5,4,0.5z’/%3E%3C/g%3E%3C/g%3E%3C/svg%3E”);
    background-color: #fff;
    width: 16px;
    height: 16px;
    content: ”;
    display: block;
    cursor: pointer;
    border-radius: 4px;
    }
    form.EWF__form .checkboxes input[type=”checkbox”]:hover:before,form.EWF__form .consent input[type=”checkbox”]:hover:before {
    background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg&#8217; width=’16’ height=’16’ viewBox=’0 0 16 16’%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23fff;stroke:%235457ff;stroke-width:2px;%7D.b%7Bstroke:none;%7D.c%7Bfill:none;%7D%3C/style%3E%3C/defs%3E%3Cg transform=’translate(-925 -324)’%3E%3Cg class=’a’ transform=’translate(925 324)’%3E%3Crect class=’b’ width=’16’ height=’16’ rx=’4’/%3E%3Crect class=’c’ x=’1′ y=’1′ width=’14’ height=’14’ rx=’3’/%3E%3C/g%3E%3C/g%3E%3C/svg%3E”);
    background-color: #fff;
    }
    form.EWF__form .checkboxes input[type=”checkbox”]:checked:before,form.EWF__form .consent input[type=”checkbox”]:checked:before {
    background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg&#8217; xmlns:xlink=’http://www.w3.org/1999/xlink&#8217; version=’1.1′ id=’Warstwa_1′ x=’0px’ y=’0px’ viewBox=’0 0 16 16′ style=’enable-background:new 0 0 16 16;’ xml:space=’preserve’ width=’16’ height=’16’%3E%3Cstyle type=’text/css’%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23FFFFFF;stroke:%235457FF;%7D .st2%7Bfill:%2332325C;%7D%0A%3C/style%3E%3Cg transform=’translate(-925 -324)’%3E%3Cg transform=’translate(925 324)’%3E%3Cpath class=’st0′ d=’M4,0h8c2.2,0,4,1.8,4,4v8c0,2.2-1.8,4-4,4H4c-2.2,0-4-1.8-4-4V4C0,1.8,1.8,0,4,0z’/%3E%3Cpath class=’st1′ d=’M4,0.5h8c1.9,0,3.5,1.6,3.5,3.5v8c0,1.9-1.6,3.5-3.5,3.5H4c-1.9,0-3.5-1.6-3.5-3.5V4C0.5,2.1,2.1,0.5,4,0.5z’/%3E%3C/g%3E%3Cpath class=’st2′ d=’M938,328.9l-0.8-0.8c-0.1-0.1-0.1-0.1-0.2,0c0,0,0,0,0,0l-5.6,5.9l-2.3-2.4c-0.1-0.1-0.1-0.1-0.2,0 c0,0,0,0,0,0l-0.8,0.8c-0.1,0.1-0.1,0.2,0,0.2l3.2,3.3c0.1,0.1,0.1,0.1,0.2,0c0,0,0,0,0,0l6.5-6.9C938,329,938,328.9,938,328.9z’/%3E%3C/g%3E%3C/svg%3E”);
    background-color: #fff;
    }
    form.EWF__form .checkboxes input[type=”checkbox”]:hover:checked:before,form.EWF__form .consent input[type=”checkbox”]:hover:checked:before {
    background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg&#8217; width=’16’ height=’16’ viewBox=’0 0 16 16’%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23fff;stroke:%235457ff;stroke-width:2px;%7D.b%7Bfill:%2332325c;%7D.c%7Bstroke:none;%7D.d%7Bfill:none;%7D%3C/style%3E%3C/defs%3E%3Cg transform=’translate(-925 -324)’%3E%3Cg class=’a’ transform=’translate(925 324)’%3E%3Crect class=’c’ width=’16’ height=’16’ rx=’4’/%3E%3Crect class=’d’ x=’1′ y=’1′ width=’14’ height=’14’ rx=’3’/%3E%3C/g%3E%3Cpath class=’b’ d=’M10.032.964,9.224.118a.141.141,0,0,0-.2,0L3.384,6.02,1.124,3.653a.141.141,0,0,0-.2,0L.116,4.5a.157.157,0,0,0,0,.212L3.284,8.032a.141.141,0,0,0,.2,0l6.545-6.855A.153.153,0,0,0,10.032.964Z’ transform=’translate(927.925 327.925)’/%3E%3C/g%3E%3C/svg%3E”);
    background-color: #fff;
    }
    form.EWF__form .EWF__error {
    color: red;
    padding-top: 10px;
    }
    form.EWF__form a {
    color:#5457ff;
    font-style:normal;
    line-height:14px;
    font-size:12px;
    font-weight:normal;
    }
    @supports (-ms-ime-align:auto) {
    form.EWF__form .checkboxes input[type=’checkbox’], form.EWF__form .consent input[type=’checkbox’] {
    width: 16px !important;
    margin-right: 5px;
    }
    }
    </style>

    </form>

    #1730147
    Ying
    Staff
    Customer Support

    Hi Juned,

    You could use an HTML widget or a hook element.
    https://docs.generatepress.com/article/hooks-element-overview/

    If you use a hook element, this visual guide should be helpful:
    https://docs.generatepress.com/article/hooks-visual-guide/

    Let me know 🙂

    #1730478
    Juned

    What is HTML widget?

    #1730485
    Elvin
    Staff
    Customer Support

    Hi there,

    Where do you want the code to appear?

    If you want to place it on a widget area, you can use the Custom HTML widget as shown here: https://share.getcloudapp.com/YEuRo9Pw

    You can place it on any of the widget areas on the right side depending on where you want it to display.

    Alternative to this is what Ying suggested which are:

    Custom HTML Block within the block editor, placed on a Block Element, hooked to a specific hook of your choice.

    Or, you can paste your HTML code directly on a Hook Element’s code area and set its hook to a specific hook of your choice.

    #1730502
    Juned

    Hey Elvin,

    I am creating multiple web forms. I want to display it to various pages.

    Earlier I was using shortcodes to display forms.

    But now these are with HTML Code.

    Please guide me how to display these web forms correctly using HTML Code at pages.

    #1730517
    Juned

    If I use HTML Code to display forms at pages by using Hook Element, then:

    “Or, you can paste your HTML code directly on a Hook Element’s code area and set its hook to a specific hook of your choice.”

    Should I enable: Execute Shortcodes??

    #1730534
    Elvin
    Staff
    Customer Support

    Please guide me how to display these web forms correctly using HTML Code at pages.

    Can you tell us where on the page do you want it placed and what pages do you want it to display on so we could point you to the proper setting.

    Should I enable: Execute Shortcodes??

    You only need this if you’re using the shortcode for this form.

    If you’re using raw HTML code, there’s no need to enable this.

    #1730600
    Juned

    This was done by using shortcodes.

    #1731431
    Ying
    Staff
    Customer Support

    It looks the shorcodes are been added directly to the pages through page editor.

    In this case if you just want to replace those forms, you don’t need hook or HTML widget, just go to the page > edit the page > select the shorcode > edit as HTML, then replace the HTML with your code.
    https://www.screencast.com/t/RhdPnL49pukY

    Let me know 🙂

    #1731453
    Juned

    Hey,

    I got it finally.

    At page: I added Container – then inside that I added another Container (to set the desired form width) – then I selected custom HTML and pasted the HTML Code and saved.

    It’s working perfectly.

    Thanks a lot for the support you people have extended.

    #1731498
    Ying
    Staff
    Customer Support

    That sounds right 🙂

    Nice job!

    #1731499
    Juned

    All because of the backing of right and master people.

    Professor listening?

    #1731513
    Ying
    Staff
    Customer Support

    Thank you 😛

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.