how to use a Hubspot form embed code with a bootstrap form - forms

I have a client that uses hubspot for their tracking and thank you pages. I have created a landing page using bootstrap and within the page I have two forms. Both forms are the same and I want them to go to the same thank you page. The client has provided me with an embedd code but I am not sure how I can bridge the gap. Below I have listed my form code and the embed code. I basically want the user fields to be submitted into hubspot and for it to trigger the thank you page but I am not entirely sure this is possible. Any help would be appreciated.
<div class="col-lg-12 contact-form">
<div class="container">
<div class="formContainer">
<form role="form">
<div class="form-group">
<div class="col-sm-6 left-field">
<input type="text" class="bottom-form" id="firstname" placeholder="First Name">
</div>
<div class="col-sm-6 right-field">
<input type="text" class="bottom-form right-field" id="lastname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" class="bottom-form email" id="email" placeholder="email">
</div>
<div class="col-sm-12">
<button type="submit" class="submit bottom-submit">Download Now</button>
</div>
</div>
</form>
</div>
</div>
</div>
Here is the hubspot embedd code.
<!--[if lte IE 8]>
hbspt.forms.create({
css: '',
portalId: '2030148',
formId: 'd9005302-a859-4a39-9d47-74d8a1d25fb0'
});

Are you just looking to set the redirect with the embed code? If so, here is the addition to the embed code:
portalId: 'xxxxxx',
redirectUrl: 'url goes here',
formId: 'd9005302-a859-4a39-9d47-74d8a1d25fb0'

I actually figured out a proper solution without having to do any redirects or hairy coding.
First I setup a local host, which was my biggest issue, this helps with getting the actual hubspot form to show within my page (using a local show the embedd code does not appear, although obvious to others, it took me a sec). Oh, I should mention that the code is not necessary.
Once you have it showing you basically inspect the element and then add to the classes that hubspot spits out get it to look that way you want too.

Related

Bad request 400 in Odoo contact form. Session expired('Invalid CSRF token')

I am facing an error in Odoo v 10 with the contact form, when I press the send button it gives an exception:
Traceback (most recent call last):
File "/usr/lib/python2.7/dist-packages/odoo/addons/base/ir/ir_http.py", line 195, in _dispatch
result = request.dispatch()
File "/usr/lib/python2.7/dist-packages/odoo/http.py", line 823, in dispatch
raise werkzeug.exceptions.BadRequest('Session expired (invalid CSRF token)')
BadRequest: 400: Bad Request
If I add the code to load the CSRF token suggested in an issue of their Github to the form:
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
It leads me to a new blank page showing the word false.
In the "Web layout" I have the next javascript code:
<script type="text/javascript">
var odoo = {
csrf_token: "<t t-esc="request.csrf_token(None)"/>",
};
</script>
I don't know if this code was manually added or it came with Odoo by default because this is an inherited installation.
The "Contact us" block is configured with the Send an Email action and a valid Recipient email, the Thank You Page works.
This is the final code after adding the block (without the CSRF hidden input):
<section class="as-contact-us" style="background-image: url(/theme_laze/static/src/img/our-work.jpg)">
<div class="container">
... Company description elements ...
<div class="col-md-8">
<form action="/website_form/crm.lead" method="post" data-model_name="mail.mail" data-success_page="/page/website_crm.contactus_thanks" class="s_website_form form-horizontal container-fluid mt32" enctype="multipart/form-data">
<div class="ascu-form">
<div class="row">
<div class="col-md-6">
<input class="form-control o_website_form_input" name="contact_name" required="" placeholder="Your Name*" type="text"/>
</div>
<div class="col-md-6">
<input class="form-control o_website_form_input" name="email_from" required="" placeholder="Your Email*" type="text"/>
</div>
</div>
<div class="row">
<div class="col-md-12">
<textarea class="form-control o_website_form_input" name="description" required="" placeholder="Message*"/>
</div>
<div class="col-md-12">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<button class="creative-btn1 o_default_snippet_text">Send</button>
</div>
</div>
</div>
<input class="form-field" name="email_to" value="to#email.org" type="hidden"/>
</form>
</div>
... Div closures ...
</div>
</section>
Does somebody know where is the problem?
I wouldn't like to deactivate the CSRF protection.
I'ts a routing issue! See code below for "csrf=False" and insert to solve question.
# /project/admin/post/{menu.name}/{submenu.name}/insert
#http.route(['/project/admin/post/<string:project>/<string:area>/insert'],type='http', auth='user', ***csrf=False***, website=True)
I was facing the same issue just enable the cookies in chrome it resolved my issue.
Enable cookies using.
Click on chrome Setting
Click Advance>> privacy and security
Click on Site Setting
Click Cookies and Site Data
Enable given.

Angular JS bindings seem to stop working inside of ng-include

I'm using angular js. When I have a snippet that I put in ng-include instead of outright writing the html to the same file, the former doesn't seem to pick up my bindings for my input fields.
In other words, if the following snippet:
<form name="pickupForm" ng-submit="completeCheckoutPickup()" novalidate>
<div class="row checkout-input">
<div class="col-sm-12">
<div class="title">
PICK UP DATE & TIME
</div>
<span class="glyphicon glyphicon-calendar date-icon-color"></span>
<input type="date" ng-model="userDate" required>
<span class="glyphicon glyphicon-time date-icon-color"></span>
<input type="time" ng-model="userTime" required>
</div>
</div>
</form>
is included as
<div ng-include src="'/templates/account/checkout/checkout.pickup.desktop.html'"></div>
The angularjs bindings for the ng-model stop working.
Any ideas?
enter code here

How to submit form data with Zurb Foundation

I'm a beginner trying to set up my first form with Zurb Foundation, and I'm not able to find in the documentation the info on how to actually pass the data. It's just a basic contact form with name/email/message that I'd like sent to my email once people click the Submit button... and I don't know how to do that.
I apologize for the simple question, your help is greatly appreciated.
Zurb foundation is front end frame work for website design and development , if you want to submit the form or do server communications, please read some basics,
HTML form and input : http://www.w3schools.com/html/html_forms.asp
Submitting HTML form using Jquery AJAX :
Submitting HTML form using Jquery AJAX
AJAX - Send a Request To a Server : http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
The HTML part:
<form action="form_contact_process.php" method="POST" name="contact" id="contact">
<fieldset>
<legend>Contact form</legend>
<div class="row collapse">
<label for="name">Name</label>
<input type="text" name="name" id="name">
</div>
<div class="row collapse">
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div class="row collapse">
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone">
</div>
<div class="row collapse">
<label for="message">Message</label>
<textarea name="message" id="message" rows="5"></textarea>
</div>
<div class="row collapse">
<input class="button small large-12" type="submit" value="Submit">
</div>
</fieldset>
</form>
Then over at form_contact_process.php:
<?php
$name = $_POST['name'];
...
echo $name;

How to Add CAPTCHA ControlForm into page

I found CAPTCHA Control in Kentico and it's Types (Simple - Logic - Text) CAPTCHA
Now, how can I add it inside WebZone?
I tried using it as a WebPart but it's not like webparts can be added inside Zone
What Steps Should i Follow?
</div>
<div id="MessageForm">
<div class="feedback_form">
<h2>Feedback</h2>
<div class="feedback_input">
<span>Name</span><input class="text_feedback" type="text" value="" />
</div>
<div class="feedback_input">
<span>Email</span><input class="text_feedback" type="text" value="" />
</div>
<div class="feedback_input">
<span>Subject</span><input class="text_feedback" type="text" value="" />
</div>
<div class="feedback_input Message">
<span>Message</span><textarea class="Message_input" rows="4" cols="50"></textarea>
</div>
<div class="feedback_input">
<input class="send" type="submit" value="" />
<img src="image/Captcha.png" />
<input class="type_Captcha" type="text" value="Enter Captcha ... " />
</div>
</div>
</div>
</div>
That's what i'm trying to do.
Replace the html Code inside my form for this areaZone and put customize webpart if available to do the required function.
You can use out of the box functionality called Forms. See "Creating a new form" in documentation and just add CAPTCHA as one of the fields. Then use On-line form web part on your web site. That's all.

Do not understand form action right

This is the first time I've try to use a formulae to make a contact page on my site.
This is the code I use (and tried to adapt for my purposes):
<div id="main" class="content container bottom clearfix">
<div class="cont row">
<!-- FORM-->
<div class="form sevencol" style="width:52%">
<form action="mailto:contact#stefanseifert.com" id="contactForm" method="post">
<ul class="contactform">
<li><input type="text" name="contactName" id="contactName" value="" class="required requiredField"/>
<label for="contactName">Name</label>
</li>
<li>
<input type="text" name="email" id="email" value="" class="required requiredField email"/>
<label for="email">E-Mail</label>
</li>
<li class="textarea">
<textarea name="comments" id="commentsText" rows="10" cols="10" class=" required requiredField"></textarea>
</li>
<li>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6Lf-ueMSAAAAAExUbwjvdqnNuNjlkeN3_wQyl720"></script>
<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6Lf-ueMSAAAAAExUbwjvdqnNuNjlkeN3_wQyl720" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
</li>
<li class="buttons"><br>
<input type="hidden" name="submitted" id="submitted" value="true"/>
<button type="submit" class="submit superlink">E-Mail senden</button>
</li>
</ul>
</form>
</div>
<!-- END FORM-->
</div>
The result of it, is that every time I test it my Email program opens and fills part of the code inside a new mail of mine.
What is wrong here?
What I wanted was that a mail with the content of the input fields is sent to me, instead!
Appreciate your help!
Thanks very much
Garavani
You can't send an email out of the browser.
<form action="mailto:contact#stefanseifert.com" ... specifies what should happen, once the form is submitted. This action opens the standard email client to send an email to that address - that's what you experienced.
if you want the email to be sent automatically by a server to you, you need to implement it in php, c#, java - or any other language on that server, and send the form data to the server