Jump to content

How to change field descriptors on forms - 7.1

Recommended Posts

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

Screenshot 2020-07-10 at 13.14.00.png

Link to comment
  • 1 month later...
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? 

 

Link to comment
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";
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 

 

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Link to comment
  • 7 months later...

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.

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@GregLassale

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

693542366_ScreenShot2021-04-04at12_25_57PM.png.4b567cabe86019eafbbf5f0309bc394c.png

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

1562235759_ScreenShot2021-04-04at12_27_27PM.png.6093cae55a2b1ff7936d3ad749a495ab.png

This is an example image showing the SAVE button.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.

 445477051_ScreenShot2021-04-04at6_58_43PM.thumb.png.b9cef2104a278ccb90e4270cd8b0fd45.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.