Custom Google Form? Example of Google Form API? - css

I'm trying to make a google form look like my own site. I found examples of how to do this on How to style Google Forms and google-custom-form (GitHub project), but I tried both of the examples they give and they seem to fail now.
I had a look at Class Form - Google Apps Script which seems to be like an API, but I can't get my head around the documentation. Does anyone have an example of it working. Or has found another way of getting this to work? It would be really handy to do as embedded forms look really out of sync with the rest of the site.

The API you're linking to is an apps script API. This is needed if you want to create dynamic forms (dynamic amount of questions, dynamic answers,...) but not for custom styling. An intro to appscript can be found on this page: https://developers.google.com/apps-script/
You could just create a form manually on https://www.google.com/forms/about/
You can change the styling and colors in the top-right of the page. When you are ready to embed the form on your own page you have to press "SEND", an select the embed icon <> at the top.

I've worked with this a ton, and still have issues with it. Been learning the new api v4 for sheets but still having trouble, it is still in beta too. For now I can recommend this solution though by heaversm on github.
https://github.com/heaversm/google-custom-form
The example fully works as long as you find the entry.xxxxxxx for each field and replace in the appropriate js. To avoid the embed issues, give your form submit on a click function that has the event as the input and then preventDefault on the event like so:
$('#submit-button').on('click', function(event){
event.preventDefault();
// continue code from heaversm
});
Hope this works for you. Cheers

Related

WixCode Opting out of Google Analytics

Can anybody help me to find a solution how to make this code work on my Wix-Site:
Click here to opt-out of Google Analytics
I have this code from Google itself (At the bottom of the page see "example"):
https://developers.google.com/analytics/devguides/collection/gajs/
Here is a Screenshot of this code from the google website:
Google Analytics Opt Out Code
I tried this:
$w("#text1").html = "<a href='javascript:gaOptout()'>Click here to opt-out of Google Analytics</a>";
But I was told that in Wix it is not possible to add events to a-tag elements in text element. Here you will find the little discussion that I had on Wix Forum:
https://www.wix.com/code/home/forum/questions-answers/how-to-link-text-to-a-url-using-w-link
I also asked on Reddit, Facebook and WixSupport. But nobody could help me with that issue.
You might want to take a look at the new wix feature called "tracking and analytics". It lets you embed custom scripts in your html's body, header, or footer.
https://support.wix.com/en/article/about-tracking-tools-analytics
You cannot access the HTML directly via Wix Code. Wix Code exposes a dedicated API for you to manipulate their controllers and elements on screen but not further under the hood.
You can use wix-fetch to call external API calls to google analytics (if they have an API to opt-out, not familiar enough to say here is the post)
anyway, your code in Wix should be something like this:
(as example API taken from their docs)
import {fetch} from 'wix-data'
fetch('https://analyticsreporting.googleapis.com/v4/...', options) // returns a Promise

Is there a way to edit css of new google forms?

Before I used to be able to just copy the source code of the form and paste the part between <form></form> into the page and add my own styling. But this doesn't seem to work anymore.
Has anyone found a way to still be able to customize google forms?
Yes, you can easily make the <form> work by following these steps.
Create a Google Form.
Get the link and open the form in a new tab.
Create a barebone form having same items as the Google form.
Inspect Google form for action attribute.
a. Copy the same action to your form.
Inspect and find values for attributes name in the Google form.
a. Give the same name values for your form items as well. The values look like entry.742532386.
Check if your form gets the responses.
Since it is a native <form> element, apply CSS however you want to.
Read more here
Google forms does not currently (mar-2021) have a built in feature to add css or javascript to their forms.
I created this GitHub project to work around the problem: https://github.com/calledit/google_form_javascript_css

Can I submit a form with google's recaptcha in it from my app?

I'm writing an app which involves letting users to share comments on a website, which has a comment form with Google's reCAPTCHA embeded. I would like to load this page via HTTP and display CAPTCHA within my app, so that user can post comments from my app. Is it easy to implement or should I rather try other solution?
EDIT:
I've red reCAPTCHA developer guide. If I would like to embed captcha inside my form, I'd need to insert div element with a proper class, and make a ajax request in order to render captcha. This call would insert an iframe into a given div. What I need is to know how to access that iframe's content without using AJAX.
Turns out we are not supposed to do that kind of tricks with reCAPTCHA.
There is no support for that in API. It seems that it was part of Google's design to prevent that kind of usage.
The only walkaround I could come up with is to implement a WebView widget with JavaScript support, get website via http, and load it into this webview, centering this view around the form we want to post.
It seems like a lot of work though, thus I'm going to simply skip this, if someone successfuly manages to figure it out I'd appreciate a hint :)

Is There a way to customize the IN/Company link for LinkedIn

I have inherited some code which uses uses the LinkedIn Company Profile API. At least that's what I think it is. Basically a script tag is rendered in the following format:
<script type="IN/CompanyProfile" data-id="9999" data-format="click"></script>
This together with .js file creates a link with the Linked-in logo which when clicked on reveals profile of company. Question is, can I customize the link. I want to add some text to the right of the linked in logo. I couldn't find any relevant documentation on it. I added a span tag with some text and attempted to wire up the click of the span, so that when clicked it clicks the linkedin icon. That doesn't seem to work-- which I found rather odd.
Any thoughts?
The Company Profile plugin builder is here:
https://developer.linkedin.com/plugins/company-profile-plugin
Customization of this plugin is limited to width (using data-width) at this time because of the complex layout. However, you could build something similar using the Javascript API if you need something more customized to your system.
This is another option that is more customizable, but has less interactivity:
https://www.linkedin.com/profile/profile-badges

Facebook comments: CSS doesn't work

I'm developing a website and I decided to use Facebook comments to provide commentable behaviour. But, unfortunately, I met some problems.
While trying to customize look of news page, ex. http://buchman.pcspace.pl/aktualnosci/ept-snowfest-podsumowanie-czwartego-dnia.html, I am not able to apply CSS to view: everything appears correctly in HTML source, but doesn't change view.
What's wrong?
According to this blog post the new fb:comments no longer supports custom CSS.
After log research I noticed that while loading fb frame, it doesn't use css given as param.
It causes all parts don't work..

Resources