- This topic has 12 replies, 3 voices, and was last updated 2 years, 11 months ago by Ying.
-
AuthorPosts
-
April 11, 2021 at 9:01 am #1730047Juned
Hi,
Where to copy this HTML Code to display Subscription Form at my site:
`<form action=”https://api.elasticemail.com/contact/add?version=2″ 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” 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’ xmlns:xlink=’http://www.w3.org/1999/xlink’ 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’ 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’ xmlns:xlink=’http://www.w3.org/1999/xlink’ 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’ 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>
April 11, 2021 at 10:39 am #1730147YingStaffCustomer SupportHi 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 🙂
April 11, 2021 at 9:37 pm #1730478JunedWhat is HTML widget?
April 11, 2021 at 10:02 pm #1730485ElvinStaffCustomer SupportHi 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.
April 11, 2021 at 10:21 pm #1730502JunedHey 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.
April 11, 2021 at 10:45 pm #1730517JunedIf 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??
April 11, 2021 at 11:09 pm #1730534ElvinStaffCustomer SupportPlease 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.
April 12, 2021 at 12:13 am #1730600JunedThis was done by using shortcodes.
April 12, 2021 at 8:51 am #1731431YingStaffCustomer SupportIt 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/RhdPnL49pukYLet me know 🙂
April 12, 2021 at 9:12 am #1731453JunedHey,
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.
April 12, 2021 at 9:50 am #1731498YingStaffCustomer SupportThat sounds right 🙂
Nice job!
April 12, 2021 at 9:52 am #1731499JunedAll because of the backing of right and master people.
Professor listening?
April 12, 2021 at 10:06 am #1731513YingStaffCustomer SupportThank you 😛
-
AuthorPosts
- You must be logged in to reply to this topic.