How to change field descriptors on forms - 7.1

Hi all,

Hope someone can help.

In 7.1 is there a way to change the text that appears under the various sections created when you add a form block? 

For example, as shown on the attached screen grab, when I add "address" to a form it creates the text entry boxes Address 1, Address 2, City, Zip/Postal Code, State/Province, Country

I want to be able to change those values, so for my UK website I can remove "zip" and change "State/Province" to "County".

Is there a way to do this? Code this?

Thanks

Bump

Can you share link to your site? We can check easier.

On 7/16/2020 at 2:30 PM, tuanphan said:

On 7/16/2020 at 2:30 PM, tuanphan said:

Can you share link to your site? We can check easier.

Hi! is the description on the form easy to customised I have the same issue, I need to change (name - surname) for the equivalent in Finnish language in a multi-language page is this possible? 

16 minutes ago, Rte said:

 

Can you share link to page where you use form? We can check easier.

18 hours ago, tuanphan said:

Can you share link to page where you use form? We can check easier.

www.chipa.fi

8 hours ago, Rte said:

www.chipa.fi

I don't see form in this page. Did you remove it?

17 hours ago, tuanphan said:

I don't see form in this page. Did you remove it? 

The form is in Contact Us > Finnish version here https://www.chipa.fi/ota-yhteytt

 

2 hours ago, Rte said:

 

Add to Home > Design > Custom CSS

/* First name */
.field.first-name span.caption-text {
    visibility: hidden;
}
.field.first-name span.caption-text:before {
    visibility: visible;
    content: "New first";
}
/* last name */
.field.last-name span.caption-text {
    visibility: hidden;
}
.field.last-name span.caption-text:before {
    visibility: visible;
    content: "new last name";
}

On 8/21/2020 at 12:56 PM, tuanphan said:

Add to Home > Design > Custom CSS

/* First name */
.field.first-name span.caption-text {
    visibility: hidden;
}
.field.first-name span.caption-text:before {
    visibility: visible;
    content: "New first";
}
/* last name */
.field.last-name span.caption-text {
    visibility: hidden;
}
.field.last-name span.caption-text:before {
    visibility: visible;
    content: "new last name";
}

 

@tuanphan  Thank you! this works fine but this also overwrites the English version that should remain, is there a way to keep the EN and FI code separately? now they are both in FI https://www.chipa.fi/contact 

15 minutes ago, Rte said:

@tuanphan  Thank you! this works fine but this also overwrites the English version that should remain, is there a way to keep the EN and FI code separately? now they are both in FI https://www.chipa.fi/contact 

 

Add to Page Settings > Advanced > Header

<style>
  /* First name */
.field.first-name span.caption-text {
    visibility: hidden;
}
.field.first-name span.caption-text:before {
    visibility: visible;
    content: "New first";
}
/* last name */
.field.last-name span.caption-text {
    visibility: hidden;
}
.field.last-name span.caption-text:before {
    visibility: visible;
    content: "new last name";
}
</style>

On 8/24/2020 at 2:50 PM, tuanphan said:

Add to Page Settings > Advanced > Header

<style>
  /* First name */
.field.first-name span.caption-text {
    visibility: hidden;
}
.field.first-name span.caption-text:before {
    visibility: visible;
    content: "New first";
}
/* last name */
.field.last-name span.caption-text {
    visibility: hidden;
}
.field.last-name span.caption-text:before {
    visibility: visible;
    content: "new last name";
}
</style>

 

Is this instead of the Design > Custom CSS or should I keep both?

remove in Custom CSS

20 hours ago, tuanphan said:

remove in Custom CSS

This changes both forms still, what I need is to leave https://www.chipa.fi/contact with english default (name and surname) and https://www.chipa.fi/ota-yhteytt with the Finnish equivalent (Etunimi and Sukunimi) 

Did you add to Page Header or Code Injection Header?

I add this to Code Injection Header, where can I find just Page header? is the one on the picture where I should use it? 

Hover on Page on Navigation (or Not Linked) > Click Gear Icon > Advanced > Header

Hi there,

I'm reviving this thread since I'm trying to achieve the same thing (Brine). I added the following code to the Page Header (gear icon on contact page hover > Advanced > Page Header Code Injection) but no change to the contact form. 

<style>
  /* First name */
.field.first-name span.caption-text {
    visibility: hidden;
}
.field.first-name span.caption-text:before {
    visibility: visible;
    content: "Prénom";
}
/* last name */
.field.last-name span.caption-text {
    visibility: hidden;
}
.field.last-name span.caption-text:before {
    visibility: visible;
    content: "Nom de famille";
}
</style>

 What am I missing?

Thank you.

@GregLassale

Please post the URL for your contact page on your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Thank you @creedon

Website is public: https://gregorylassale.com

Specific page is https://gregorylassale.com/french#contactfr

@GregLassale

When I try the code you posted locally it works a treat.

Are you sure you installed the code on the Contact page and saved?

This is an example image showing the SAVE button.

@creedon I must be doing something wrong. 

I injected the code in "Contact_FR" settings (gear icon) > Advanced > Page Header Code Injection and did save, but no change. 

That looks good to me but when I view the source I don't see the code.

I wonder if this is a case of the curse of Ajax Loading. Could you try turning off Ajax Loading to see if the problem goes away?

The only other thing I can think of is you have some custom code (Javascript) that might be messing things up. I didn't see anything obvious. But it couldn't hurt to comment it out to see if that is the issue.

Let us know how it goes.

Erratum: my template is Sofia (but still from Brine family).

I don't have a way to turn off Ajax loading through Design > Site Styles, so I inserted the following code in Settings > Advanced > Code injection > Header:

<script src="https://content1.getnarrativeapp.com/ss-ajax-loader.js"></script>

which I found on https://help.narrative.so/en/articles/1837956-publish-how-to-turn-off-ajax-loading-in-squarespace

I then added the contact form code again, but it's still not working. 

Here is javascript code I have in the site-wide header:

<!--Header Injection Tab-->

<link rel="stylesheet" href="//www.squarewebsites.org/assets/animate-on-scroll/style.css"/>
<script>
  window.animOnScrollConfig = {
	'body': {
        items: '.image-block,.summary-item,.sqs-gallery img,.html-block,.sqs-block-button,.sqs-slice',//animating images,text blocks and buttons blocks on site
        effect: 'fadeIn',
       	easing: 'cubic-bezier(1, 0.2, 0.32, 1)',
        minDuration: 0.5,
        maxDuration: 0.5,
        viewportFactor: 0.2,
    }
   };
</script>

<script src="//uploader.squarewebsites.org/sqs-form-upload.min.js"></script>

<script>
  window.oldSetTimeout = window.setTimeout;
  window.setTimeout = function(code, delay) {
    if (delay == 5000) {
      delay = 5500;
    }
    var retval = window.oldSetTimeout(code, delay);
    return retval;
  };
  window.oldSetInterval = window.setInterval;
  window.setInterval = function(code, delay) {
    if (delay == 5000) {
      delay = 5500;
    }
    var retval = window.oldSetInterval(code, delay);
    return retval;
  };
  </script>

<script>
$(function() {
  $('a[href*=#]').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
  });
});
</script>

and in the footer: 

<!--Footer Injection Tab-->

<script src="//www.squarewebsites.org/assets/animate-on-scroll/anim-on-scroll.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script>
  if (! window.cs) { var cs = {}; }
  if (! cs.util) { cs.util = {}; }

  cs.util.watchPage = function(callback) {
    console.log('watchPage()');
    var targetNodes         = $('#content');
    var MutationObserver    = window.MutationObserver || window.WebKitMutationObserver;
    var myObserver          = new MutationObserver (callback);
    var obsConfig           = { 
        childList: true, 
        characterData: false, 
        attributes: false, 
        subtree: false
    };

    //--- Add a target node to the observer. Can only add one node at a time.
    targetNodes.each( function () {
      myObserver.observe (this, obsConfig);
    });
  }

  /*
  * Fix issue with some template that rely on absolute positioning for 
  * some sections and images
  */
  cs.util.fireWindowResize = function fireWindowResize() {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent('resize', true, false);
    window.dispatchEvent(evt);
  };

  /*
  * Detect elements that do not render immediatly on the page due
  * to an ajax load or some kind of splash screen effect
  */
  cs.util.onElementLoad = function onElementLoad(selector, callback) {
    var checkExistCounter = 0;
    var checkExist = setInterval(function() {
      if ($(selector).length) {
        callback();
        clearInterval(checkExist);
      }
      if (checkExistCounter > 20) {
        clearInterval(checkExist);
      }
      checkExistCounter++;
    }, 500); // check every 500ms
  };

  if (! cs.accordion) { cs.accordion = {}; }

  cs.accordion = cs.accordion || {};
  cs.accordion.isInitialized = false;
  cs.accordion.toggleSpeed = 200;
  cs.accordion.initializeAccordion = function initializeAccordion() {
    console.log('initializeAccordion');
    cs.util.onElementLoad('ul[class*=accordion]', cs.accordion.bindAccordion);
  }

  cs.accordion.bindAccordion = function bindAccordion() {
    if (!cs.accordion.isInitialized) {
      $('ul[class*=accordion]').each(function () {
        var $accordion = $(this); // Current Accordion
        var $items = $accordion.find('li');
        $items.find('span[class*=__title]').off('click').on('click', function(event) {
          event.preventDefault();
          var $title = $(this);
          var $parent = $title.parent();

          if($parent.hasClass('selected')) {
            $parent.removeClass('selected');
            $title.next().slideUp(cs.accordion.toggleSpeed, cs.util.fireWindowResize);
          } else {
            $items.removeClass('selected');
            $items.find('div[class*=__content]').slideUp(cs.accordion.toggleSpeed);
            $parent.addClass('selected');
            $title.next().slideDown(cs.accordion.toggleSpeed, cs.util.fireWindowResize);
          }
        });

      });
      cs.accordion.isInitialized = true;
    }
  }

  $(document).ready(function(){
    cs.util.watchPage(cs.accordion.initializeAccordion);
    cs.accordion.initializeAccordion();
  });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <a href="#" class="back-to-top"><span class="arrow"></span>Top</a> <script>$(document).ready(function(){var o=300;$(window).scroll(function(){$(window).scrollTop()>o?$("a.back-to-top").fadeIn("slow"):$("a.back-to-top").fadeOut("slow")}),$("a.back-to-top").click(function(){return $("html, body").animate({scrollTop:0},700),!1})});</script>

And here is what I have in both index pages' header.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">

Here is how the pages are laid out. I hope it makes sense. I have essentially zero coding knowledge or understanding of website design best practices.

@GregLassale

If you go to Design > Site Styles and search for ajax the tweak doesn't show up?