Custom Input Names on GravityForms - html

How can I add custom input names to gravity forms? I need to submit a form to a third party service that requires very specific form names.
My current idea is to write a bit of jQuery to dynamically rename everything when the page loads. Obviously this isn't ideal.
Gravity Forms: http://www.gravityforms.com/

After contacting the makers of Gravity Forms, it sounds like they don't support custom input names. As a workaround, I wrote a bit of jQuery to rename inputs with the correct form names. For example:
$("input#input_1_1").attr("name","first_name");

Just put some code in functions.php and fill out the form which will then email you with a list of the id names, they are the same names that you can fine using developer tools etc. This was just faster for me. Then change the code to have it post via curl with different input names.
This uses php so it's on the server to handle. That way you don't have to worry about people with JS disabled in their browser.
http://0to5.com/gravity-forms-submitting-forms-to-3rd-party-applications/

Add a new field (HTML field). In content settings of this field add this javascript with script tags
Non-jquery solution:
document.getElementById("input_14_4").setAttribute("name", "email");
Another solution i found here
https://docs.gravityforms.com/gform_field_content/
add_filter( 'gform_field_content', function ( $field_content, $field , $value, $lead_id, $form_id) {
if ( $form['id'] != 14 ) {
//not the form whose tag you want to change, return the unchanged tag
return $field_content;
}
if ( $field->id == 3 ) {
return preg_replace( "|name='(.*?)'|", "name='email'", $field_content );
}
return $field_content;
}, 10, 5 );

Related

Angular, make links in comments clickable

I am working on an application where user can add comments to certain fields. these comments can also be links. So, as a user I want to be able to click on those links rather than copy pasting them in a new tab.
If a normal web link ([http://|http:]... or [https://|https:]...) occurs in a comment/attribute value, it should be presented as a clickable link.
Multiple links may occur in the same comment/attribute value.
Clicking on a link opens a new browser tab that calls up this link.
This is how the formControl is being managed. I think i can identify multiply links with the help of regex but how do I make them clickable as well?
Thanks for answering and helping in advance.
this.formControl = new FormControl('', [this.params.customValidations(this.params)]);
this.formControl.valueChanges.subscribe(() => {
this.sendStatusToServices();
});
Outside the form editor/input (most likely what you're looking for)
Either before saving the value of the Form Field to the Database, or editing the received body from the database just before presenting to the user, you can use Regex to replace links with anchor tags.
function replaceURLWithHTMLLinks(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a href='$1'>$1</a>");
}
Rich text editor
If however, you're trying to enable links INSIDE the form input (like WordPress's text editor), that's going to be a bit more difficult. You'll need a <textarea> to enable custom HTML elements. Then you need to detect when the user has typed a URL, so you can call replaceURLWithHTMLLinks(). Honestly, you should just use a package. There's several good one out there.
Angular Rich Text Editor - A WYSIWYG Markdown Editor, by SyncFusion
NgxEditor, by sibiraj-s
typester-editor
Hope this helps
Using a regex approach and a pipe I was able to come up with something like below.
What I'm doing is replacing the links with hyperlink tags using a proper regex.
url replacement regex is taken from here
Supports multiple links within same comment.
Here is the sample pipe code
#Pipe({
name: 'comment'
})
export class CommentPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer){}
transform(value: any, args?: any): any {
const replacedValue = this.linkify(value);
return this.sanitizer.bypassSecurityTrustHtml(replacedValue)
}
// https://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links#21925491
// this method is taken from above answer
linkify(inputText: string) {
var replacedText, replacePattern1, replacePattern2, replacePattern3;
//URLs starting with http://, https://, or ftp://
replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/gim;
replacedText = inputText.replace(replacePattern1, '$1');
//URLs starting with "www." (without // before it, or it'd re-link the ones done above).
replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
replacedText = replacedText.replace(replacePattern2, '$1$2');
//Change email addresses to mailto:: links.
replacePattern3 = /(([a-zA-Z0-9\-\_\.])+#[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
replacedText = replacedText.replace(replacePattern3, '$1');
return replacedText;
}
}
Here is the completed stackblitz
If you want links within Input itself you might want to try different approach

What are precautions you should take when you allow users to edit HTML and CSS on your website?

Tumblr is really impressive in the sense that it allows users to customize their profiles and such. You're allowed to edit the HTML and CSS of your profile.
This is something I want to apply to my own site. However, I'm sure that this will be a big burden on security.
Does anyone have any tips or precautions for a feature like Tumblr's? Also, is it advisable to store the editable HTML and CSS in a database? Thank you :D
P.S.
What about server-side scripting? Lets say I wanted to grant the option of allowing the user to script a button that does something to the database. Any thoughts on how to do this?
This is a very difficult thing to get right, in my experience, if you want users to be able to use absolutely all of HTML/CSS. What you could do, however, is strip all CSS and HTML attributes, and only put "safe" code on a whitelist.
Examples
<p>This is legal code.</p>
<p><a onload="alert('XSS!')">The attribute should be filtered out</a></p>
<p>This is a legal link.
Of course you should still sanitize the href attribute!</p>
<h1>This is bad, because the rest of the page is going to huge,
so make sure there's a closing tag
<style>
.blue {
color: #00f; // keep this (by whitelist)
strange-css-rule: possibly-dangerous; // Filter this out!
}
</style>
Those are just some of the pitfalls you can encounter, though.
I'm not familiar with Tumblr, but I'm pretty sure they're doing something similar to this.
As for the database question, of course you can store HTML and CSS in a database, many systems do this. In your case, you would just need one representation anyway, anything else would just confuse the user ("Why is my CSS rule not applied; it's right there in the code!")
If you are using php then, for database issue you can use mini API system. For example, you want user to allow comment on something and save it in your database, then you can use API like this.
First, api.php file, (URL Location: http://yoursite.com/api.php)
<?php
// ID and Key can be different for all users.
// id = 1234
// key = 'secret_key'
// function = name of the function, user can call
// option = parameter passed to the function
// Now check if id, key, function and option are requested and then
// call function if it exists.
if(isset($_GET['id'], $_GET['key'], $_GET['function'], $_GET['option']) {
$id = $_GET['id'];
$key = $_GET['key'];
if($id == '1234' && $key == 'secret_key') {
// define all functions here
function make_comment($option) {
...code for saving comment to database...
}
if(function_exists($_GET['function'])) {
$_GET['function']($_GET['option']);
}
}
}
?>
Then uesr can call this function from any button using simple call to the API, like
<a href='http://yoursite.com/api.php?id=1234&key=secret_key&function=make_comment&option=i_am_comment'></a>

How to override non-theme function in Drupal

I need to change the function that dictates the behavior of my Search form. I want the text to be "GO" instead of "Search" and the input type to be search instead of text.
Now, I already done that by editing the search.module, but is there a more convenient way? I want the theme to be 1 package deal and ready to go, not to have to edit other files from the Drupal installation.
It is for Drupal v.7.16
Thank you!
In your theme's template.php you can override any part of the search form by implement MYTHEME_form_alter.
For your example, it might look something like this:
function MYTHEME_form_alter(&$form, &$form_state, $form_id) {
if ($form_id == 'search_block_form') {
// Change form submit text
$form['actions']['submit']['#value'] = t('GO!');
// Change type to 'search'
$form['search_block_form']['#type'] = 'search';
}
}
For more background information about Tanis' solution, see the API documentation for hook_form_alter() and hook_form_FORM_ID_alter().

How to delete initial field value when user clicks on respective box?

I want to know if its possible writing some code which will delete an initial value from a form when the user clicks on the corresponding form (described in the following example)?
class example(forms.Form):
name = forms.CharField()
email = forms.EmailField()
descr = forms.CharField(initial='Please insert a relevant description ...')
I dont want to use the help_text attribute.
PS: For a better understanding I could make an analogy with java onclick event
One way is to use HTML5's placeholder attribute directly from Django:
descr = forms.CharField(widget=forms.TextInput(attrs={
'placeholder': 'Please insert a relevant description ...'}))
The unique constraint is that it is not yet supported by Internet Explorer.
Because it's a webservice you'll have to use javascript. If you use jQuery, something like this:
$(document).ready(function(){
$('#id_descr').one('click', function(){
$(this).val('');
});
});
for the backend part, have a look at this answer. For the frontend, you may wish to add a html5 shiv to get placeholders in legacy browsers

Greasemonkey script for auto-fill form and submit automatically

As the title suggests, I want to actually brute-force (don't pay attention, useless information) using grease-monkey script by trying each word/alphabet I provide.
But as I think jQuery is more easier than Javascript itself , so I would also like to embed jQuery in it.
The second thing thats bugging me is to actually submit a form with a specific value.
And is there a way to store some values...like if "abcd" did not work in the input field then the page would refresh thus this un-intelligent script won't be able to detect that this word did not work already..and it will try that same "abcd" word again.
Sorry for the vague details
var lastTried = parseInt(GM_getValue("LAST", "-1")); //GM_* will not work on Chrome to the best of my knowledge, would have to use cookies in that case.
if((docIK.location.href == AddressA) || (docIK.location.href == AddressA?error)) //for example, pseudo code
{
if(lastTried < wordsToTry.length){
lastTried++;
form.data.value = wordsToTry[lastTried]; //form.data.value is more pseudo code, wordsToTry is array of the words that you are going to provide
GM_setValue("LAST", lastTried.toString());
form.submit();
}
}
else //Address B
{
//Success
}